このサイトで制作した、ページ上部の
CSSを使った立体的な横並びのメニューボタンの作り方を書いておきます。
リアルなボタンのように、カーソルを乗せるとボタンを押したように見せることができます。
CSSの記述
#Menu {
height: 18px;/*メニューの高さ*/
}
#Menu ul {
margin: 0;
padding :0;
list-style-type : none;/*リストスタイルはなしにする*/
}
#Menu li {
display : inline;
margin:0;
float:left;/*フロートを左に指定してボタンを横並びにする*/
}
#Menu a {
display: block;/*ブロックにして各ボタン全体をリンクエリアにする*/
text-decoration:none;
border-top:1px solid #69c;/*上線の幅（細）とカラー（薄）*/
border-right:2px solid #369;/*右線の幅（太）とカラー（濃）*/
border-bottom:2px solid #369;/*下線の幅（太）とカラー（濃）*/
border-left:1px solid #69c;/*左線の幅（細）とカラー（薄）*/
text-align:center;/*文字をボタンの中央にする*/
width: 75px;/*各ボタンの幅*/
padding-top: 4px;/*文字上部余白*/
padding-bottom: 2px;/*文字下部余白*/
font-size: 0.85em;/*文字サイズ*/
font-weight: normal;
background: #9ff;/*ボタン背景色*/
color: #369;/*文字色*/
}
#Menu a:hover {/*ここからマウスオーバー時の設定*/
display:block;
text-decoration:none;
border-top:2px solid #369;/*上線の幅（太）とカラー（濃）*/
border-right:1px solid #69c;/*右線の幅（細）とカラー（薄）*/
border-bottom:1px solid #69c;/*下線の幅（細）とカラー（薄）*/
border-left:2px solid #369;/*左線の幅（太）とカラー（濃）*/
text-align:center;
font-weight: normal;
background: #fff;/*マウスオーバー時の背景色*/
color: #369;
}
※各カラー、各サイズは変更してください。
HTMLの記述
メニューボタンを入れたい箇所に以下を記述します。
※リンク先とボタン内のテキストはご自分のコンテンツに合わせて変更してください。
<div id="Menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">photopop</a></li> <li><a href="#">blog</a></li> <li><a href="#">links</a></li> </ul> </div>
HTMLは非常にシンプルですね。
HTML側に余計なレイアウトのタグが含まれないため読み込みが早く、検索にもスムーズになります。
また、CSSの指定で作られているので、ボタン画像を2枚使用してJavaScriptでマウスオーバーの設定をするよりも重くなくユーザーの負担になりません。
メニューは正しいマークアップという面でも通常リストタグで作られることが多く、
リストタグで作られたメニューは携帯で閲覧した場合、2ページ目以降折りたたむことができたりします。
これからはPCもモバイルもボーダレスになっていきますので、
よりいっそうCSSでのレイアウトが必要な時代になってきますね。
追記 2007.02.26
「CSSの記述」を修正しました。
ページへの表示上スペースを入れていましたが、
コピーペーストするとFirefoxでCSSが効かなくなるため不要なスペースを抜きました。
2007.01.05 (Fri)
|
音声読み上げ
blog総合エントリー一覧
Comments
Holy
この方法は、ウェブ標準の見地からも大賛成です！
僕も以前は、画像の入れ替えによる変化にこだわっていましたが、SEO上、好ましくないテクニックなので極力避けています。
最近は、マウスオーバーによる変化は、ほとんどCSSの組み合わせでやってますよ。
仕事に追われている毎日でも、ふと、「ウェブを作るってなんて楽しいことなんだろう」と思うことがあります。
自分が思い描くイメージが、html+CSSによってビジュアル化される、実にすばらしいことです！
pas
「ウェブを作るってなんて楽しいことなんだろう」
仕事に追われる中でもそう思えることって素晴らしいですね。
それはきっとHolyさんが
信念を大切に、作り上げるものに対して熱意を持ってお仕事をされているからだと思います。
このお仕事って、ビジュアルと合わせてその裏にあるHTMLによってとても奥が深いと思います。
以前はビジュアルが良ければ全てよしというような世界でしたが、今はその裏の部分に注目がされているので、そういう部分に信念を持つ者にとっては嬉しく、更に楽しくなってきましたね。
Holy
そうなんですよね。
僕らみたいな人間には、ウェブスタンダードって、とても良い傾向です。
でも。。。
仕事の上では、クライアントのほとんどはウェブページの構造部分はわからないので、まだまだビジュアルにこだわってます。
もちろん、ビジュアルは重要です。
でも、企業のサイトは「見てもらってナンボ」な世界なので、しっかりとした構造とSEOが重要だということをわからせるのは一苦労ですよ。
メジャーな企業は、メジャーだからこそhtml構造もSEOもけっこういい加減でも許される・・・ということなんですけどね～。
まぁ、ウェブ業者の中にも、「xhtml+CSS？ウェブ標準？大手はそんなことやってないじゃん！」っていうのが、まだまだいますからね。
こういう業者は消えてなくなることでしょう。
pas
確かに。
メジャーな企業ほどhtml構造などは無頓着かもしれませんね。
クライアントに構造部分のこだわりと配慮を解ってもらえることができれば1番良いですよね。
そのためにはやっぱりビジュアル面で納得させることができるものを作り、それでいて構造部分もしっかりしたものを作らなくてはいけないですね。頑張らなくては！
> ウェブ業者の中にも、
> 「xhtml+CSS？ウェブ標準？大手はそんなことやってないじゃん！」
> っていうのが、まだまだいますからね。
そ、そうなんですか！
それは驚きですね。
最近雑誌で読んだのですが、
イギリスでは障害者差別禁止法とういう法律があり、
企業がWebサイトを展開する場合、W3Cで定めたアクセシビリティの項目への準拠が必要なのだそうです。
つまりWeb標準に準じていないサイトは法的に作れないということになります。
さすがイギリスですね。
道路の脇に、紳士服店や量販店などの落ちそうなくらい大きな看板が顔を出している、景観と安全などの配慮を全く考えない日本とは違うわけですね。
jo
Mozilla Firefox 2.0.0.2 では単なるリストとして縦に表示されるのですが・・・私だけでしょうか？
でもこのページ上部にあるメニューボタンはきちんと表示されています。
このＣＳＳとＨＴＭＬの記述をコピーし、きちんと
の中に入れ、ＣＳＳは外部ファイルとしてリンクさせたんですが、ＩＥ６で表示されてもMozillaではダメなんです・・・。
jo
すみません。
上の投稿で消えた部分がありました。
※５行目の「きちんと」の後に
＜ＢＯＤＹ＞＜／ＢＯＤＹ＞ ←（実際は半角）
と書いたんですが消えてしまっていたので
追加訂正しておきます。
┏○ ペコリ
pas
joさん、問い合わせをいただきありがとうございます！
原因を調べていてお返事が遅くなりすみません。
joさんからお問い合わせをいただき、
私もこのページに載せたCSSコードを貼り付けてテストページを作ったところ、joさんのご指摘通りMozilla Firefox 2.0.0.2で横並びのボタン表示になりませんでした。すみません！
色々やってみてやっと原因がわかりました。
このページにCSSコードを載せる際、見やすくするためにスペースをCSS指定内容左側と説明のコメントアウト（ピンク字）前部分に入れていました。
それが原因でFirefoxではちゃんと表示がされなかったようです。
スペースはIEでは問題がなくFirefoxではNGなようですね。
（※タブで空けるのはOKです。）
勉強になりました！ありがとうございます！
このページのCSSコード内のスペースを抜いて
修正しましたので、またお試しください。
また何かお気付きの点がありましたら教えてくださいね。
ありがとうございました♪