解決済み

参考サイトにあるナビメニューの作り方

  • 困ってます
  • 質問No.9426269
  • 閲覧数88
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 24% (16/66)

http://www.tagami-bunguten.com/page/3 のサイトの
カテゴリー一覧と書かれているナビメニューの区切り線のことなんですが、どのように作ればよろしいのでしょうか?

グーグルのデベロッパーツールを見てもいまいち仕組みがわからないのですが、ナビメニュー自体が画像になっているのでしょうか?

質問者が選んだベストアンサー

  • 回答No.1

ベストアンサー率 58% (340/578)

直リンクするのもどうかと思いましたが……。
 http://www.tagami-bunguten.com/data/kenntarock/image/gnavi2.png

おっしゃるようにナビメニューのひとつひとつが画像になっていて、このpng画像の右端に区切り線も含まれています。これらをCSSの《background-image》を使って、<a>要素の背景画像として埋め込むような仕組みです。

◆background-image-スタイルシートリファレンス
 http://www.htmq.com/style/background-image.shtml

あとは<a>の親要素である<li>を、《float》で左に並べていくだけだと思います。

◆float-スタイルシートリファレンス
 http://www.htmq.com/style/float.shtml

デベロッパーツールでも確認できるので、<li>要素と<a>要素のところを調べてみてください。
お礼コメント
saya100111

お礼率 24% (16/66)

ありがとうございます。
投稿日時 - 2018-02-08 10:21:51
たいせつな将来のこと。あえて、知らない人に聞いてみよう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ