関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
ホームページ作成
【ホームページ作成】CSS段組1：スタイルシートだけで段組を作る方法
レイアウトの作成・調整 (HTML,CSS)
更新日：2004年11月12日
CSS段組1：スタイルシートだけで段組を作る方法
スタイルシートで「段組(マルチカラム)」を作ってみましょう。「段組」というとtableタグを駆使して作るものだと思っていませんか？そんな力業を使わなくてもHTMLとCSSでスマートに実現できるのです。
サンプルソースの表示例
各ページでご紹介したサンプルソースの表示例です。
段組とブロックの範囲が分かりやすいように、各ブロックに枠線を加えています。
※太い外枠を「ウインドウの広さ」、細い点線を「各ブロックの範囲」と考えて下さい。
コンテンツA
（左側80％）
（左側80％）
コンテンツB
（残りのスペース）
（残りのスペース）
コンテンツA
15%
15%
コンテンツB
68%
68%
コンテンツC
（残り）
（残り）
コンテンツA
150px
150px
コンテンツC
150px
150px
コンテンツB
（残り）
（残り）
コンテンツA
コンテンツB
コンテンツC
（この上で回り込みが解除されています。）
（この上で回り込みが解除されています。）
この記事の担当ガイド
関連キーワード[PR]
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます