横型のナビゲーションバーリストを使った横型のナビゲーションバーを作成する方法について解説します。日更新)まず縦型の場合と同じく、リストを作成し<ul>タグに対して、"margin-left"プロパティ及び"padding-left"プロパティに対して0を設定し、初めから付いている余白を削除します。合わせて"list-style-type"プロパティに"none"を指定しデフォルトで付いている黒丸を消します。sample7.html次に同じく<ul>タグに対して"width"プロパティを使ってナビゲーションバーの幅を指定します。"border"プロパティで全体に枠を描いておきます。今回は横に並べるので横に並べた時に必要となる幅を設定して下さい。sample8.html次にリストを横に並べるために、<li>タグに対して"float"プロパティに"left"を設定します。これでリストが横に並びます。sample9.htmlリストの各項目がくっついてしまっていますので、<li>タグに対して"width"プロパティを使って幅を設定します。sample10.html次にリンクの各項目内で記述されている<a>タグをブロック化し、上下に"padding"プロパティを使ってパディングを設定します。同時に"text-align"プロパティに"center"を設定して中央にリンクが表示されるようにします。項目間の区分を付けるため同じく<a>タグに枠線を設定しますが、二重に線が引かれないように<a>タグに対しては右側の枠線だけを描き、そして<ul>タグの枠線は上下左だけ枠線を引くように変更します。sample11.html最後にロールオーバーの設定を行います。<a>タグに対して"text-decoration"プロパティで"none"を設定し下線を削除します。"background-color"プロパティで背景色を設定しておいてから、a:hoverに対して別の背景色を設定することでロールオーバーの効果を出します。横型の場合と同じく<a>タグに対して"width"プロパティを設定しないと、文字列の上にマウスを置いた時にしかロールオーバーにならないため、"width"プロパティを使って<a>タグの幅をいっぱいに伸ばすことで、枠の中のどの部分にマウスが来てもロールオーバー風にすることができます。sample12.htmlこれで横型のナビゲーションバーが作成できました。最後のサンプルのHTMLファイルとスタイルシートのファイルを参考までに記載しておきます。IKURA初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。