cssでメニュー幅を均等にしたい

cssでメニュー幅を均等にしたい
悩ましいレイアウト問題
下の線は気にするな!

画像の様なとき、選択1~5を均等にならべたい時はどうしたらよいのだろう。

Bootstrapというものを使うと簡単・おしゃれと聞いたので、そのテンプレートを紹介してくださっているこちらのページを参考に頑張りました。

href=”#”とか全然理解できないことが頻出して血涙ですが、まずはこの選択肢に絞って…

Bootstrap以前の問題でしたので、これは一旦保留(;’∀’)

課題HTMLとCSS

HTML

見よう見まねで書いたのがこちら。拙いコードを公開することの恥ずかしさよ…

div class=”MAX”とかの部分は無視してください汗

CSS

うわーなんかもうアップしただけでオカシイ気がしてきた。

無駄もめちゃ多そう…

問題点

ul・li属性が真ん中に寄っちゃって、こじんまりしてしまっていること。

うちのブログのホーム画面の新着記事欄みたいに、左右にぴったりして表示したいわけです。

こういう風にならべたいんだ。

んで、素人考えで「そうだ!右クリックで『要素を検証』すればいいじゃん!」と思って早速自分のページのそれらを見てみたのですが…

どこみればいいのよ…

おとなしく検索することにしました。

解決策

「nav 横に並べる」で検索。

ul・liじゃなくて、これってナビゲーションだよな?というおぼろげな思いつきからです。間違ってたら誰か教えて。

すると一番目にそれらしい記事が!ありがてぇ!

こちらのページ様です感謝です。

cssで横並びで…ふむふむ、まさに私のやりたいこと!

<ul><li>はブロック要素のため、自動で改行が入り、縦に並んでしまうそう。

ブロック要素はなんとなくわかる。

ん?てことは

上のcssのdisplay: block;の部分は不要か?

html的には問題なさそうなので、cssをいじっていきます。

list-style: none;とtext-decoration: none;で黒い点と下線を消しますふむふむ。

すでに美しいですが、このままではまだ縦に並んでいますね。

横並びにするには

float化

block要素であるがために改行が入り、縦に並ぶ。

であればfloat化してしまえば。

<li>属性をfloat: left;にして左に寄せる。が、これだと回り込みというものが発生してレイアウト崩壊の原因になるそうなので、親要素たる<nav>にoverflow: hidden;で回り込みを解除…もうわからなくなってきた。

以上を参考に、とりあえず自前のhtmlの属性やらcssのセレクタやらプロパティやらをいじってみる。

修正後のHTML

修正後のCSS

あやふやに記述した部分やアヤシイ部分は一旦コメントアウト。

ちょっと寄ってる気もするけど完成!

さすが集合知!ネット万歳!

ブラッシュアップはまた後日。

written by Tatsuya.F

※コード公開にあたってこちらを参考にプラグインをインストールしました。「Highlighting Code Block」。シンプルでオシャレに見えたので。導入も簡単! 
※すみません、どうやらうちのテーマと拮抗してしまって表示が上手くできませんでした。こちらさんを参考に「Crayon Syntax Highlighter」を導入。…でもやっぱり縞模様で背景暗めで…ってすると表示がおかしくなる…とりまテーマは「classic」で。と思ったらどうやらテーマによっては正しく表示されるものもありました汗。自分のブログテーマは「lionmedia」なんですが今回使った「neon」はおそらく正常に表示されているかと。テーマの一覧はこちらでまとめてくださってます。

codingカテゴリの最新記事