今回は、掲示板での質問の中から、もう少し具体的に、ソースやブラウザでの表示例などを付けて説明します。


以前、「トップナビゲーションの設置」で紹介したナビゲーションのドロップダウンメニュー化です。

ドロップダウンメニューとは、メニューのタイトル部分にマウスを重ねたときに、そこから新たな選択項目の一覧が垂れ幕のように表示されるメニューのことで、「プルダウンメニュー」とも呼びます。

CSSとHTMLを編集できるブログでしたら、ドロップダウンメニューを設置することができますので、是非、参考にしてください。





では、「ドロップダウンメニューの設置方法」について説明します。
ここでは、javascript の onmouseover属性とonmouseout属性を用いて作成し、メニュー項目にマウスを重ねたときにクラス名が切り替わる方法を使用しています。

[1] HTMLの編集

HTMLテンプレートを編集し、ドロップダウンメニューを挿入したい箇所に、下記のようなメニューのリストを作成します。

・リンク先URLとメニュータイトルは、適切な文字に変更してください。

[2] CSSの編集

スタイルシートに、下記のような記述を追加します。（説明文は不要）
なお、下記は、サンプルの記述例ですので、適時変更してください。

/* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:100px; } #navi { position: absolute; top: 10px; left: 10px; width: 306px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; }

【ナビゲーションボックス】 ←配置方法（相対位置） ←重なりの順序（最上位） ←横幅 ←高さ 【ナビゲーション全体】 ←配置方法（絶対位置） ←上からの配置位置 ←左からの配置位置 ←横幅 【メニュー全体】 ←マージン（全方向 0） ←パディング（全方向 0） ←リストマーカー（非表示） 【メニュー】 ←文字色 ←配置（左寄せ） ←横幅 ←マージン（全方向 0） 【メニュー（通常時）】 ←文字サイズ ←文字色 ←要素の表示形式（ブロック） ←横幅 ←パディング ←文字の位置揃え ←文字の太さ（太字） ←テキストの下線等（なし） ←背景色 【メニュー（マウスオーバー）】 ←文字色 ←背景色 【サブメニュー全体】 ←背景色 【サブメニュー】 ←配置（なし） 【サブメニュー（通常時）】 ←文字色 ←背景色 ←文字サイズ ←文字の太さ（ノーマル） ←パディング ←枠線 【サブメニュー（マウスオーバー）】 ←文字色 ←背景色 【メニュー】 ←要素の表示形式（なし） 【サブメニュー】 ←要素の表示形式（ブロック） 【メニュー】 ←枠線 【サブメニュー】 ←枠線

以上で、ドロップダウンメニューの設置は完了です。あとは、ブログデザインに応じて、配色や幅などを調整してくださいね。

1クリックの応援で、質問に丁寧にお答えします＾＾

前回、ブラウザの解釈対策（Windows版IE 5.x編）について説明しましたが、今回は、最近、ユーザーシェアを伸ばしているOperaの対策方法について説明します。


Operaの場合、モダンブラウザ（IE 6.x）と同じ解釈方法をしますが、IE 5.5と同じく、voice-familyプロパティを上手く読み込むことができないバグを持っています。

つまり、前回の対策を行った場合、IE 5.5用の間違ったwidthプロパティの数値を読み込んでしまうため、Operaでのレイアウトが崩れていまう恐れがあります。

そこで、#sampleのスタイルの下に次のスタイルを追加します。

＜CSS の記述例＞

#sample { 　　margin: 10px; 　　padding: 10px; 　　border: 2px solid #000; /* 古いIE用の幅（コンテンツ幅＋ボーダー幅＋左右パディングの幅） */ 　　width: 400px; /* ボックスモデルハック */ 　　voice-family : "\"}\""; 　　voice-family : inherit; /* モダンブラウザ用のコンテンツ幅 */ 　　width: 376px; } html>body #sample { 　　width : 376px; /* Opera用のコンテンツ幅 */ }

セレクタ部分（html>body）に子供セレクタ（>）を使用します。この子供セレクタは、CSS2でサポートされているもので、CSS2を理解できない古いブラウザ（IE5.5等）では読み込むことができません。

一方、Operaでは、子供セレクタを理解することができますので、そのセレクタ内にモダンブラウザ用の数値を記述することで、Opera対策をすることができます。

参考になりましたら、応援お願いします。　

前回、古いブラウザ（Windows版IE4～5.x 、Mac版IE4.x）とモダンブラウザ （Windows版IE6.x、Mac版IE5.x）では、CSSの解釈方法が異なることを説明しました。

この問題は、現在でもWindows版IE 5.5 などを利用されている方がいるため、あまり無視することができません。

そこで、今回は、 ブラウザによる解釈の違いを回避する方法（Windows版IE 5.x編）について説明します。


まずは、Windows版IE 5.x対策として、最も有名な回避方法を紹介します。

■ Box Model Hack（ボックスモデルハック）

この回避方法は、Tantek Celik氏が見つけ出したもので、Windows版IE 5.xにあるCSSのバグを利用したものです。

具体的には、IE 5.xでは理解することができないCSSプロパティ（voice-family）を記述し、その前後に、IE 5.x用、6.x用の数値を記述する方法です。

＜CSS の記述例＞

#sample { 　　margin: 10px; 　　padding: 10px; 　　border: 2px solid #000; /* 古いIE用の幅（コンテンツ幅＋ボーダー幅＋左右パディングの幅） */ 　　width: 400px; /* ボックスモデルハック */ 　　voice-family : "\"}\""; 　　voice-family : inherit; /* モダンブラウザ用のコンテンツ幅 */ 　　width: 376px; }

IE 5.xでは、voice-familyプロパティを上手く読み込むことができないため、途中で#sampleのスタイルの読み込みを終了してしまうというバグがあります。

このバグを利用することで、IE 5.xでは、voice-familyプロパティの直前に記述されたwidthの数値までを読み込みます。

モダンブラウザでは、IE 5.x用のwidthの数値を読み込んでも、voice-familyプロパティの下にあるwidthの数値を読み直しますので、新旧のブラウザで正しい数値を読み込むことができます。

[参考記事] Box ModelHack
[参考記事] Box ModelHack（邦訳）

[次の講義へ] ブラウザの解釈対策（Opera編）

参考になりましたら、応援お願いします。　

余白や枠線を設定した際に、レイアウトが崩れたり、サイドバーが下に落ちたりする主な原因は、CSSのwidth（横幅）の設定に問題があります。

ですので、divタグなどを使用して、CSSによるレイアウトする場合は、CSSがどのようにwidth（横幅）を解釈しているのかを理解しておく必要があります。

CSSによるwidth（横幅）の解釈方法

そこで、突然ですが、いきなり問題を出します＾＾
一度、解いてみてください。

■ 問題

Q．下記のようなスタイル（ボックスモデル）があります。
　　「#sample」 の全体の横幅は、何ピクセルでしょう？

＜#sample のイメージ＞

← 全体の横幅は？ →

余白（margin）= 10px 詰め（padding）= 10px サンプル 枠線（border）= 2px

＜CSS の記述＞

#sample { 　　width: 400px; 　　margin: 10px; 　　padding: 10px; 　　border: 2px solid #000; }

＜HTML の記述＞

<div id="sample">サンプル</div>

■ 解答

正解は、444px です。

横幅（width）が400pxと記述されていますので、ボックス全体（コンテンツ、余白、詰め、枠線）の横幅が400pxと思われるかもしれませんが、CSSはそのように解釈してくれません。

全体の横幅は、
「コンテンツ、余白（左、右）、詰め（左、右）、枠線（左、右）」
を足した数値と解釈されます。

つまり、
「コンテンツ+余白左+余白右+詰め左+詰め右+枠線左+枠線右 = 全体の横幅」
という計算式になります。

ですので、上記の例では、
「400（コンテンツ）+10（余白左）+10（余白右）+10（詰め左）+10（詰め右）+2（枠線左）+2（枠線右）= 444px」
ということになります。

ブラウザによる解釈の違い

CSSによるボックス全体の横幅の求め方について説明しましたが、気を付けなければならない問題があります。
それは、古いブラウザでは、これまで説明した解釈方法とは違う解釈をしてしまうということです。

ここでいう古いブラウザとは、Windows版IE4～5.x 、Mac版IE4.xです。
これらのブラウザは、以下のように解釈します。

widthは、
「コンテンツ、詰め（左、右）、枠線（左、右）」
を足した数値と解釈されます。

つまり、widthを400pxとした場合は、枠線と詰めの数値を引くとコンテンツエリアの横幅になり、計算式は。
「横幅-詰め左-詰め右-枠線左-枠線右 = コンテンツの横幅」
になります。

ですので、上記の例では、
「400（横幅）-10（詰め左）-10（詰め右）-2（枠線左）-2（枠線右）= 376px（コンテンツの横幅）」
ということになります。

全体の横幅は、
「横幅、余白（左、右）」
を足した数値と解釈されます。

「横幅+余白左+余白右 = 全体の横幅」

ですので、上記の例では、
「400（横幅）+10（余白左）+10（余白右）
=420px」
ということになります。

このように、同じ記述でもブラウザによっては、下の表のように、横幅の解釈が異なってきますので、レイアウトが崩れてしまったりする問題が生じたりします。

ブラウザ	ボックス全体	コンテンツ幅
モダンブラウザ （Windows版IE6.x、 　Mac版IE5.x）	444px	400px
古いブラウザ （Windows版IE4～5.x、 　Mac版IE4.x）	420px	376px

このようなブラウザによる解釈の違いを回避する方法については、次回説明します。

[次の講義へ] ブラウザの解釈対策（（Windows IE 5.x編）

参考になりましたら、応援お願いします。　

それぞれのレイアウト幅を決めたら、余白を設定し、文字が読みやすいようにデザインしていきます。

3カラムレイアウトのカスタマイズ方法 （STEP 3）

■ STEP3　3カラムレイアウトの余白の調整

■ padding の指定

前回までに作成したレイアウトを、下図のように、左サイド・メイン・右サイドの枠内に10pxの余白を設けて、コンテンツ領域が表示されるようにするには、paddingで調整することができます。

バナー部分 左サイド メイン部分 右サイド 　フッター部分

＜CSS の記述例＞

#container { width: 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 420px; padding: 10px; } #left { float: left; width : 160px; padding: 10px; } #right { float: right; width : 160px; padding: 10px; } #footer { width : 800px; }

※赤色文字が、編集箇所です。

■ margin の指定

前回までに作成したレイアウトを、下図のように、表示領域枠と各レイアウト枠との間に10pxの余白を設けて表示するには、marginで調整することができます。

バナー部分 左サイド メイン部分 右サイド 　フッター部分

＜CSS の記述例＞

#container { width: 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 420px; margin: 10px; } #left { float: left; width : 160px; margin: 10px; } #right { float: right; width : 160px; margin 10px; } #footer { width : 800px; }

※赤色文字が、編集箇所です。

margin（マージン） と padding（パディング）の違い

margin（マージン） と padding（パディング）で余白を指定することができますが、その違いについて説明します。

下図のように、文章や画像などが入るコンテンツ領域、それを囲む枠線（border）があるとします。
そのコンテンツ領域と枠線の間の幅が詰め（padding）で、枠線から外側の幅が余白（margin）です。

← 領域幅 →

余白（margin）= 10px 詰め（padding）= 10px コンテンツを表示する領域 枠線（border）= 2px

marginプロパティ と paddingプロパティ

今回使用した「margin」プロパティ と 「padding」プロパティの記述方法について、説明します。

■ marginプロパティ
marginプロパティは、領域枠とブロックタグんで括られた文章との間に余白を入れることができます。

＜HTML の記述例＞

<div id="left">左サイド部分</div>

＜CSS の記述例＞

#left {　margin: 0px 10px 20px 30px; }

■ 値の記述例
例：margin : 10px;
= 上：10px 下：10px 左：10px 右：10px

例：margin : 10px 5px;
= 上：10px 下：10px 左：5px 右：5px

例：margin : 0px 10px 20px 30px;
= 上：0px 右：10px 下：20px 左：30px

■ 指定方法

スタイル	意味
margin	4つの側をまとめて指定
margin-top	上側の指定
margin-bottom	下側の指定
margin-left	左側の指定
margin-right	右側の指定

■ paddingプロパティ
paddingプロパティは、ブロックタグで括られた文章を囲む枠とその文章との間に余白を入れることができます。

＜HTML の記述例＞

<div id="left">左サイド部分</div>

＜CSS の記述例＞

#left {　padding: 0px 10px 20px 30px; }

■ 値の記述例
例：padding : 10px;
= 上：10px 下：10px 左：10px 右：10px

例：padding : 10px 5px;
= 上：10px 下：10px 左：5px 右：5px

例：padding : 0px 10px 20px 30px;
= 上：0px 右：10px 下：20px 左：30px

■ 指定方法

スタイル	意味
padding	4つの側をまとめて指定
padding-top	上側の指定
padding-bottom	下側の指定
padding-left	左側の指定
padding-right	右側の指定

以上、余白の設定方法について説明しました。

しかし、余白を設定した際に、width（横幅）も調整しなければ、レイアウトが崩れたり、サイドバーが下に落ちたりすることがあります。
divタグなどを使用して、CSSによってレイアウトする場合、CSSがどのようにwidth（横幅）を解釈するのか理解しておく必要があります。

[関連記事] CSSによるwidth（横幅）の解釈方法

参考になりましたら、応援お願いします。　

レイアウト枠を作成したら、レイアウト全体の幅、左サイドの幅、メイン部分の幅、右サイドの幅をそれぞれ決めていきます。

3カラムレイアウトのカスタマイズ方法 （STEP 2）

■ STEP2　レイアウト枠の横幅を決める

まず、レイアウト全体（#container）の幅は、固定幅の場合、2カラムレイアウトより広げて700～800pxぐらいまでにします。800pxまでというのは、「800×600」の画面を利用しているユーザーを考慮しています。

■ 3カラムレイアウト（固定幅）の構造図

#container #banner #left #center #wrapper #right #footer

次に、右サイド枠（#right）の幅と、#wrapper（左サイドとメインを囲んだ枠）の幅を考えます。

右サイド枠（#right）の幅は、左サイド枠（#left）とメイン枠（#center）を囲んだ枠（#wrapper）の幅と足して、レイアウト全体（#container）の幅以下になるように設定します。もし２つの枠の幅を足した値がレイアウト全体幅を超えてしまうと収まりきらないため、レイアウトが崩れてしまいます。

左サイドとメインを囲む枠（#wrapper）の幅＋右サイド（#right）の幅 ≦ レイアウト全体（#container）の幅

例の場合は、下記のようになります。
620px（左サイドとメインを囲む枠） ＋180px（右サイド） ≦ 800px（レイアウト全体）

同様に、
左サイド枠（#left）の幅は、メイン枠（#center）の幅と足して、その２つを囲んだ枠（#wrapper）の幅を超えないようします。

左サイド（#left）の幅+ メイン（#center）の幅 ≦左サイドとメインを囲む枠（#wrapper）の幅

例の場合は、下記のようになります。
180px（左サイド）＋440px（メイン）≦620px（左サイドとメインを囲む枠）

＜CSS の記述例＞

#container { width: 800px; } #banner { width : 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 440px; } #left { float: left; width : 180px; } #right { float: right; width : 180px; } #footer { width : 800px; }

可変幅の場合は、「px」ではなく、「%」で指定すると、画面に応じてスクロールされます。基本的に固定幅の場合と同じ考え方で、あるレイアウト枠の中にあるすべてのレイアウト枠の幅を足した値が「100%」を超えないようにします。

以上、3カラム用レイアウト枠の幅の決め方を説明しました。
次回は、さらに余白などを調整する方法について説明します。

[次の講義へ] 余白を調整する

参考になりましたら、応援お願いします。　

では、具体的に「3カラム化」のカスタマイズ方法について、説明していきます。

3カラムレイアウトのカスタマイズ方法 （STEP 1）

■ STEP1　レイアウト枠（外枠、枠組）を作成する

まずは、HTMLとCSSを編集して、レイアウト枠（外枠、枠組）を作成します。

下図のように、レイアウト全体、バナー部分、左サイド部分、右サイド部分、メイン部分、フッター部分などに分割して、3カラム（3段組）レイアウトを作成します。

■ 3カラムレイアウト（固定幅）の構造図

#container #banner #left #center #wrapper #right #footer

＜HTML の記述例＞

<div id="container"> <div id="banner"> 　バナー部分 </div><!-- end banner -->  <div id="wrapper"> <div id="center"> 　メイン部分 </div><!-- end center --> <div id="left"> 　左サイド部分 </div><!-- end left --> </div><!-- end wrapper --> <div id="right"> 　右サイド部分 </div><!-- end right --> <br class="c-both" /> <div id="footer"> 　フッター部分 </div><!-- end footer --> </div><!-- end container -->

＜CSS の記述例＞

#container { width: 800px; } #banner { width : 800px; } #wrapper { float: left; width: 620px; } #center { float :right; width: 440px; } #left { float: left; width : 180px; } #right { float: right; width : 180px; } #footer { width : 800px; } .c-both { clear: both; }

上記の記述例のように編集すると、下図のように表示されます。
（但し、背景色と文字色は説明上イメージしやすいようにつけています）

■ 表示例

バナー部分 　左サイド 　メイン部分 　右サイド 　フッター部分

divタグとfloatプロパティを使用することで、3カラムレイアウトが作成されました。スタイルシート内で各ブロックの「widht」の数値を指定することで、横幅を変更することができます。

[次の講義へ] レイアウト枠の幅を決める

floatプロパティ と clearプロパティ

今回使用した「float」プロパティ と 「clear」プロパティについて、説明します。

■ floatプロパティ

floatプロパティは、指定した要素を左端、あるいは、右端に配置することができます。後に続く内容は、その反対側に回り込みます。

＜HTML の記述例＞

<div id="right">右サイド部分</div>

＜CSS の記述例＞

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

値	意味
left	左端に配置して、続く内容を右側に回り込ませる
right	右端に配置して、続く内容を左側に回り込ませる
none	左右への配置も回り込みの指定もしない（初期値）

■ clearプロパティ
clearプロパティは、floatプロパティで左寄せ、 あるいは、右寄せを指定された要素に対する回り込みを解除します。

＜HTML の記述例＞

<div id="right">右サイド部分</div> <br class="c-both" />

＜CSS の記述例＞

.c-both { clear: both; }

値	意味
left	左端に配置されたブロックに対する回り込みを解除
right	右端に配置されたブロックに対する回り込みを解除
both	左右両側の回り込みを解除
none	回り込みを解除しない（初期値）

[次の講義へ] レイアウト枠の幅を決める

参考になりましたら、応援お願いします。　

今回から数回に分けて、「ブログの3カラム化」方法について説明していきます。これから説明していく内容を理解すれば、実用的かどうかは別として4カラム化、5カラム化も可能です。

ブログを3カラム化するには

ブログを3カラム化するには、HTMLとCSSを編集することができるブログであれば、どのようなテンプレートを使用していても、3カラム（3段組）レイアウトにカスタマイズすることができます。

当講座では、まず最初に、どのようにしてテンプレートを3カラムにするのかを説明し、その後に具体的なカスタマイズ方法を説明していきます。
また、各ブログに対応した3カラム化方法についても説明していきますので、是非、チャレンジしてください。

■ 3カラム化の流れ

	ブログカスタマイズ講座～レイアウト編 ・ブログを3カラムにするには 　[STEP 1] レイアウト枠（外枠、枠組）の作成 　[STEP 2] レイアウト枠の幅を決める 　[STEP 3] 余白の調整 　[関連記事] ・CSSによるwidth（横幅）の解釈方法 ・ブラウザの解釈対策（Windows IE 5.x編） ・ブラウザの解釈対策（Opera編） 　ブログ別！カスタマイズ講座～レイアウト編 ・MovableType（3.2）の3カラム化 ・MovableType（3.17）の3カラム化 ・FC2ブログの3カラム化 ・ライブドアブログの3カラム化

3カラム（3段組）レイアウトとは？

3カラム（3段組）レイアウトとは、下図のように、左側に「サイドバー」、中央に「エントリー（記事）」、右側に「サイドバー」があるレイアウトです。

タイトル サイドメニュー エントリー（記事） サイドメニュー

カテゴリやコンテンツが多く、記事も膨大である場合には、とても有効なレイアウトです。

２カラムの場合、メニュー項目が多くなってくると、気づかれにくい項目や、下の方へスクロールしなければならない項目が生じてきますが、３カラムの場合、左右のサイドバーが利用できるため、注目させたい項目を左右の上の方へ配置できます。また、サイドスペースが広いため、広告スペースなどにも大いに利用できます。

ただし、エントリー幅が狭くなるため、どうしてもフォントが小さくなる傾向があります。

[関連記事]　レイアウトの決め方

3カラムレイアウトの構造図

実際にブログを3カラム化にする前に、どのようにしてブログテンプレートを3カラムにするのかを説明します。

ブログテンプレートを3カラムにするには、下図のように「2カラムレイアウトの中に、さらに2カラムレイアウトを作成する」ようなイメージで作成します。

#container #banner #left #center #wrapper #right

上図の例で説明しますと、#container（赤枠）という外枠の中に、#wrapper（ピンク枠）と、その右側にサイドメニューなどが入る#right（紺枠）の2段組を作成します。

そして、#wrapper（ピンク枠）の枠内に、#left（紫枠）と、その右側にエントリーなどが入る#center（茶枠）の2段組を作成すると、3カラムレイアウトの完成です。

それぞれの枠の配置方法は、スタイルシート内で「float」プロパティを使用することで実現します。

以上が、3カラムレイアウトの大まかな構造イメージと作成方法ですが、次回からは具体的なカスタマイズ方法について説明していきます。

[次の講義へ] レイアウト枠（外枠、枠組）を作成する

参考になりましたら、応援お願いします。