疑似要素でグラデーションをつける

疑似要素でグラデーションをつける方法を紹介します。擬似要素で白のグラデーションを作って、それを背景色に重ねることでグラデーションの効果をつけています。

HTML

補足

• サンプルでは button クラスで span 要素をブロック化しています。
• 背景色は col1 ～ col4 クラスで付けています。
• 白のグラデーションは gradient クラスで付けています。サンプルでは左上から右下方向へグラデーションを付けています。

CSS

補足

• グラデーションは gradient クラスの after 疑似要素で付けています。
• after 要素をブロック化し、gradient クラスの要素と同じ大きさにして、重ねて表示しています。
• 背景色は col1 ～ col4 クラスで付けています。

サンプル

「疑似要素でグラデーションをつける」のサンプル

関連記事

• 疑似要素と CSS で立体感のあるボタンのデザイン

メニューを左からスライド・イン

メニューを画面の左からスライド・インさせる方法を紹介します。

HTML

補足

• show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。

jQuery

補足

• show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
• リサイズ（または回転）時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。

CSS

補足

• メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
• スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。

サンプル

「メニューを左からスライド・イン」のサンプル

CSS スプライトでアイコンを表示

CSS スプライト画像を使ってアイコンを表示する方法を紹介します。Retina ディスプレイでアイコンがボケないよう、倍の大きさのアイコンを縮小表示しています。

HTML

補足

• span 要素の data-icon-pos 属性でアイコンを表示する位置を指定します。
• 同じく、span 要素の data-icon 属性でアイコンの種類を指定します。
• span 要素は CSS でブロック要素化しています。

CSS

補足

• アイコンは span 要素の before 疑似要素の背景として表示しています。
• このサンプルでは 48px × 48px のアイコンが 24px × 24px で表示されるようにしています。
• data-icon-pos 属性で指定される top、 left、 botton、right 毎に、それぞれの余白や疑似要素の表示位置を指定しています。
• data-icon 属性では表示するアイコンの CSS スプライト画像上の位置を指定しています（ background-size で実際の半分の大きさを指定しているので、ここで指定する位置座標も半分になる）。
• このサンプルで使用する CSS スプライト画像は 192px × 192px の PNG ファイルです。
• Retina 対応とするため、CSS スプライト画像は、下のような大きさレイアウトで作成しています（実際の画像は透明の背景に白地のアイコンのみ。それ以外は説明用です）。

サンプル

「CSS スプライトでアイコンを表示」のサンプル

関連記事

• ブロック要素に画像でアイコンを表示

ブロック要素を吹き出し風にする

ブロック要素に吹き出し風の三角を指定した位置に付ける方法について紹介します。

HTML

補足

• ブロック要素に吹き出しの位置を指定するクラス（ balloon-bottom-right など）を付けます（このサンプルでは span 要素をブロック化しています）。

CSS

補足

• 右下、左下、上、下、左、右用の吹き出しを定義しています。
• 吹き出しの三角の部分は after 擬似要素で表示しています。

サンプル

「ブロック要素を吹き出し風にする」のサンプル

ブロック要素の左右端に括弧を表示

ブロック要素の左右端に括弧を表示する方法を紹介します（レスポンシブ対応）。

HTML

補足

• 括弧を付けたいブロック要素（サンプルでは blockquote ）に bracket クラスを付けます。丸括弧にしたい場合は、radius クラスも合わせてつけます。

CSS

補足

• 括弧の色や大きさ、余白などを設定しています。

サンプル

「ブロック要素の左右端に括弧を表示」のサンプル

関連記事

• ブロック要素の左上と右下に装飾文字を表示

ブロック要素にアイコンバッジを表示

ブロック要素にアイコンバッジを表示する方法を紹介します。

HTML

補足

• データ属性（data-badge-top-left, data-badge-top-right, data-badge-bottom-left, data-badge-botton-right）で、バッジの位置と表示する文字を指定します。

CSS

サンプル

「ブロック要素にアイコンバッジを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ブロック要素に画像でアイコンを表示

ブロック要素に画像を使ってアイコンを表示する方法を紹介します。アイコンは疑似要素の背景画像で表示しています。

HTML

補足

• アイコンの位置を data 属性（data-icon-pos）で指定します。
• 表示するアイコンの種類は data 属性（data-icon）で指定します。

CSS

補足

• アイコンは疑似要素の背景画像で表示しています。
• サンプルではサイズが 64px × 64px の画像を 24px × 24px のブロック要素の背景として表示しています。
• アイコンのサイズを変更する時は span 要素の padding や疑似要素の表示位置を調整する必要があります。

サンプル

「ブロック要素に画像でアイコンを表示」のサンプル

関連記事

• ブロック要素にテキストでアイコンを表示

ブロック要素にテキストでアイコンを表示

ブロック要素にテキストでアイコンを上下左右の指定位置に表示する方法を紹介します。アイコンは疑似要素で表示します。

HTML

補足

• span 要素にデータ属性（data-icon-left, data-icon-right, data-icon-top, data-icon-bottom）を付けてアイコンの表示位置と表示するテキストを指定します（span 要素はCSS でブロック要素化しています）。

CSS

サンプル

「ブロック要素にテキストでアイコンを表示」のサンプル

関連記事

• 文字列中にテキストでアイコンを表示