2018年3月から制作部に仲間入りした、Web制作1年生です。

「コーディング？HTML？CSS？　え？なにそれ？」

なーんにも分からない、知識ゼロの私が実際に経験した内容を基に書いていきたいと思います。

前回は私が行っていた勉強法をお話させていただきましたが、今回はもう少し踏み込んで

「調べても意味がわからない・・・」
「いまいちピンとこない」
「なんでできないの～！？」

と悩んだCSSのポジションレイアウトについて書いていきます。

ポジションレイアウト

ポジションレイアウトはｐｘ単位の細かい配置が可能な縦方向の配置が得意なレイアウトとされています。

ただし、すべての数値を自分で把握しておく必要があるんです。
後程詳しく書いていきますが、この点を甘く見ていると痛い目を見ます・・。

なんとなく書いてあることはわかるけど、、、前の要素？なんだろう。どことなく不安になっちゃう。

私自身「なぜか不安。できる気がしない！！」という気持ちでいっぱいでした。

今回、説明用にポジションレイアウトでスマートフォンを作成しました。

ソース

ソースはこちら（CSS）

@charset "UTF-8";

/*全体のスタイル設定*/
.pc {
position: relative; /*相対配置：基準位置にする*/
height: 425px; /*高さ*/
width: 550px; /*幅*/
background: #ffb6c1;
margin: 0 auto;
}

/*スマホ液晶外枠スタイル*/
.pc_head {
position: absolute; /*.pcの左上からの絶対配置*/
height: 320px; /*高さ*/
width: 170px; /*幅*/
left: 190px; /*左から190px*/
top: 50px; /*上から50px*/
background-color: #000;
border: 2px solid #a9a9a9;
border-radius: 15px;
}

/*スマホ液晶内側スタイル用コンテナ*/
.display_outer {
position: relative; /*相対配置：基準位置にする*/
}

/*スマホ液晶内側スタイル*/
.display_inner {
position: absolute; /*.display_outerの左上からの絶対配置*/
height: 230px; /*高さ*/
width: 150px; /*幅*/
left: 10px; /*左から10px*/
top: 40px; /*上から40px*/
background: url("logo.png") no-repeat center;
background-color: #ddd;
}

/*スマホ液晶内カメラスタイル*/
.camera {
position: absolute; /*.display_outerの左上からの絶対配置*/
height: 8px; /*高さ*/
width: 8px; /*幅*/
left: 81px; /*左から81px*/
top: 10px; /*上から10px*/
background-color: #808080;
border-radius: 8px;
}

/*スマホ液晶内カメラスタイル*/
.camera2 {
position: absolute; /*.display_outerの左上からの絶対配置*/
height: 5px; /*高さ*/
width: 5px; /*幅*/
left: 63px; /*左から63px*/
top: 22px; /*上から22px*/
background-color: #808080;
border-radius: 5px;
}

/*スマホ液晶内カメラスタイル*/
.camera3 {
position: absolute; /*.display_outerの左上からの絶対配置*/
height: 3px; /*高さ*/
width: 25px; /*幅*/
left: 73px; /*左から73px*/
top: 23px; /*上から23px*/
background-color: #808080;
border-radius: 3px;
}

/*スマホ液晶内ボタンスタイル*/
.button {
position: absolute; /*.display_outerの左上からの絶対配置*/
height: 26px; /*高さ*/
width: 26px; /*幅*/
left: 72px; /*左から72px*/
top: 280px; /*上から280px*/
background-color: #808080;
border-radius: 26px;
}

アクシスのロゴ以外はすべてCSSで作成しています。

これから不安に思いがちだった部分をピックアップしていきます。

不安要素

不安その1

• absoluteの位置設定が可能な親ボックスってなに？

位置設定が可能な親ボックスは、positionプロパティにstatic以外の値が指定されているということです。

基本的にrelativeだと思ってもらえばOKです。

該当の親ボックスがなければウィンドウ全体の左上が基準位置となりますが、そういう使い方はなかなかしないので、絶対ルールとして親ボックスにはrelative指定を忘れずにしておけば安心。

不安その2

• 基準位置ってどこ？

文章通りなんだけれど、モヤっとしがちです。

この★の位置です。ここから、計算をしてtop,right,bottom,leftで位置指定すればいいんです。

不安その3

• 位置指定って基準位置からだと配置したいパーツのどこまでの距離なの？

例えばtopなら配置したいパーツの上の辺。

ここもどうなるんだろうと悩んだところでした。

上から50pxの位置の指定をした場合、黄色の線の間が50pxとなって表示されます。

不安その4

• パーツを真ん中に置きたいけど、どう指定したらいいの？

冒頭で「すべての数値を自分で把握しておく必要があるんです。」と私が言っていたことを覚えているでしょうか。

そう、私的最大の難関がここでした。なんとなく親ボックスの半分の幅を指定したい気持ちになってしまうんです。。

もちろん半分の幅を指定しても真ん中に置かれることはないので「やっちゃったー」となります（汗）

不安その３でお話した、位置の話を合わせるとなるほど！っとなってもらえるのではないだろうかと思います。

位置指定は一番近い辺が指定されます。なので置きたいパーツの大きさを加味して計算をしないといけないのです。

私の場合は、紙にラフ書きをして先に計算してしまいます。

人によって方法はいろいろあるかと思いますが、視覚的にイメージが掴めてトータル作業時間も一番かからないので、私には合っていると思っています。

いろいろ試して自分に合う方法をみつけてみてくださいね！

おわりに

最初は「わけがわからない！！！」となったpositionレイアウトも分からないところがなくなれば、おのずと使えるようになってきます。

実際のコーディングでもpositionレイアウトは多く登場するので、乗り越えなければならない壁だとも思っています。

ほぼabsoluteプロパティの話になってしまいましたが、「わかんないよーどうしよう・・」と思う方の参考になれば幸いです。