トップページ→サイト枠組みの作り方
サイト枠組みの作り方

サイト枠組みの作り方

このページでは一般的なCSSのサンプルとして、2カラム、3カラムの2構造を解説付きで紹 介します。

■2カラム

* { margin:0; padding:0; }

#boxA { background:#ffc; }

#boxB { background:#fcc; }

#boxC { background:#ccf; }

#boxD { background:#cfc; }

body { text-align:center; }

#container { width:700px; margin-left:auto; margin-right:auto; text-align:left; }

#boxB { width:500px; float:left; }

#boxC { width:200px; float:left; }

#boxD { width:100%; clear:left; }

こちらの2カラムは全体の構造を700pxとしてセンタリングして、メインコンテンツを 挿入するboxBにマージン500px、メニューを挿入するboxBをマージン200と割り当てて います。またヘッダ、フッタにそれぞれboxA、boxDを割り当てています。


■3カラム

* { margin:0; padding:0; }

#boxA { background:#ffc; }

#boxB { background:#fcc; }

#boxC { background:#ccf; }

#boxD { background:#cfc; }

#boxE { background:#fcf; }

body { text-align:center; }

#container { width:800px; margin-left:auto; margin-right:auto; text-align:left; }

#wrapper { width:620px; float:left; }

#boxD { width:180px; float:left; }

#boxE { width:100%; clear:left; }

#boxB { width:440px; float:right; }

#boxC { width:180px; float:right; }

こちらの3カラム構造は800pxとしてセンタリングして、メインコンテンツとなる boxBをはさむように、左にboxC、右にboxDを設置しています。
こちらも2カラム時と同様にヘッダ、フッタを適用してあり、それぞれboxA、boxD となります。

より複雑な構造となると、自分自身で構成する必要が出てきますが、インターネット 上に有志がサンプルを提供してくれてますのでそれを模範にしてみてもいいかも知れ ません。

CSSレイアウトの長所・短所

実際にCSSレイアウトを行う前に、その長所・短所に関して把握しておきましょう。当然ながら万能な手法ではなく、短所と言うべき点も存在します。

メニュー部分の作り方

最近のホームページのメニューでよく使用される、HTMLの「li」とCSSの「a:hover」要素を利用したJavaScriptなしのロールオーバーメニューに関して調べます。HTMLとCSSだけで構成されるので、軽いロールオーバーメニューが作成できます。

よくあるレイアウト崩れ

スタイルシート作成時によくありがちなスタイル・段組崩れについてのヒント集です。borderの指定やデフォルトスタイルのリセット、ブラウザのバージョン違いによるスタイル崩れについて主に記載しております。

[PR] 初心者もトレーダーもFXするなら「みんなのFX」で
FXならスプレッド原則固定の「みんなのFX」で口座開設受付中
[PR] ポイントでお小遣い稼ぐならi2iPoint
無料のサービスやネットショッピングなどでお得にお小遣い稼ぎが出来る!!
[PR] お得なアルミホイール修理はここで!
アルミホイール修理をして安全な走行をしよう
[PR] 横浜でペット火葬をご検討なら水鈴舎。
水鈴舎では訪問ペット火葬を東京・横浜を中心に24時間・365日応対でペットの火葬を真心を込めてお手伝いさせて頂きます。
[PR] 電力の自由化って?そんな疑問にエネチョイスが回答!
エネチョイスでは電力会社150社を比較して一括見積もりすることが可能!あなたに合った電力会社を見つけよう!