ヘッダーなんかで、ロゴを左寄せ、ナビゲーションメニューを右寄せで一列に並べたいことってありますよね。
たとえばこんな風に……
どうすればこうなるのかわからなくて、またもや試行錯誤・悪戦苦闘したので、忘れないようにメモしておきます!
この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。
内容は2015年3月3日(ひなまつり!)に書かれたものです。
今回も、覚えてしまえば簡単なことでした。
まず、左寄せしたいものと右寄せしたいもので要素分けします。
次に、左寄せしたい要素には「float: left」、右寄せしたい要素には「float: right」を指定します。
これだけ!(笑
ただ、上の画像の場合、ナビゲーションメニューはリストタグを使ってマークアップしたものをCSSで並べているので、上段のテキスト部分と一緒に「float: right」しただけでは、上段のテキストおよび画像が、要素内で左寄せになってしまうんですよね。この部分はp要素なので、「text-align: right」を指定すれば要素内で右に寄ってくれました。
ところで、画像のようなデザインの場合、下のラインを簡単に揃える方法ってないんでしょうか……。
「ボックス内の下揃え」で検索すると、positionプロパティを使う方法くらいしか出てこないし、要素で囲って高さ合わせて下揃えすればいいのかな……? 研究してみます。