右寄せと左寄せを同じ段で同時に行う方法

過去記事 右寄せと左寄せを同じ段で同時に行う方法

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

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

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


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


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

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

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

この記事を書いた人

ひしもち

京都の某Web制作会社で4年弱勤務したのち、退職して個人事業主となりました。
現在の主なお仕事は、WordPressを利用したWebサイトの制作です。
業務システムのUIデザインをしていた経験もあり。

専業主夫+3人の子どもたちと暮らしています。ゲーム好きなインドア派ですが、ゆるゆる楽しむプレイスタイルです。