ヘッダーなんかで、ロゴを左寄せ、ナビゲーションメニューを右寄せで一列に並べたいことってありますよね。
たとえばこんな風に……

横並びで左右に配置したい図

どうすればこうなるのかわからなくて、またもや試行錯誤・悪戦苦闘したので、忘れないようにメモしておきます!


この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いた記事です。
内容は2015年3月3日(ひなまつり!)に書かれたものです。


今回も、覚えてしまえば簡単なことでした。
まず、左寄せしたいものと右寄せしたいもので要素分けします。
次に、左寄せしたい要素には「float: left」、右寄せしたい要素には「float: right」を指定します。
これだけ!(笑

ただ、上の画像の場合、ナビゲーションメニューはリストタグを使ってマークアップしたものをCSSで並べているので、上段のテキスト部分と一緒に「float: right」しただけでは、上段のテキストおよび画像が、要素内で左寄せになってしまうんですよね。この部分はp要素なので、「text-align: right」を指定すれば要素内で右に寄ってくれました。

ところで、画像のようなデザインの場合、下のラインを簡単に揃える方法ってないんでしょうか……。
「ボックス内の下揃え」で検索すると、positionプロパティを使う方法くらいしか出てこないし、要素で囲って高さ合わせて下揃えすればいいのかな……? 研究してみます。

この記事を書いた人

ひしもち

京都の某制作会社で4年ほど勤務したのち、フリーランスとして活動することにしました。
現在の主なお仕事は、業務システムのUIデザインと、幼稚園・保育園さまのWebサイト制作です。
専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。