Web Tips：CSS3

スライドメニューのプラグインを使わない実装方法

メニューボタンをタップすると横からメニューが出てくるスライドメニューは、画面サイズの小さいスマートフォンに適したメニューです。スライドメニューをプラグインを使わないで実装する方法を解説します。

CSS3 animationプロパティでアニメーションを実装する

CSS3のanimationプロパティは、transitionプロパティに比べて複雑なアニメーションを実装するのに適しています。リピート再生や、キーフレームを定義することによりアニメーション中の動作を細かく設定することが可能です。

CSS3 transitionプロパティでアニメーションを実装する

CSS3のtransitionプロパティは、要素に設定したCSSプロパティが古い状態から新しい状態へ変化する際の動作を規定します。変化にかかる時間や途中段階での速度を指定することにより、アニメーション効果を実現します。

CSS3の変形機能「transformプロパティ」の使い方

CSS3では要素の変形処理を行う「transformプロパティ」が追加されました。処理方法としては、拡大縮小、回転、移動、ゆがみの４つです。イベント発生時やアニメーションの中でこのプロパティを使うと、動きのある効果的なWebページを作成できます。

CSSだけで背景パターンを作成する

CSS3で追加された線形グラデーション「linear-gradient」と円形グラデーション「radial-gradient」を使用すれば、さまざまなパターンを表現することが可能です。
これに background-sizeプロパティを組み合わせれば、CSSだけで背景画像を作成することができます。

CSS3 線形グラデーションの記述方法

CSS3ではグラデーションがサポートされましたが、これまでブラウザごとに多くの書式を併記する必要がありました。特によく使う線形グラデーションについて、現状どのように記述すればよいのかまとめてみます。

box-sizing: border-box を指定しレイアウト崩れを防止する

box-sizingプロパティには、CSS3で "border-box" という値が追加されました。この値を指定すると、widthはpaddingとborderを加えた要素全体の幅として計算されます。これにより、floatで要素を並べたときのレイアウト崩れ防止につながります。

マルチカラムレイアウトで自由度の高い段組みを構成する

CSS3の仕様であるマルチカラムレイアウトを使えば、新聞記事のような多段構成の段組みを簡単に実装することができます。各段の高さは自動で揃えられ、段数や段の幅は自由自在に設定可能です。レスポンシブWebデザインなどで特に効果を発揮する手法です。

フレキシブルボックス(Flexbox)を使い柔軟なレイアウトを組む

CSS3の仕様であるフレキシブルボックスを使えば、柔軟なボックスレイアウトを組むことができます。親要素の横幅一杯に伸縮しながら複数の項目が均等配置するようにできますので、スマートフォンサイトやレスポンシブWebデザインの実装に便利な機能です。

Fireworks CS6でCSS3グラデーションボタンを作成する

Fireworks CS6では、作成したボタンのCSS3コードを自動で出力することができます。この機能により、グラデーションボタンも画像を使わず、CSSとテキストだけで簡単に表示することができます。

box-shadowプロパティを使って複数の境界線を設定する

境界線をCSSで設定するには、borderプロパティを使う方法があります。CSS3にはボーダーラインに影をつけるbox-shadowというプロパティがありますが、この影は何重にも設定することができます。つまり、box-shadowを使えば二重にも、三重にも境界線をつけることができます。

マウスオーバーした時、CSS3で画像を半透明にする方法

画像の上にマウスカーソルをのせた時に、リンクを示すため半透明にすることがあります。
マウスオーバー用の別画像を用意しなくても、img要素にCSS3のopacityプロパティを指定することで半透明は実現できます。