CSS_html/css_WEB-ITnose を使用してアイコンを含む Web サイトのナビゲーション メニューを作成する

私が作成するすべてのインターネット アプリでは、画像のみで構成されるメニューの作成は避けるようにしています。私の意見では、Web メニュー システムではテキストを使用する必要があります。これにより、アプリケーションがメニューをどのように読み取るかに関係なく、メニューがよりクリーンで明確になり、読みやすくなり、ページが拡大されても歪みません。もしかしたらそれは私だけでしょうか？でも、見た目も使いやすいメニューを作れないだろうか？

以下は、アイコンを背景にしたナビゲーション メニューを作成するコードとスタイルです。

基本タグ

　<!--navigation.html--><ul class="nav">　<li class="home"><a href="#link">home</a></li>　<li class="about"><a href="#link">about</a></li>　<li class="work"><a href="#link">work</a></li></ul>

CSS

　/* style.css */.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}　.nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}　li.home {background:url(img/nav-home.gif) top left no-repeat;}　　li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}　li.about {background:url(img/nav-about.gif) top left no-repeat;}　　li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}　li.work {background:url(img/nav-work.gif) top left no-repeat;}　　li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}　　.nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}　　.nav li a:hover {color:#C00;}

より洗練された Web サイトのデザインでは、メニューはサポートするスタイルが増えます。公平を期すために、特定のフォントを使用したい場合は、実際には許可されている Web サイトはほとんどありませんが、画像、Flash、または何らかのマジックを使用する必要があります。最後に、できるだけ使いやすい状態にしておくことが重要です。

学ぶための最良の方法は、練習するか、テキストの後ろにアイコンを移動してみるか、アイコンを含む垂直ナビゲーション メニュー システムを作成することです。

これは実際には非常に簡単なチュートリアルであり、高度な技術はなく、アイコンを備えた水平ナビゲーション メニューを作成する方法を提供しているだけだと考えています。 Web サイトのパフォーマンスの観点からは、これはあまり良くありません。現在最も推奨されている方法は、使用する画像を画像ファイルに入れて、background-position を通じて個別に呼び出す CSS スプライトです。また、特殊なテキストの使用に関しては、CSS3 が Web サイト上の埋め込みフォントをサポートし始めているという現状が少し変わってきています。