2010年3月18日　page:1/6

内田 順一＝Chime of Shigan代表取締役

• Tweet
• 
• 
• 

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

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

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

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

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

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

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

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

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

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

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

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

連載目次（新着順）

• 【最終回：CSSトレーニング編】　Lesson11　3段組みのレイアウト
• 【第11回：CSSトレーニング編】　Lesson10　2段組みのレイアウト
• 【第10回：CSSトレーニング編】　Lesson9　ヘッダーメニュー
• 【第9回:CSSトレーニング編】　Lesson8　ボタンメニュー
• 【第8回：CSSトレーニング編】　Lesson7　点線で区切ったメニュー

 目次一覧へ

関連記事

検索中

HTML CSS

column_LEAF

1021903

キーワード

HTML CSS

デュアルディスプレイで快適な仕事環境を構築