上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 カテゴリーの変数とHTMLを利用して、今度はニュースサイトなどのようにカテゴリーを横並びで表示させていきます。
 前回のカテゴリの詳細説明はこちら。
親子カテゴリの仕組みを解読する

 例えば、

カテゴリバー

 こんな感じのナビゲーションのことです。




カテゴリを出力させる変数を組む



 まずは、非常に単純に、親カテゴリのみを使って、普通に横並びさせるHTMLを組んでいきます。

【カテゴリを次々に表示する】
<!--category-->
<a href="<%category_link>"><%category_link></a>
<!--/category-->


 親カテゴリだけであれば、たったのこれだけでズラズラとカテゴリを並べて表示することが出来ます。
 表示されると、以下のようになります。

カテゴリ1カテゴリ2カテゴリ3カテゴリ4カテゴリ5


 これ、くっつき過ぎなので、例えば「<span>タグ」「<table>タグ」などで整形していくと…



spanで整形

 SPANタグの詳細は以下から確認出来ます。
スタイルシートで遊ぶ part.1(<span>タグ編)

【HTML】
<!--category-->
<span class="category_word"><a href="<%category_link>"><%category_link></a></span>
<!--/category-->
【CSS】
.category_word{
padding:2px 20px;
background:#fcc;
border-right:1px solid #000;
}
【表示結果】
カテゴリ1カテゴリ2カテゴリ3カテゴリ4カテゴリ5

 SPANタグは、ブロック要素ではありませんから、そのまま横にするりと並びます。

見本のタグでは「改行」を入れて見やすくしていますが、実際にHTMLを組むときは、改行を入れないように組んでください。

SPANタグで「padding」の高さを指定すると、他の要素からはみ出します。

 ただ、「SPANタグ」で組むときは「(padding)で高さを指定すると、他の要素からはみ出す」というCSSの仕様があります。
 そのため、「背景色」を指定して、箱形のリンクを作るのにはあまり向いていません。

■SPAN、DIVで、ブロックっぽいカッコイイリンクが向かないわけ

(Q)外側に来るブロック要素の高さをあらかじめ調節すればいいのでは?
(A)フォントの種類によって、同じフォントサイズを指定していても、高さはそれぞれ違います。また、ブラウザによってもフォントのサイズが変わります。
 同じ理由で、DIVブロックをフロートさせるのも、PC環境により表示が変わる原因になります。





TABLEタグで整形

 これが、「ブロックのカッコイイリンク」を作るのに、一番デザインが崩れない選択肢です。
 テーブルタグの詳細については、以下からご覧頂けます。
テーブルタグを理解してみる


【HTML】
<div class="category_navi">
<table><tr>
<!--category-->
<td><a href="<%category_link>"><%category_link></a></td>
<!--/category-->
</tr></table>
</div>
【CSS】
.category_navi table{
border-collapse:collapse;
}
.category_navi td{
padding:2px 20px;
border-right:1px solid #000;
}
【表示結果】
カテゴリ1カテゴリ2カテゴリ3カテゴリ4カテゴリ5


 リンクホバー時のバックグランドカラーを指定すれば、なんだかカッコイイメニューが出来上がります。
 

このエントリーをはてなブックマークに追加
Sat.01.15.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。