Web Tips：レスポンシブWebデザイン

表を横にスクロール可能なレスポンシブテーブルを実装する

スクリーンサイズが小さいスマートフォン画面で表組みする際は、はみ出した部分を横にスクロール可能なレスポンシブテーブルという手法を使います。JavaScriptで作った専用のライブラリもありますが、CSS設定だけで簡単に実装する方法を解説します。

Webページに サイズ可変の YouTube 動画を埋め込む

Webサイトやブログページで動画を埋め込むことは一般的になっていますが、スクリーンサイズに合わせて動画サイズが可変になる埋め込み方法を YouTube を例にとり解説します。

Fluid Image 対応のフリックで動作するスライドショーを実装する

スマートフォンサイトでよく採用されているフリックで動作するスライドショーですが、レスポンシブWebデザインや端末の向きにかかわらず対応するため、画像がスクリーンサイズの100%に伸縮するよう実装してみます。

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

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

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

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

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

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

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

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

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

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