レイアウトの作成・調整 (HTML,CSS)

更新日:2004年11月19日

スタイルシートで段組を作るメリット

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

サンプルソースの表示例

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

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

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

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

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

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

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

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

1 2 3
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…

続きを読む

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

マネしたくなるアイデア住宅

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?