スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > ドロップダウンメニューの作り方

ドロップダウンメニューの作り方

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



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


Step1 − まえがき

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


Step2 − DHTMLとは

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


Step3 − サンプルソース

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

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

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

<html>
<head>
<style type="text/css">
<!-- this is a basic embedded Style Sheet -->
<!--
-->
</style>
</head>
<body>

</body>
</html>


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


Step4 − 注意点

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


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング