• ベストアンサー

テーブル構成

こんにちは。こちらでの投稿は初めてです。 添付画像のような作りのメニューをよく見ますが、これはどういった作りになっているのでしょうか? ajaxとかのタブでもなく、単にリンクが張ってあるものなのですが、このメニュー自体の作りが分からず、投稿させていただきました。 テーブルで組めばなんとか形にはなりそうですが、styleの使いまくりで、非常に見にくいソースになったりで、もっとスマートなやり方はあるのでは?と投稿いたしました。 ※画像にあるファイルのソースを見れば良いのでしょうが、画像しかなく、どこのサイトか?さえも分からないのです・・。 お忙し中恐縮ですが宜しくお願いいたします。

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

  • ベストアンサー
  • uriboar
  • ベストアンサー率15% (143/916)
回答No.2

各メニューのリンクが画像でよければ HTMLの部分は各ページに <ul class="menu"> <li><a href=""><img src="" alt="基本設定" /></a></li> <li><a href=""><img src="" alt="ロゴ画像設定" /></a></li> <li><a href=""><img src="" alt="コンテンツ設定" /></a></li> <li><a href=""><img src="" alt="独自ドメイン設定" /></a></li> <li><a href=""><img src="" alt="メールアドレス設定" /></a></li> </ul> とだけ記述しておいて 外部スタイルシートに ul.menu li { display: inline; } と記述すれば、簡潔では?余白などはお好みで。 画像はそのページを表示しているときとそうじゃないときの2通りを用意してください。 各メニューのリンクはあくまでテキストを保ちたいということであれば <ul class="menu"> <li class="selected"><a href="">基本設定</a></li> <li><a href="">ロゴ画像設定</a></li> <li><a href="">コンテンツ設定</a></li> <li><a href="">独自ドメイン設定</a></li> <li><a href="">メールアドレス設定</a></li> </ul> みたいにして 当該ページとそれ以外のスタイルを別で指定すればよいのでは? ロゴ画像設定のページでは <ul class="menu"> <li><a href="">基本設定</li> <li class="selected"><a href="">ロゴ画像設定</li> <li><a href="">コンテンツ設定</li> <li><a href="">独自ドメイン設定</a></li> <li><a href="">メールアドレス設定</a></li> </ul> こうなるわけです。

a4_chapp
質問者

お礼

uriboar様 こんにちは。ご丁寧にソースまで提示していただきありがとうございます。 CSSって触りはじめて間もないのでとても参考になります。 有難うございました。

その他の回答 (1)

  • LOHA
  • ベストアンサー率52% (203/388)
回答No.1

table使ってもできますが、普通はリストのulタグあたりを使いますね。 liにfloat:leftを使う方法、display:inlineを利用する方法などがあるでしょうか。 個人的にはinlineを使ってます。 コツとしては、marginを0にすること(隙間をなくす)。画像を使うならborder-widthを0にすること(アンカーをはった時に枠ができるので)。 あとは、liタグ間で改行しないこと(半角スペースのすき間が空くため。どうしてもしたかったらコメントを挟んでコメント内で改行する)。 ざっとそんな感じでしょうか。 文字を使うときはline-heightを変えるとか色々微調整しますね。

a4_chapp
質問者

お礼

LOHA様 こんにちは。早速のご丁寧なアドバイスをありがとうございます。 inlineですか、、今から調べてみますね。 貴重なアドバイスをありがとうございました。

関連するQ&A