簡単なグローバルナビゲーションの作り方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は「簡単なグローバルナビゲーションの
作り方」についてお話させて頂きます。

グローバルナビゲーションとは、
主にサイトの上部の方に配置されている
メニューのことです。

今回はulタグを使って
メニューが横並びになるような
グローバルナビゲーションのサンプルを
ご紹介させて頂きます。

htmlの書き方

上記の記述をブラウザで表示させると
下記のように縦に並んで表示されます。

グローバルナビゲーション

これをCSSの設定で横並びのメニュー表示にさせます。

CSSの書き方

横並びメニューサンプル表示

テキスト表示に背景色を付けた
非常にシンプルなグローバルナビゲーションですが
ulタグを使って横並びのメニューを表示させるには
どうすれば良いのか、ご理解頂けたと思います。

今後、また他の表示方法なども
ご紹介していきたいと思います。

では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ