左上にロゴ、右上に横並びliの方法

どうも、すなです。

今回の記事は忘備録に近いです。

久々にWeb制作をして、最初にぶち当たった壁だったので二回も同じことを調べる時間をなくすために書きました。

内容はタイトルの通りです。Webサイトにありがちな、

これを実装する方法を紹介します。やりたいことに対して、実装に意外と時間がかかってしまったので、これからはこれで解決したいです。

ulにfloat: right;を設置

上記の見出しに結論を書いちゃいました。もう少し詳細を話します。

例えば、以下の様なheaderがあるとします。これを横並びにします。

<div>
    <h1>Title</h1>
    <ul>
        <li>List1</li>
        <li>List2</li>
        <li>List3</li>
    </ul>
</div>

<div>

<h1>Title</h1>

<ul>

</ul>

</div>

h1タグにタイトルが入り、その下のulタグにはリンクが入る想定のliタグが複数あります。このliタグにはfloat: left;でリストが横一列になるところまでは把握されている方、多いかと思います。

問題はその後です。今度はその横並びのliをh1タグと同じ高さで横一列にしたいですよね。その方法は以下です。

h1 {
    float: left;
}
ul {
    float: right;
}
li {
    float: left;
}

h1 {

float: left;

}

ul {

float: right;

}

li {

float: left;

}

見出しにも書いた通り、左上に配置したい(今回で言う)h1タグに対してfloat: left;で配置、最後に横並びになっているliタグを囲っているulに対してfloat: right;でulタグごと右上に配置します。

これで皆さんもheaderのメニューのcssには迷わなくて済みますね！

それでは良いコーディングライフを。