PR

1. 点線は背景として配置する

 前回のシンプルなメニューを改造して、項目同士を点線で区切ったメニューを作ってみましょう。

 まずは、以下からサンプルファイルをダウンロードしてください。HTMLファイルや画像ファイル、CSSファイルが入っています。さらに、HTMLファイルを分かりやすく説明しているPDFファイルも同梱しています。

HTMLファイル・説明PDFファイルなどをダウンロード

 ダウンロードしたファイルを解凍したら、「menu2.html」をテキストエディターで開いてください。前回レッスンの「menu.html」と比べてみると分かりますが、読み込むCSSファイル名が違うだけで、あとはまったく同じ記述です。つまり、装飾はすべてCSSが担っているということが、このことからも分かりますね。

 それでは、「css」フォルダーから「menu2.css」を開いてみましょう。

 点線は、前回の足跡マークと同様に、「right_box」というclassの中の、<li>タグに対するCSS設定によって実現しています。

.right_box li{
  line-height:1.3em;
  margin-top:2px;
  padding-bottom:2px;
  background:url(../images/dotline.gif) left bottom repeat-x;
  }

 この中には、点線を描くような目新しい記述はありませんね。今まで見たことがあるCSSプロパティばかりです。

 そこで、backgroundプロパティに注目してみましょう。<li>タグの背景に「dotline.gif」という画像が、横方向に繰り返されて敷かれているようですね。この画像を開いてみます。

「dotline.gif」をダブルクリックして、Windows XPの「画像と FAXビューア」で開いたところ
「dotline.gif」をダブルクリックして、Windows XPの「画像と FAXビューア」で開いたところ

 拡大表示しているのでぼやけてしまっていますが、高さ5px、幅15pxの画像サイズで、その下端に1px幅の点線を描いた画像データが現れます。

 もうお分かりですね。つまり、ここでの点線の表示は「点線の画像を背景パターンとして敷く」方法で実現しているのです(「点線を実現するCSSプロパティ」については、「4.点線の別の描き方」で説明します)。

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
日経電子版セット今なら2カ月無料