Web Tips：HTML/CSS

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

Fluid image でスクリーンサイズに合わせて画像サイズを変える

スマートフォンサイトやレスポンシブWebデザインでは、スクリーンサイズに合わせて画像の大きさを伸縮させなければなりません。そのようなときは Fluid image の手法を使い、コンテンツの比率を維持したまま画像サイズを表示環境に合わせます。

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

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

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

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

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

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

display: table を使って要素を表組みのように均等配置する

CSSのプロパティ「display: table」を指定すると、テーブル構造で要素が配置されます。floatプロパティのようなpaddingやboderの計算に気を使う必要もなく、すべてのカラムは高さが揃えられてカラム落ちしないレイアウトを実現できます。

display: inline-block を使って要素を横並びにする

CSSのプロパティ「display: inline-block」は要素を横並びにできる上、幅や高さを指定できる非常に便利な設定です。floatを使わなくても項目を横並びにできるため、メニューやナビゲーションで利用すると効果的です。

CSSだけで作成したアイコンを利用する

最近では画像を使わずにCSS3でボタンを表現することが一般的になってきました。アイコンもCSSだけで作られたものがたくさん公開されています。それらを利用し、HTML/CSSだけでWebページにアイコンを表示する方法を解説します。

階層構造を持つドロップダウンメニューの作成方法

Webサイトのグローバルナビゲーションでは、メニュー項目にマウスオーバーすると、サブメニューが下に展開するドロップダウン式階層メニューとなっていることがあります。
メニューをリストタグで記述しCSS設定で実装する方法を解説します。

入力ボックスの初期値として薄いグレーの文字を表示する

入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。

Web制作者がおさえておくべきmeta要素プロパティの種類

meta要素(メタタグ)は、ユーザーエージェント(ブラウザ、クローラーなど)がWebページを読み込んだ時の動作を決めるために使用されます。meta要素のプロパティ(設定項目)にはたくさんの種類がありますが、Web制作者として最低限知っておくべきものを解説します。

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

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

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

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

クリッカブルマップ(イメージマップ)で１枚の画像に複数リンクを設定する

クリッカブルマップ(イメージマップともいう)は、画像の一部分だけをリンクエリアにしたり、１枚の画像に複数のリンクエリアを設ける手法です。HTMLコードの記述だけで、四角形、円形、多角形と様々な形状のエリアを簡単に設定できます。