ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

スタイルシートで段組を作るメリット(3ページ目)

スタイルシートを使って段組を作る方法には、HTMLの構成上、大きなメリットがあります。単にスタイルシートでデザインできるというだけではありません。ユーザを待たせず、クローラにも良いHTMLにできるのです。

サンプルソースの表示例

各ページでご紹介したサンプルソースの表示例です。
段組とブロックの範囲が分かりやすいように、各ブロックに枠線を加えています。
※太い外枠を「ウインドウの広さ」、細い点線を「各ブロックの範囲」と考えて下さい。

●1ページ目 最初のソースの表示:

メインのコンテンツ(左側) 80% ※こちらを先に記述できていますね。
端のコンテンツ(右側) 20%

●1ページ目 2番目ソースの表示:

メインのコンテンツ(右側) ※やはりこちらを先に記述できています。
端のコンテンツ(左側)

●2ページ目のソースの表示:

[B]メインのコンテンツ(中央(=右側の左側)) ※最も先に記述できています。
[C]右端のコンテンツ(右側(=右側の右側))
[A]左端のコンテンツ(左側)

← 記事1ページ目に戻る
← 記事2ページ目に戻る

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ