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

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

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

jQuery

補足

• スクロール・イベント発生時に、その方向を調べ、メニューを表示・非表示しています。

CSS

補足

• メニューをウィンドウ上端に固定表示されるようスタイルを設定しています。

サンプル

「スクロール方向に応じてメニューを表示・非表示」のサンプル

要素を点滅させる

要素を点滅させる方法を紹介します。

HTML

補足

• 点滅させる要素（サンプルでは em ）に blink クラスを付けます。
• サンプルでは文字列を点滅させていますが、画像も同じ方法で出来ます。

CSS

補足

• blink クラスのアニメーションを設定しています。

サンプル

「要素を点滅させる」のサンプル

画面の固定位置にボタンを表示

画面の固定位置にボタンを表示する方法を紹介します。

HTML

補足

• 固定表示するボタン（span要素）に navi-button クラスを付けます。
• 同時に、表示する位置を指定するクラス（ top-left 等）も付けます。

CSS

補足

• navi-button クラスに position: fixed を指定し、固定位置に表示されるようにしています。
• navi-button クラスで span 要素を inline-block 化し、ボタンの大きさや色などを指定しています。
• navi-button クラス内の em 要素がボタンの中央に表示されるようスタイルを指定しています。
• top-left ～ middle-center クラスで、ボタンの表示位置を定義しています。

サンプル

「画面の固定位置にボタンを表示」のサンプル