CSS：メニューバーを試してみる
記事をすこしづつ書き直します。役に立った資料アメブロ～ヘッダー画像・メニューバーの設定方法～ http://exwill.jp/wp/wp-content/uploads/507a2fc962c5d85f54b766c4b251bfb4.pdf注意点フリースペースの位置は左上にすること（説明に書いてあるが見落としがち）自分のブログに合わせて調整が必要フリースペースのHTMLで改行を入れるとうまく表示されない。/*-------------------------------------------------*//* メニューバー *//*-------------------------------------------------*//*基準調整*/.skinFrame{ position:relative;}/*メニューエリア*/#headermenu{ position:absolute; width:980px; margin:0; padding:0; height:40px; /*メニューエリアの高さ*/ top:120px; /*●画面上からの位置*/}/*メニューリストグループ*/#headermenu ul { width:980px; padding:0; margin:0;}/*メニューリスト*/#headermenu ul li { float:left; width:196px; height:40px}/*メニューリストリンク*/#headermenu ul li a{ font-size:15px; font-weight:normal; color:#FFFFFF; /*●文字色*/ background-color:#333333; /*●背景色*/ display:block; text-decoration:none; /*項目の文字装飾*/ text-align:center; /*項目の文字寄せ位置*/ line-height:25px;}/*メニューリストリンク マウスオーバー時*/#headermenu ul li a:hover{ color:#000000; /*●文字色*/ background-color:#FFFFFF; /*●背景色*/ display:block; text-decoration:none; /*項目の文字装飾*/ text-align:center; /*項目の文字寄せ位置*/}/*メニュー下の位置下げ*/.skinContentsArea{ padding-top:100px!important;}/*メニューバー縦線*/#headermenu ul li a.menu1,#headermenu ul li a.menu2,#headermenu ul li a.menu3,#headermenu ul li a.menu4{ border-right:1px solid #FFFFFF;}
