ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング