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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

サンプルソースの表示例

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

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

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

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

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

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

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

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

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます