ナビゲーションリストを様々にデザインしてみよう。

HTML自体は極めてシンプルなナビゲーションリストですが、それを様々にデザインしています。このようにHTMLに文書構造だけしか記述されていないと、デザインを変更するのも楽です。

また、HTMLが簡単なため日数が経過した後のメンテナンスも楽ですし、スタイルシートも簡単でわかりやすくなります。

このページのHTMlは常に一定で、スタイルを変更するだけでデザインを変更できます。

ナビゲーションリスト

サイトマップ

ブラウザの表示メニューからスタイルシートを選択してください。スタイルシートを使用しないにするとシンプルなHTMLになります。また、印刷プレビューで印刷時のデザインも確認できます。

メニューバーの[表示]から[スタイルシート]を選択する。

HTMLやCSSの書き方

多くの自称ウェブデザイナーの方が誤解されているのですが、デザインを凝ろうとすると、仕様書にVoidな(準拠した)HTMLでは不可能と思われているようです。それは、まったく逆です。

そのようにデザインしたほうが良いということは、文書の構造もそれに矛盾しているはずはなく、文書構造からの必然性なのです。文書構造さえきちんとマークアップされていれば、必ずそのようにデザインできるはずです。

逆に言うと文書構造さえきちんとマークアップされていれば、その文書構造に見合ったデザインが自由にできると言う事す。

もしも、最初にデザインを決めてそれを元にHTMLの作成を進めたら、文書構造とプレゼンテーションというHTMLのもっと重要な部分から外れてしまいます。

このページでも、HTMLに特別なことはしていません。率直にナビゲーションリストとしてマークアップしてありますから、スタイルシートでどのようにもプレゼンテーションを指定することができます。

display:inline-blockによって横並びさせたときの空白文字について

ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。

Paragraphs, Lines, and Phrases (ja)

と、「連続する空白文字は１文字として処理する」と言う規定があります。

そのため、スタイルシートでdisplay:inline-blockを指定した場合、HTML中の空白文字が一文字のスペースとして表示されてしまいます。

display:inline-block;になっている段階でfont-size:0;であれば、、その要素の前後に改行やタブの空白文字があっても文字幅ゼロで表示されます。もちろん、その子孫の要素に移動した時点で改めてfont-sizeを指定する必要があります。

HTML

<div class="nav">
    <ol>
        <li><a href="/index.html" title="Top Page">ＴＯＰ</a></li>
        <li><a href="/North_American/index.html" title="北アメリカ">北アメリカ</a></li>
        <li><a href="/South_American/index.html" title="南アメリカ">南アメリカ</a></li>
        <li><a href="/Asia/index.html" title="アジア">アジア</a></li>
        <li><a href="/Europe" title="ヨーロッパ">ヨーロッパ</a></li>
        <li><a href="/Africa" title="アフリカ">アフリカ</a></li>
        <li><a href="/Oceania" title="オセアニア" >オセアニア</a></li>
    </ol>
</div>

スタイルシート

div.nav ol{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-size:0;/* 行内要素間のスペース */
}
div.nav ol li{
    display:inline-block;
    font-size:14px;/* 実際の文字サイズ */
    margin:0;
    padding:0;
    width:16%;
}

フォントサイズではなく、div.nav ol li+li{margin-left:2px;}とかでも良いでしょう。

唯一の注意点は、「ブラウザがHTMLを表示する際の空白文字処理」への対処です。空白文字とは、半角スペースだけでなく、改行コード、タブなどを含みます。

ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。

Paragraphs, Lines, and Phrases (ja)

と、「連続する空白文字は１文字として処理する」と言う規定があります。

そのため、スタイルシートでdisplay:inline-blockを指定した場合、HTML中の空白文字が一文字のスペースとして表示されてしまいます。

その対策として

そのままにする。

リンクが張られている要素間にスペースがないと、ユーザビリティ上から問題なのでその隙間を活用する。

<ol> <li><a href="/index.html" title="Top Page">ＴＯＰ</a></li> <li><a href="/North_American/index.html" title="北アメリカ">北アメリカ</a></li> <li><a href="/South_American/index.html" title="南アメリカ">南アメリカ</a></li> <li><a href="/Asia/index.html" title="アジア">アジア</a></li> <li><a href="/Europe" title="ヨーロッパ">ヨーロッパ</a></li> <li><a href="/Africa" title="アフリカ">アフリカ</a></li> <li><a href="/Oceania" title="オセアニア" >オセアニア</a></li> </ol>

HTMLソースの書き方を変更する。

<ol> <li><a href="/index.html" title="Top Page">ＴＯＰ</a></li ><li><a href="/North_American/index.html" title="北アメリカ">北アメリカ</a></li ><li><a href="/South_American/index.html" title="南アメリカ">南アメリカ</a></li ><li><a href="/Asia/index.html" title="アジア">アジア</a></li ><li><a href="/Europe" title="ヨーロッパ">ヨーロッパ</a></li ><li><a href="/Africa" title="アフリカ">アフリカ</a></li ><li><a href="/Oceania" title="オセアニア" >オセアニア</a></li> </ol>

この場合は、display:inline-blockで横に並べるなどしてもスペースはあきませんから、デザインの節約はなくなります。いずれの方法をとるかは著者の判断次第でしょう。

ナビゲーションをデザインしてみる。