HTMLの構造化 - リストタグを横に並べる

「HTMLの構造化 - リストタグ デザイン編」はいかがでしたでしょうか。
前回は「リストタグ」と「CSS(スタイルシート)」のみで「JavaScript」の「onMouseOve」rで色が変化するボタンと同じ効果のメニューボタンを作成してみました。

今回は、引き続き「SEO対策」では欠かせない、フッターに配置する各コンテンツへのナビゲーションを同じ「リストタグ」と「CSS」を使って作成したいと思います。

「SEO対策」でフッターに配置するナビゲーションと言えば、やはり、前回の様なボタンを縦に並べる形ではなく、横に並べるのが普通だと思います。

一点気を付けなければならないのは、前回までリストタグに使用していた「<ol>タグ」は使えません。
何故かというと、「リストタグ」内に「olタグ」を使用した場合、「CSS」を使ってレイアウトを設定しても、強制的に改行されてしまうため、レイアウトが崩れてしまうといった結果になるからです。

フッターのナビゲーションは、「大項目へのボタンのみ」と割り切りが必要かもしれません。

それでは、「CSS」でどのようにレイアウトしたら良いのかというと、まずセレクタ「.menu-list a」と「.menu-list a:hover」から宣言ブロック「display: block;」を削除します。
これを削除すると、ボタンの横幅は文字数により変化してしまいますが、そのままにしておくと、横並びにできませんので、削除します。併せて、「widｈ: 130px」も不必要なので、同時に削除しておきます。

そして、セレクタ「.menu-list li」に属性「display: inline;」を追加します。
すると、どうでしょう、以下の様にとりあえず横並びになりましたが、ボタンの間に空白ができてしまっています。

 

• HOME
• 製品情報
• お問い合わせ

これは、「HTML」を書く際「ソースフォーマット」をきっちりおこなっている時にでてしまいます。
「<li>タグ」と「<li>タグ」の間は「ソースフォーマット」を無視して、空白なしで記述してください。

そうすると以下の様にボタンの間に空白のないナビゲーションを作成することができました。

 

• HOME
• 製品情報
• お問い合わせ

いかがでしたでしょうか。
「リストタグ」は項目を立てに並べるものだとばかり思っていた方には驚きだったと思います。
これで、「SEO対策」に効果があり、「<li>タグ」と「CSS」を利用したナビゲーションを作成できます。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選