プログラミング日記#05　〜要素を上下左右中央寄せに配置する〜

こんにちは。よっしーです。

今日はプログラミング学習5日目！いつものように学習を振り返ります。

今日の学習内容

・ドットインストール　「CSS学習　セレクタ編」（全8回）

・引き続きサイト模写

今回はCSSの基礎学習を進めたのと、昨日おこなったサイト模写の続きをおこないました。

セレクタ編では、セレクタの基本的な指定方法を学びました。そのままドットインストールのCSS学習を終わらせようと思ったのですが、眠くなったのでサイト模写に切り替えました。

学習の振り返り①　親要素の中の子要素を中央に寄せる

サイト模写をするにあたって、下図のような要素がありました。

・背景にオレンジ
・中央にブロック要素

この中央にブロックを移動させるのに四苦八苦しました。
サルワカさんを見て解決。サルワカさんは、それ以外にもめちゃくちゃ参考になる情報があるからありがたいです。

ここでは、ぼくがブロックを中央寄せにするために行った方法をご紹介します。

STEP1:セクション内にブロックを作る

まず、このレイアウトにするためには、
背景のオレンジ=親要素
中のブロック=子要素
として作る必要があります。

なので、HTMLでもそのような記述にしてあげます。

<section>
    <div class="box1">
    <h1>ボックス1</h1>
    <p>ボックス1です</p>
</section>

/*ここからCSS*/
section {
    background-color: orange;
    width: 100%;
    height: 500px;
}

.box1 {
    background-color: white;
    width: 900px;
    padding: 40px;
    text-align: center;
}

するとこうなりました。

今、子要素のボックスは、親要素の左上に位置しています。

STEP2: positionプロパティで移動させる

これを親要素の上下左右中央の位置に持っていきたいので、positionプロパティで移動させてあげます。

section {
    position: relative;
}

.box1 {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

親要素のsectionにposition:relative;
子要素の.box1にposition:absolute; を指定しました。

relativeは「相対位置に配置する」、absoluteは「絶対位置に配置する」を意味します。

absoluteは、親要素がstatic以外に指定されている場合、親要素の左上角に配置されるようになっています。親要素にposition指定がない場合はウインドウの左上に移動します。

つまり、親要素にrelativeを指定するのは、子要素を親要素を基準にして移動させるための布石ということですね。

ここからは、「子要素を親要素からどれくらいの位置に移動したいか」を決めてあげます。

今回は親要素の上下左右中央に移動させたいので、そのように指定します。

.box1 {
    positon: absolute;
    top: 50%
    left: 50%;
}

top:50%で、親要素のトップから半分の位置に、left: 50%で親要素のレフトから50％の位置に指定、となります。

するとこうなりました。

謎の方向に行きましたね。ここでめちゃくちゃ迷いました。

解決方法としては、以下の指定を追加してあげます。

.box1 {
    transform: translate(-50%,-50%);
}

transform: translate(-50%,-50%); を加えました。

すると、

綺麗に真ん中に子要素が収まりました。

…恥ずかしいことに、なぜこうなるのかいまだにわかりません。。（わかる方コメントください…！）

ただ、一つの解決方法としては使えるので記録として残しておきます。

まとめ

いやー、プログラミング難しいですね…。

プロパティの指定もいろいろあって、思い通りに要素を動かすのはなかなか大変です。

駆け足ですが、おわりっ！