h2 右側ボックス説明
こちらはメインボックス内に設置したライトボックス部です。
スタイルシート内、#rightboxを参照してください。
現在#FDFEE0を指定して薄い黄色が背景色となっています。他にも高さや文字サイズ、padding(余白)、回り込みなどが指定されています。
通常はこちらのボックス内の情報は、左側にあるメニュー部分を読み込んだ後に読み込まれますが、CSSを使い、情報の受け渡しを反転させているので検索エンジンには、最初にこの右側のボックスが読み込まれます。
h3 記述を間違えないように！
サイトの読み込み順を逆転させる場合は、ｈタグの使用に気をつけてください。読み込み順を逆にしているので、こちらの右側ボックスから、数字の小さい順に定義してください。
こちらのボックス内に、<h1>〜</h4>程度を記述しておくと、使いやすいかと思われます。残りの<h5>・<h6>を左側のメニュー表記などに使ってもよいでしょう。
これは決まりではありません。皆さんの定義しやすい方法で良いです。
h4 途中に出てくるボックスもCSSで定義します。
途中で多くの場合、更にボックスが必要になるかと思いますが、サイズが小さいだけでCSSへの定義方法はほぼ同じです。
このボックスは、スタイルシート内、.catboxを参照してください。
現在#CCCCCCを指定してグレーが背景色となっています。他にも高さや文字サイズ、枠線などが指定されています。
このボックスは、<div id="rightbox">内の中央に配置されています。中央配置の指定は、左右のマージンをautoに設定します。
もちろん水平線↑にもCSSを指定することが可能です。
青色にドット指定を行った水平線です。
この様にテーブルを使わなくとも、レイアウトが可能ですし、ソースコードを見ていただいても分かるように、一切テーブルは使っていません。
その結果、コードが非常に綺麗で簡潔なのがお分かりいただけると思います。
また、この他にもCSSを使うと様々なことが可能になりますので、色々試してみて下さい。
メニューのタイトル
こちらはメインボックス内に設置したレフトボックス部です。スタイルシート内、#leftboxを参照してください。
現在#E3FDF1を指定して薄い緑色が背景色となっています。他にも文字サイズ、padding(余白)、回り込みなどが指定されています。
メニュータイトル部に<h5>を背景画像をつけて定義しています。
<h5></h5>を指定すると↓
背景が付いてきます。
TOPページ
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
上記の「タイトル」には、<h6>タグで指定を行っています。オレンジの枠ごと指定を行っているので、ソース内の記述はやはり、<h6>のみとなっています。
もちろん、こちら側にも複数boxを作ることが可能です。
ソース上には<div class="side_catbox">
と記述してあります。
同じ表示を行いたい場合も非常に簡単です。
同じコードを貼り付けるだけです。