目次

• はじめに
• どんな仕様が変わったのか？
• ガイドライン
• 最後に

はじめに

ファビコン(favicon)の設定していますか？あるサイト、ないサイト両方見かけますね。

ちなみに、ファビコンとは左上にあるアイコンのことです。（画像参照）

どんな仕様が変わったのか？

今年の5月末より、モバイル版でサイト検索をした時の表示が変更されたそうです。
今までは、「タイトル → URL」でしたが、「ファビコン → URL → タイトル」という順に変わっており、新たにファビコンも表示されるようになりました。

引用、参考サイト：A New Design for Google Search on Mobile

弊社のサイトもこのように表示されています。

ガイドライン

ファビコンが表示される条件や、設置方法のガイドラインがありますので、詳しくはこちらからどうぞ。

最後に

今までのようにSEOに影響するという訳ではありませんが、検索ページで表示された時の見え方（目につきやすくなるなど） が変わるのではないでしょうか？
そこからクリック率に関わることもあると思いますので、今まで以上に意識したいポイントですね。

目次

• はじめに
• vertical-alignを比較してみた
• まとめ

はじめに

vertical-alignを使っていますか？垂直方向の位置を揃えたりと 便利なプロパティですが、色々な値を持っているので それらを比較しようと思います！

比較方法

pタグ（ブロック要素）の中にspanで囲った文字（インライン要素）と、画像（インライン要素）を入れています。それらがどのように配置されるかをみてみましょう。

※pタグの行間はline-height: 1.5;です。
※vertical-alignはブロック要素には効きません。
インライン要素と、テーブルセルのどちらかでないと効きませんのでお気をつけください。

vertical-alignを比較してみた

baseline（初期値）

親要素のベースラインに揃えます。何も指定がなければ、これがデフォルトになっています。

あいうえお

top

行の高さの上端に揃えます。

あいうえお

middle

行の高さの中央に揃えます。

あいうえお

bottom

行の高さの下端に揃えます。

あいうえお

text-top

親要素のテキストの上端に揃えます。

あいうえお

text-bottom

親要素のテキストの下端に揃えます。

あいうえお

数値（20px）

親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

あいうえお

数値（-40%）

先ほどと同じように、親要素のベースラインを基準に、プラスの数字なら上へ、マイナスなら下へいきます。

あいうえお

super

親要素を基準に、上付き文字の位置になります。

あいうえお

sub

親要素を基準に、下付き文字の位置になります。

あいうえお

まとめ

いかがでしたか？
なんとなくで使っていた方も多い？と思いますが、少しでも理解が深まり、気づきがあれば幸いです♪

参考サイト

• vertical-align – CSS: カスケーディングスタイルシート | MDN
• vertical-align－スタイルシートリファレンス
• vertical-align – CSS Reference
• 大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する方法 – スタイルシートTipsふぁくとりー

はじめに

headタグの中身、なんとなくで使っているタグないですか？
今回はよく記載されているものを確認していきます。

headの中身を確認してみよう

文字のエンコード

		<meta charset="utf-8">
		

文字コードを指定します。文字化けの原因になるので必ず記載しましょう。

タイトル

		<title>たねっぱ！</title>
		

webサイト・ページのタイトルになります。ブラウザの検索結果や、ブラウザのタブにも表示されます。

ディスクリプションの設定

		<meta name="description" content="">
		

ディスクリプションに記入したテキストは、検索結果に出る文章としても使われます。（使われない場合もあります）

キーワードの設定

		<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
		

サイトに関するキーワードを複数設定できますが、直接的なSEOの効果はありません。

ビューポートの設定

		<meta name="viewport" content="width=device-width, initial-scale=1">
		

スマホやレスポンシブ対応する場合は必須になります。

電話番号などの自動リンク無効化

		<meta name="format-detection" content="telephone=no">
		

ページ内の電話番号（およびその他の番号なども）自動的にリンクしてしまうので、それらを無効化します。

IE対策

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		

これを入れることで、IE・エッジの最新バージョンで表示されます。互換モードで表示されている場合も、通常表示になります。

SNS対策・OGPの設定

    <!-- OGP -->
    <meta property="og:url" content="ページのURL">
    <meta property="og:type" content="ページの種類">
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="ページの説明文">
    <meta property="og:image" content="画像のURL">
    <meta property="og:site_name" content="サイトの名前">
    <meta property="og:locale" content="ja_JP">

    <!-- Facebook -->
    <meta property="fb:app_id" content="アプリID">
    <meta property="article:publisher" content="FacebookページのURL" />

    <!-- Twitter -->
    <meta name="twitter:card" content="Twitterカードの種類" />
    <meta name="twitter:site" content="@ユーザー名" />
    <meta name="twitter:creator" content="@ユーザー名">
    <meta name="twitter:title" content="ページのタイトル">
    <meta name="twitter:description" content="ページの説明文">
    <meta name="twitter:image" content="画像のURL">

		

FacebookやTwittertなどでシェアされた時の設定になります。

補足ですが、og:type（ページの種類）は、website・blog・article・profileなどがあります。
twitter:card（カードの種類）は、summaryかsummary_large_imageがあります。

ファビコンの設定

    <!-- icoの場合 -->
    <link rel="icon" href="/favicon.ico">

    <!-- pngの場合 -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- gifの場合 -->
    <link rel="icon" type="image/gif" href="/favicon.gif">
    

CSSの読み込み

    <link rel="stylesheet" href="">
    

JavaScriptの読み込み

    <script src=""></script>
    

最後に

いかがでしたか？headには大事な情報が詰まっているので、しっかり設定していきたいですね(^^)♪

背景を斜めに区切ったレイアウトにする方法を紹介します。
色々なやり方がありますが、画像を使わずCSSのみでできる２パターンを紹介します。

目次

• 参考サイト例
• borderを使った方法
• transform: skew を使った方法
• 最後に

参考サイト例

斜めに区切るレイアウトを使っているサイトをピックアップしてみました。
よければご覧ください。

・有休調整さん presented by Club Med×調整さん

・+graph Cloud & Agent

実装方法

borderを使った方法

borderで三角形を作る仕組みを利用して、セクション間に配置する方法です。
セクションに擬似要素（before,after）で三角形を作ります。

背景画像を使った方法と同じく、ブラウザサイズによって、三角形の形が多少伸縮するので、角度が変わると困る場合は 気をつけてください。

※三角形の作り方が よくわからない人は、「三角形の作り方」を書いているページがあるので、ご覧ください。
「CSSで三角形をつくる方法 | たねっぱ！」

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
      <p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      /*レイアウト用のCSS*/
      padding: 50px;
    }
    .section1{
      position: relative;

      /*レイアウト用のCSS*/
      background-color: pink;
    }
    .section1::before{
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;

      /*ここで三角形のサイズを決める。
      必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
      border-width: 0 0 100px 100vw ;

      border-color: transparent transparent #fff transparent;
    }
    

transform: skew を使った方法

transform: skew を使って、セクションの擬似要素に平行四辺形を作り、配置する方法です。

    <div class="section1">
      <p>コンテンツ</p>
    </div>

    <div class="section2">
    	<p>コンテンツ</p>
    </div>
    

    .section1,
    .section2{
      padding: 50px 30px;
    }

    .section1 {
      background:pink;
    }
    .section2 {
      position: relative;
      z-index: 0;
    }
    .section2::after{
      content: '';
      position: absolute;
      left:0;
      top: 0;

      /*四角形を傾けます*/
      transform: skewY(-5deg);
      transform-origin: bottom left;

      z-index: -1;
      width:100%;
      height:100%;
      background:#fff;
    }
    

最後に

webサイトではよく見かけるレイアウトなので、チャレンジしてみてください♪

目次

• １.text-indentについて
• ２.インデント（字下げ）をやってみよう
• ３.応用編
• ４.まとめ

text-indentについて

CSSで「text-indent: 1em;」を設定すると、先頭にスペースができます。

インデント（字下げ）をやってみよう

はじめに

ベースのソースコードになります。

    <ul>
      <li>※The European languages are members of the same family. Their separate existence …</li>
      <li>※The European languages are members of the same family. Their separate existence …</li>
    </ul>

    

• ※The European languages are members of the same family. Their separate existence …
• ※The European languages are members of the same family. Their separate existence …

インデントしてみる

「li」に対して、「text-indent: -1em;」とマイナスを使うことで、１行目だけ左へ寄せます。
(※つまり、２行目以降がインデントされた状態になります。)

        <style>
          ul li {
            text-indent: -1em;
          }
        </style>
        

• ※The European languages are members of the same family. Their separate existence …
• ※The European languages are members of the same family. Their separate existence …

元の位置へ戻す（右へ寄せる）

左へ寄せるために負の値を使ってしまったので、グレーの枠（コンテンツ幅）よりはみ出ていますよね。
それを元に戻すために、「margin-left: 1em;」を指定し、indentした幅と同じ分だけ ulごとを右へ寄せます。

これで完成です！

        <style>
          ul{
            text-indent: -1em;
          }

          ul li{
            margin-left: 1em;
          }
        </style>
        

• ※The European languages are members of the same family. Their separate existence …
• ※The European languages are members of the same family. Their separate existence …

応用編

擬似要素を使うことで、リストマーカー（先頭についてる※などの部分）を一括で指定できます。

好きな記号や特別文字なども一括で設定できますので、ぜひ試してみてくださいね♪

        <ul>
          <li>The European languages are members of the same family. Their separate existence …</li>
          <li>The European languages are members of the same family. Their separate existence …</li>
        </ul>

        <style>
          ul {
            text-indent: -1em;
            margin-left: 1em;
          }

          ul li:before {
            content: "★";
          }
        </style>
        

• The European languages are members of the same family. Their separate existence …
• The European languages are members of the same family. Their separate existence …

まとめ

うまくできましたか？
text-indentの仕組みがわかれば、使える場面もたくさんありますのでぜひ使ってみてください(^^)

ショートカットキー忘れた！あのプロパティ名が思い出せない・・・などなど
ふとした時にチートシートを見て救われたり。
こんなのがあるんだ！っていう発見もあるかも。

そんな時、日本語版の方が見やすいかな？と思ったので、
日本語版のものを集めてみました！(&英語でもわかりやすいもの）

PCに保存したり、１枚印刷して手元に置いておくと便利です。

目次

• Illustratorのショートカットキーリスト
• Photoshopのショートカットキーリスト
• 日本語版 WordPress チートシート
• WordPress Template Hierarchy
• HTML5タグ★チートシート
• CSS Flexbox チートシート
• CSS Cheat Sheet

日本語版チートシートまとめ

Illustratorのショートカットキーリスト

デザイナーが良く使うショートカットをピックアップしています！
日本語で非常に見やすいので、デスクなどに置いておきたい１枚ですね。

配布元:Adobe

Photoshopのショートカットキーリスト

先ほど紹介したシートの、フォトショップ版です！
こちらも合わせて印刷しておくと便利かと思います。

配布元:Adobe

有名なブログ「Webクリエイターボックス」さんが配布してくださっている、WordPressのチートシートです。
例文付きで、見やすくまとまっていてオススメです。

配布元:Webクリエイターボックス

WordPress Template Hierarchy

WordPressのテンプレート構成を図にまとめています。

配布元:WORDPRESS.ORG

HTML5タグ★チートシート

HTML5のタグと概要の説明が載っています。
チートシートがあると検索する手間が省けますね。

配布元:＠IT

まとめ

いかがでしたか？
チートシートはみやすくまとめられているので、ぜひご活用ください。
また素敵なチートシートを見つけましたら、紹介しますね♪

レスポンシブコーディングに関しては苦手意識を持っている人も多いようですが、根本的な仕組みはものすごく単純で、後はそれを応用して行くだけですので実際に手を動かしながら勉強すればすぐ身につくかと思います。

そこで今回はレスポンシブコーディングの中でも単純な基本パターンをいくつかご紹介したいと思います。

基礎知識

まずは以下のサンプルを見てください。

サンプル

このサンプルを開いた状態でブラウザの幅を縮めたり広げたりすると色が変わりませんでしたか？

この変化はレスポンシブサイトを作るために必須である「メディアクエリ」の機能を利用し行っています。

実際にどのようなCSSを書いたかというと以下のとおりです。

/***********************************************************************
ブラウザの幅が768px以上ならここの記述が有効になる
**********************************************************************/
@media only screen and (min-width: 768px) {
  body {
    background: #000000;
  }
}
/***********************************************************************
ブラウザの幅が767px以下ならここの記述が有効になる
**********************************************************************/
@media only screen and (max-width: 767px) {
  body {
    background: #ff0000;
  }
}

キモは

@media only screen and (~) {
}

の部分です。この部分が「メディアクエリ」と呼ばれているものです。

「メディアクエリの括弧内に書いた条件を満たしている時のみ、記述したCSSが有効になる」というような効果を持っています。

括弧内に書ける条件は色々あるのですが、主に使うのは「min-width」と「max-width」です。

「min-width: ~px」と書くと「ブラウザの幅が~px以上」の時にCSSが有効になり、「max-width: ~px」と書くと「ブラウザの幅が~px以下」の時にCSSが有効になります。

なのでブラウザの幅が767px以下の時に背景が赤くなって、768px以上の時に黒くなったわけですね。

レスポンシブはこのメディアクエリの「ブラウザの幅によって特定のCSSを有効/無効にする」という特徴が全てで、あらゆるレイアウトの変化をこの特徴を利用して実現します。（もちろん実現できない変化も多いですが…）

実例

それでは、先ほどの基礎知識を踏まえた上で実際の例を見ていきましょう。

これから先の例は、レスポンシブサイトでも簡単な「PCレイアウト」と「SPレイアウト」のみのタブレットレイアウトが無いパターンでご紹介したいと思います。
（実際の案件でもこのパターンが多いです。）

具体的には「ブラウザの幅が768px以上でPCレイアウト」「ブラウザの幅が767px以下でSPレイアウト」「PCレイアウトのコンテンツの幅は960pxなので、768~959pxで横スクロールバーが出る」パターンです。

パターン①「PC: 写真左+テキスト右」⇔「SP: 写真上+テキスト下」

サンプル

一番よく見るのがこのパターンです。PCサイトでは写真とテキストを横並びにして、SPサイトだと縦並びにしているパターンですね。

これは以下の様なHTML/CSSを書いています。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: left;
    width: 460px;
  }
  .row .txt {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

PCレイアウトはよくあるfloatを使った横並びパターンですね（「floatがまだよくわからない」という方はこちらの記事がオススメです）。

先ほどの説明の通り

@media only screen and (min-width: 768px) {
  ~
}

で囲まれているCSSは「ブラウザの幅が768px以上」のときのみ有効なので、「ブラウザの幅が767px以下」の時はfloatの指定もwidthの指定も無かったことになります。

なのでSPレイアウトでは写真とテキストが横並びにならず、縦にならんでいるわけです。

パターン②「PC: 写真右+テキスト左」⇔「SP: 写真上+テキスト下」

さて、次は先ほどと似ていますが、PCレイアウトの時の写真とテキストの並びが逆のパターンです。

サンプル

この場合のHTML/CSSは以下のようになります。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right;
    width: 460px;
  }
  .row .txt {
    float: left;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

このレイアウトはさっきのパターンをちょっとだけ弄れば実現出来るのですが、どこを弄ったかわかったでしょうか？

正解はPCレイアウトにおける.photoと.txtの「float」の部分です。

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right; /* ここと */
    width: 460px;
  }
  .row .txt {
    float: left; /* ここ！ */
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

上のようにfloatのleft、rightの記述をさっきのパターンと逆にするだけで出来てしまいます。

パターン③「パターン①のちょっと複雑なバージョン」

実際のパターンでは、写真とテキストだけでなく、次のように「写真+写真の説明」と「見出し+テキスト」が並んでいるようなパターンも出てきます。

サンプル

HTML/CSSは以下のようになっています。

<div class="row clearfix">
  <div class="leftCol">
    <p class="photo"><img src="~" alt=""></p>
    <p class="note">画像の説明</p>
  </div>
  <!-- /.leftCol -->
  <div class="rightCol">
    <p class="leading">見出し文見出し文見出し文</p>
    <p class="txt">テキストテキストテキスト</p>
  </div>
  <!-- /.rightCol -->
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .leftCol {
    float: left;
    width: 460px;
  }
  .row .rightCol {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .leftCol {
    margin-bottom: 20px;
    text-align: center;
  }
}

パターン①では.photoと.txtに直接floatを与えていましたが、今回は少々複雑なので以下のように「leftCol,rightCol」という枠を作り、それにfloatを与えています。

ぱっと見て少々複雑に見えるパターンでも、実際は今回のようにパターン①の応用で出来るものが多くあります。

また、今回は下のように、幅によらない共通のスタイルはメディアクエリを使わず、普通にCSSを書くことでどの幅でも反映されるようにしています。

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

パターン④「PC: テーブル ⇔ SP: 縦並び」

サンプル

最後に、これもよくあるテーブルレイアウトのレスポンシブコーディングをご紹介したいと思います。

テーブルはPCレイアウトで使ったものをそのままSPレイアウトでも使ってしまうと、かなり窮屈になってしまうことが多々あります。

そこで今回のように、SPレイアウトでは縦並びにすることで解決する方法をよくとります。

HTML/CSSは以下のとおりです。

<table class="sampleTbl">
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
</table>
<!-- /.sampleTbl -->

/***********************************************************************
ブラウザの幅によらない共通のCSS
**********************************************************************/
.sampleTbl th {
  background: #f0f0f0;
  font-weight: bold;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .sampleTbl th,
  .sampleTbl td {
    padding: 10px;
    border: 1px solid #cccccc;
  }
  .sampleTbl th {
    width: 70px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .sampleTbl {
    display: block;
  }
  .sampleTbl tr,
  .sampleTbl th,
  .sampleTbl td {
    display: block;
  }
  .sampleTbl tr {
    border-bottom: 1px solid #cccccc;
  }
  .sampleTbl tr:first-child {
    border-top: 1px solid #cccccc;
  }
  .sampleTbl th,
  .sampleTbl td {
    padding: 5px;
  }
}

PCレイアウトでは特別なことをせず、普通にテーブルのコーディングをしているだけです。

注目してもらいたいのはSPレイアウトのスタイルです。

とくに何もしなければSPレイアウトでも普通のテーブル見た目になってしまうのですが、「table,tr,th,td」に「display: block」を指定することで縦並びにしています。

/* display: blockを指定して縦並びにしている。 */
.sampleTbl {
  display: block;
}
.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
}

デフォルトだとtable要素は「display: table;」、tr要素は「display: table-row;」、th,td要素は「display: table-cell;」が設定されており、それによっていつものテーブルの見た目になっているのですが、それを「display: block;」によって上書きすることで縦並びにしています。

このパターンは非常によく使うのでぜひ覚えておいてください！

IE9では注意！

先ほどのtableをSPレイアウトで縦並びにするテクニックですが、IE9では対策が必要です。

IE9だとdisplay: blockだけでは足りず、下のようにスタイルを与える必要があります。

.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
  float: left;
  width: 100%;
}

IE9ではなぜか「float」を設定しないとblock要素として認識されず、さらにfloatだけだと幅が短くなってしまうので「width: 100%」を指定する必要があります。

以上

レスポンシブはマークアップエンジニアだけでなく、デザイン専門のデザイナーでも基本的な仕組みとパターンは知っておかないとコーディングで実現不可能なデザインが出来上がってしまいます。
苦手意識を持っている人が多いようですが、実際にやってみるとそれほど難しいものでもないので、一度是非手を動かして挑戦してみて下さい！

以上、たにっぱでした〜

もう正直何言ってんだお前的なタイトルですが、要はこういうパターンです。

こんな風に「デバイステキスト使って好きなテキスト入れれるようにした上で、左揃えのままセンタリングしたい」なんて状況結構あります。

自分がマークアップ初心者の頃は、こんなレイアウトは出来ないものと勝手に思ってたのですが、実は簡単にできちゃいます。

どうするかというと、inline-blockの特性を活かしてやっちゃいます。

実例

実際のソースコードは以下のとおりです。

ソースコード

<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #cccccc;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
</style>
<div class="wrapper">
  <p class="txt">
    ダミーテキスト<br>
    ダミー
  </p>
</div>
<!-- /.wrapper -->
<div class="wrapper" style="margin-top: 10px;">
  <p class="txt">
    ダミーテキストダミー<br>
    ダミー
  </p>
</div>
<!-- /.wrapper -->

表示

説明

上下のパターンの違いはテキストの長さが違う点だけなのですが、しっかり中央に配置してくれてますね？

肝は、テキストを入れているタグに「display: inline-block」を指定している所です。

CSSの display: inline、display: block、display: inline-block をマスターしよう！でも説明していますが、inline-blockはtext-alignの影響を受けるので、親要素にtext-align:centerを指定することで中央寄せにすることが出来ます。

ただ、そのままだとテキストも中央寄せになってしまいますので、親要素にはcenterを指定しつつ、子要素である「<p class=”txt”>」にtext-align:leftを指定することで、「テキストは左揃えにしつつ、テキスト全体としては中央に配置する」といったレイアウトにしている形です。

以上

今回のパターンも保守・運用のことを考えなければ、デバイステキストじゃなく画像でやってしまって解決する、なんてことも場合によってはありですが、それだとテキストを変える度に画像を作る必要が出てきて非常に面倒ですよね？

マークアップをする際は、デザイナの作成したカンプを再現しつつ、出来るだけ保守性を上げることを意識しないといけないですね。

以上、たにっぱでした〜

おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)ﾉ

CSS3とかで写真に装飾つけるシリーズも第三回となりました。
今回はhover時のエフェクトを付けてみようとおもいます。

CSSで作るので、例のごとくレガシーブラウザ(IEとかIEとかIEのIE9以前)には未対応なのですが・・・
使う場面があることを信じて、作っていくのです。

それでは今回もブランケットに包まるさんにご登場していただきましょう。
widthは300pxにしてあり、box-sizingと枠を追加しています。
枠は今回paddingではなく、エフェクトの影響を避けるためborderで白枠をとっています。
境界線はbox-shadowで作っています。
また、今回はエフェクトがはみ出ないようoverflow:hidden;をかけています。

<style>
	  .img01 {
      position:relative;
      overflow:hidden;/* はみ出し防止 */
	    width:300px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
    .waku01{
      border:7px solid #fff;
      box-shadow: 0 0 1px 0 #aaa; /* 枠の外の境界線 */
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
</style>
<p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

では、まずは簡単にマスクをかけたようなエフェクトを作ってみます。

<style>
	  .anime01:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#000;
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;/* all(変化させたい要素) 0.3s(変化する早さ) linear(変化の動き:linearは一定の早さ) */
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime01:hover:before {
      opacity:0.3;
    }
</style>
<p class="img01 waku01 anime01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

次にふんわりとフォーカスしたようなエフェクトを作ってみます。

<style>
	  .anime02:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime02:hover:before {
      opacity:1;
    }
</style>
<p class="img01 waku01 anime02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

ベタのマスクを乗っけるよりも、こっちのほうがおしゃれにみえますね。

次にちょっと余計な動きを入れてみました。
目にうるさいのでおすすめはしませんが、このような動きも付けることができます。

中央で回転

<style>
	  .anime03:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      border-radius:100%;
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotate(180deg) scale(0);/* 要素を回転表示させる scale：拡大縮小値 */
      transform: rotate(180deg) scale(0);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime03:hover:before {
      border-radius:0%;
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

横にくるっとする

<style>
	  .anime04:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateY(180deg);/* Y軸方向へ回転 */
      transform: rotateY(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime04:hover:before {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime04"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

縦もできちゃう

<style>
	  .anime05:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateX(180deg);/* X軸方向へ回転 */
      transform: rotateX(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime05:hover:before {
      -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

外からふわっと

<style>
	  .anime06:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: scale(5);
      transform: scale(5);
      
      -webkit-transition:all .4s ease;
      transition:all .4s ease;
      
      -webkit-transform: scale(1);
      transform: scale(1);

	  }
    .anime06:hover:before {
      -webkit-transform: scale(1);
      transform: scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

このように、擬似要素にtransitionやtransformを加えることで色々な動きを作ることができます。
行き過ぎたエフェクトは目にうるさく、ごちゃっとした印象になってしまいますが、さり気なくつけると、おっ！おしゃれっ！と言った感じになりますね。
ポイントはやり過ぎない、これです(´・ω・｀)ﾀﾞﾒﾖｰﾀﾞﾒﾀﾞﾒ
ほとんどがtransitionとtransformの使い方のようになりましたが、hover時のエフェクトのお話でした(´・ω・｀)ﾉｼ

リコピン♪リコピン♪(*´ω｀*)

今回もCSSで装飾するよ！
前回→【CSS3】で写真に色々装飾を加えてみた(枠・写真加工編)【IE9以前は非推奨】

さて、今回はbox-shadowを使って色々作ってみようと思います。
box-shadowが実装されて、今までわざわざ画像にしたり、どこできったらいいのかわからなかったり、予定より画像がでかくなってこまっていた
あのドロップシャドウをCSSで表現できるようになりました。

これで画像の量も減るし、楽になりますね！

前回でも少し使用しましたが、今回は影の形を変えることで写真などの浮き表現を変えたりしていきます。

記述がすこし面倒ですが、サムネイルなどに使う場合一つ作ってしまえば増えても増えても同じ効果をつけれるので便利です。
それでは、作っていきましょう！

下準備

今回も前回と同じ写真をつかいます。

前回と同様に可変仕様にして、今回widthを半分にして小さくし、枠も付けてあげます。。

  <style>
	  .img01 {
	    width:250px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
    .waku01{
	    padding:7px;
	    background:#fff;
      border:1px solid #ccc;
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
	</style>
  <p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

それでは、基本の影をつけてみます

box-shadowを使う

box-shadowの使い方をおさらいしておきます。

例）

box-shadow:10px 10px 10px 10px rgba(0,0,0,0.2)
box-shadow:y方向のオフセット x方向のオフセット ぼかし 広がり 色

という感じです。※現在最新のモダンブラウザはベンダープレフィックスいらなくなってます

では、実際につけてみます。

  <style>
    .shadow01 {
      box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
    }
  </style>
  <p class="img01 waku01 shadow01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

マイナスの値を与えることで逆などもできます

<style>
  .shadow02 {
    box-shadow:-2px -2px 4px 0 rgba(0,0,0,0.2);
  }
</style>
<p class="img01 waku01 shadow02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

<style>
  .shadow03 {
    box-shadow:2px -2px 4px 0 rgba(0,0,0,0.2);
  }
</style>
<p class="img01 waku01 shadow03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

こんなかんじで四方に影を落とすことができます。
「,」カンマを使うことで、いくつも重ねてつかえます。
例えば、ボタンを作るときなどによく重ねて使います。（imgがあると内側の影が見えないのでDIVでボタンっぽいのをつくってみます。）

<style>
  .box1 {
    width:200px;
    height:40px;
    margin:0 auto;
    background:#209FFB;
  }
  .shadow04 {
    box-shadow:inset -2px -2px 4px 0 rgba(0,0,0,0.2),inset 2px 2px 2px 0 rgba(255,255,255,1);
  }/* insetは内側に影を付けたいときに使います。 */
</style>
<div class="box1 shadow04"></div>

少しそれましたが、これでbox-shadowの基本は終わりです。
これを駆使してシャドウやハイライトを表現していきます。

それでは本題のすこし変わった影を作っていきます。

擬似要素を使って色々な影を表現してみる

今回も擬似要素:before :afterを使います。

まずは、定番の左右に影をつけて、浮いたように見せるあれです。

<style>
  .shadow05 {
    position:relative;
  }
  .shadow05:before,
  .shadow05:after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  .shadow05:after {
    right:3px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform:rotate(3deg);
  }
</style>
<p class="img01 waku01 shadow05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

よく見るやつですね♪
これを作れるようになれば、あとは全部応用です。
左だけ右だけもbeforeだけにして、右だけの場合はafterのpositionとtransformをbeforeに移すだけです。

<style>
  .shadow05_1 {
    position:relative;
  }
  .shadow05_1:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
</style>
<p class="img01 waku01 shadow05_1"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

<style>
  .shadow05_2 {
    position:relative;
  }
  .shadow05_2:before {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    z-index: -1;
    width: 50%;
    height: 5px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
</style>
<p class="img01 waku01 shadow05_2"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

付箋などの表現にも使えそうですね(*´ω｀*)

縦方向にアーチしたような影

<style>
  .shadow06 {
    position: relative;
    box-shadow: inset 0px 7px 16px -4px rgba(0,0,0,0.1),
                inset 0 -7px 16px -4px rgba(0,0,0,0.1);
  }
  .shadow06:before,
  .shadow06:after {
    content: "";
    position: absolute;
    bottom: 17%;
    left: 11px;
    z-index: -1;
    width: 4%;
    height: 50%;
    box-shadow: 1px 0px 10px 0 rgba(0,0,0,1);
    -webkit-transform: skew(4deg,95deg);
    -moz-transform: skew(4deg,95deg);
    -ms-transform: skew(4deg,95deg);
    transform: skew(4deg,95deg);
  }
  .shadow06:after {
    right:14px;
    left:auto;
  }
</style>
<p class="img01 waku01 shadow06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

ちょっと雑ですが、このようなこともできます♪

他にも意外とつくろうと思えばいくらでも作れたりします。
基本は擬似要素を使うことですね。
擬似要素便利♪

最後にbox-shadowはborderとしても使えます。
普通のborderよりもbox-shadowで作ったほうが雰囲気よかったりもするので使ってみるのも良いかと思います。

すこしぼかしが効いてリッチな雰囲気とか出そうです♪
今回は影として使いましたが、光彩としてもつかえます。
工夫次第でいろんな表現が可能ですね。

是非、色々と試してみてください。

それでは！良きコーディングライフを～(・ω<)ﾉｼ