english

ブログ

2018.06.26

ここを乗り越えれば楽になる!ポジションレイアウト編 ー コーディング / position / CSS初心者 ―
ここを乗り越えれば楽になる!ポジションレイアウト編 ー コーディング / position / CSS初心者 ―

ホームページ制作関連

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

「コーディング?HTML?CSS? え?なにそれ?」
なーんにも分からない、知識ゼロの私が実際に経験した内容を基に書いていきたいと思います。

前回は私が行っていた勉強法をお話させていただきましたが、
今回はもう少し踏み込んで
「調べても意味がわからない・・・」
「いまいちピンとこない」
「なんでできないの~!?」
と悩んだCSSのポジションレイアウトについて書いていきます。

まず、ポジションレイアウトについて
ポジションレイアウトはpx単位の細かい配置が可能な縦方向の配置が得意なレイアウトとされています。
ただし、すべての数値を自分で把握しておく必要があるんです。
後程詳しく書いていきますが、この点を甘く見ていると痛い目を見ます・・。

positionプロパティ:配置方法を指定した後に細かい位置を指定

<初期値>
通常配置:static
※ 位置設定無効(top,right,bottom,leftプロパティは適用されません)

<値>
static:通常配置。初期値(位置設定無効)
relative:相対配置。通常配置を基にtop,right,bottom,leftで位置指定
※続く兄弟要素は前の要素が表示される予定だったスペースを保持しつつ配置される
absolute:絶対配置。位置設定が可能な親ボックスの左上orウィンドウ全体の左上を基点として位置指定
※続く兄弟要素は前の要素が表示される予定だったスペースを保持しないで配置される
fixed:絶対配置の固定位置。ウィンドウサイズが変わってもスクロールしても固定の位置に配置
※続く兄弟要素は前の要素が表示される予定だったスペースを保持しないで配置される

なんとなく書いてあることはわかるけど、、、前の要素?なんだろう
どことなく不安になっちゃう。
私自身「なぜか不安。できる気がしない!!」という気持ちでいっぱいでした。

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

ソースはこちら(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の位置設定が可能な親ボックスってなに?

A:relativeがpositionプロパティに指定されているボックス

位置設定が可能な親ボックスは、positionプロパティにstatic以外の値が指定されているということです。
基本的にrelativeだと思ってもらえばOKです。
該当の親ボックスがなければウィンドウ全体の左上が基準位置となりますが、そういう使い方はなかなかしないので、絶対ルールとして親ボックスにはrelative指定を忘れずにしておけば安心。

 

不安その2
基準位置ってどこ?

A. 親ボックスの左上のカド

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

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

 

不安その3
位置指定って基準位置からだと配置したいパーツのどこまでの距離なの?

A. 一番近い辺の位置
例えばtopなら配置したいパーツの上の辺

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

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

 

不安その4
パーツを真ん中に置きたいけど、どう指定したらいいの?

A. 基本的に
( 親ボックスの幅 ― 置きたいパーツの幅 )÷ 2

冒頭で「すべての数値を自分で把握しておく必要があるんです。」と私が言っていたことを覚えているでしょうか。
そう、私的最大の難関がここでした。
なんとなく親ボックスの半分の幅を指定したい気持ちになってしまうんです。。
もちろん半分の幅を指定しても真ん中に置かれることはないので「やっちゃったー」となります(汗)

不安その3でお話した、位置の話を合わせるとなるほど!っとなってもらえるのではないだろうかと思います。
位置指定は一番近い辺が指定されます。なので置きたいパーツの大きさを加味して計算をしないといけないのです。

私の場合は、紙にラフ書きをして先に計算してしまいます。
人によって方法はいろいろあるかと思いますが、視覚的にイメージが掴めてトータル作業時間も一番かからないので、私には合っていると思っています。
いろいろ試して自分に合う方法をみつけてみてくださいね!

 

おわりに
絶対ルール
・親ボックスの指定はrelative
・最初に計算をしてからコーディングする

最初は「わけがわからない!!!」となったpositionレイアウトも分からないところがなくなれば、おのずと使えるようになってきます。
実際のコーディングでもpositionレイアウトは多く登場するので、乗り越えなければならない壁だとも思っています。
ほぼabsoluteプロパティの話になってしまいましたが、「わかんないよーどうしよう・・」と思う方の参考になれば幸いです。

いかがだったでしょうか?
ではでは。

お問い合わせ

メールフォームからの
お問い合わせ