HTML&CSS自主練｜サイト作成その3 要素のセンタリング

毎日暑いですね。極力リビングから出たくないらくだ🐫です。

今日も今日とて自サイト作成です。

今ある知識で作るので、だんだんレベルアップしていきたい。

ひとまず形になったら公開しようと思っています。

さて、前回悩んでいたヘッダー部分をセンタリングしたデザイン。

こんな感じ↓にしたい訳です。

ロゴの<div>のセンタリングはclassにmargin: 0 auto;を挿入することで解決しました。

これ、調べると「margin: 0 ;」とか「margin: auto;」っていうのが結構出てくるのだけど、実際できたのは0とauto両方指定した時でした。

で、問題はコンテンツへのリンク部分で

もともとはProgateの初級でやった様に

——————————————————————————————————————-

<div class=”header-list”>
<ul>
<li>らくだ🐫について</li>
<li>らくだのさいとについて</li>
<li><a href=”https://twitter.com/rakuda_san_desu“>ツイッター<span>（別窓）</span></a></li>
<li><a href=”https://rakuda-san.hatenablog.com/“>ブログ<span>（別窓）</span></a></li>
<li>ポートフィリオはまだない</li>
</ul>
</div>

——————————————————————————————————————

こういうhtmlなので

同じく初級でやったようにfloatで一列に表示してheader-listのdivをセンターにって思ったんだけど、これが出来ないのでした。

とりあえず一列に並べると（別窓）ってのが鬱陶しい感じなので削除。

リストタグをなくして一列にするとコンテンツ名の間が空かない。

頭をひねった挙句こうなりました。

———————————————————————————————————————-

<div class=”header-list”>
<span>らくだ🐫について</span>
<span>らくだのさいとについて</span>
<span><a href=”https://twitter.com/rakuda_san_desu“>ツイッター</a></span>
<span><a href=”https://rakuda-san.hatenablog.com/“>ブログ</a></span>
<span>ポートフィリオはまだない</span>
</div>
</header>

———————————————————————————————————————-

.header-list{
padding:5px;
font-size: 12px;
text-align:center;
}

.header-list span{
padding: 5px;
}

———————————————————————————————————————-

コードの美しさとかスマートさは別として

自分が持っている知識で思っている形を表現することは出来ました。

いや、でもどうなんですかね、コレ。

しかしある程度の幅がないとコンテンツ部分改行されちゃうね。スマホ表示微妙じゃね？と言う気持ちから、このデザインはやめたのでした。