- ベストアンサー
テーブル構成
- みんなの回答 (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> こうなるわけです。
その他の回答 (1)
- LOHA
- ベストアンサー率52% (203/388)
table使ってもできますが、普通はリストのulタグあたりを使いますね。 liにfloat:leftを使う方法、display:inlineを利用する方法などがあるでしょうか。 個人的にはinlineを使ってます。 コツとしては、marginを0にすること(隙間をなくす)。画像を使うならborder-widthを0にすること(アンカーをはった時に枠ができるので)。 あとは、liタグ間で改行しないこと(半角スペースのすき間が空くため。どうしてもしたかったらコメントを挟んでコメント内で改行する)。 ざっとそんな感じでしょうか。 文字を使うときはline-heightを変えるとか色々微調整しますね。
お礼
LOHA様 こんにちは。早速のご丁寧なアドバイスをありがとうございます。 inlineですか、、今から調べてみますね。 貴重なアドバイスをありがとうございました。
お礼
uriboar様 こんにちは。ご丁寧にソースまで提示していただきありがとうございます。 CSSって触りはじめて間もないのでとても参考になります。 有難うございました。