横型のナビゲーションバー
リストを使った横型のナビゲーションバーを作成する方法について解説します。
(2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新)
まず縦型の場合と同じく、リストを作成し<ul>タグに対して、"margin-left"プロパティ及び"padding-left"プロパティに対して0を設定し、初めから付いている余白を削除します。合わせて"list-style-type"プロパティに"none"を指定しデフォルトで付いている黒丸を消します。
次に同じく<ul>タグに対して"width"プロパティを使ってナビゲーションバーの幅を指定します。また"border"プロパティで全体に枠を描いておきます。今回は横に並べるので横に並べた時に必要となる幅を設定して下さい。
次にリストを横に並べるために、<li>タグに対して"float"プロパティに"left"を設定します。これでリストが横に並びます。
リストの各項目がくっついてしまっていますので、<li>タグに対して"width"プロパティを使って幅を設定します。
次にリンクの各項目内で記述されている<a>タグをブロック化し、上下に"padding"プロパティを使ってパディングを設定します。同時に"text-align"プロパティに"center"を設定して中央にリンクが表示されるようにします。
また項目間の区分を付けるため同じく<a>タグに枠線を設定しますが、二重に線が引かれないように<a>タグに対しては右側の枠線だけを描き、そして<ul>タグの枠線は上下左だけ枠線を引くように変更します。
最後にロールオーバーの設定を行います。<a>タグに対して"text-decoration"プロパティで"none"を設定し下線を削除します。そして"background-color"プロパティで背景色を設定しておいてから、a:hoverに対して別の背景色を設定することでロールオーバーの効果を出します。
横型の場合と同じく<a>タグに対して"width"プロパティを設定しないと、文字列の上にマウスを置いた時にしかロールオーバーにならないため、"width"プロパティを使って<a>タグの幅をいっぱいに伸ばすことで、枠の中のどの部分にマウスが来てもロールオーバー風にすることができます。
これで横型のナビゲーションバーが作成できました。最後のサンプルのHTMLファイルとスタイルシートのファイルを参考までに記載しておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8"> <title>スタイルシートサンプル</title> <link rel="stylesheet" href="./css/sample12.css" type="text/css"> </head> <body> <div> <ul> <li><a href="http://www.javadrive.jp/">JavaDrive</a></li> <li><a href="https://www.webword.jp/">WebWord</a></li> <li><a href="http://www.dbonline.jp/">DBOnline</a></li> <li><a href="http://www.moviehouse.jp/">MovieHouse</a></li> </ul> </div> </body> </html>
@charset "Shift_Jis";
ul{
margin-left:0;
padding-left:0;
list-style-type:none;
width:440px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
}
li{
float:left;
width:110px;
}
a{
display:block;
padding-top:10px;
padding-bottom:10px;
border-right:1px solid #cccccc;
text-align:center;
text-decoration:none;
background-color:#eeeeee;
color:#555555;
width:109px;
}
a:hover{
background-color:#aaaaaa;
}
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。