投稿日：2006年10月27日　　　レベル：中級者　　　　ソフトウェア：

---

このチュートリアルでは、基本的なドロップダウンメニューの作り方を紹介します(あなたが望むように変えることも可能です)。ここでは、基本的なHTMLの知識、、･･といったことをわかっていると仮定して話を進めていきます。また、基礎的なJavascriptやStyle Sheetなども使っていきます。

• Step1 ： まえがき
• Step2 ： DHTMLとは
• Step3 ： サンプルソース
• Step4 ： ドロップダウンメニューの注意点

私のように、ドロップダウンメニューについて知識があれば、例えば、ネットサーフィンをしていて出会ったウェブページに使われているメニューでもHTMLソースをみればどこがどうなっているのかすぐにわかります。今から、"これはどうなっているのか？"、"タグでない？これはなに？"といった疑問を解消できるようにしましょう。

では、DHTMLの世界へ入ってみましょう･･DHTMLとは何か知っていますか？Dynamic HTMLのことです、これは言語ではないの？と思うかもしれません。これはStyle Sheet、HTML、Javascriptなどとの組み合わせによるものです。このチュートリアルで使う技術は決して難しいものではありません、Javascriptもごく基本的なものですし、Style Sheet、より正確にいうならCascading Style Sheet(CSS)もHTMLのように動作する簡単なものです。

では、要点を踏んでいきましょう･･
新しいテキストドキュメントを開きます(個人的にはHTML-Kitを使っています)。そして、基本的なHTMLのページを作成していきましょう。

私の書き方、特に、タブの開きか方と閉じ方に注目してください。

HTMLはこのように記述されます。

(ここで、のワンセットがあることに注目してください。これは古いブラウザの動作を確定するために必要なものです。)

ドロップダウンメニューをどのようにしたいかを決める必要があります。ここでは基本的な青のものを使いましたが、違うものももちろん可能です。見栄えは重要なことなので、よく検討してください。
1:見栄えをよく考えること。
2:テキストを見やすくすること。
3:スペースなども含め、全体を一様に仕上げること。
4:ランダムな色使いは避けること。
5:重なったりしないこと。
実際には、このようなことを考えてメニューを作成してください！

引用:Web Design Library 著者:free2code翻訳:atuk

スポンサードリンク