【プログラミング独学14日目】z-index・box-sizing・calc・要素に影付け・背景画像の設定・floatプロパティ

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。今日で2週間毎日学習を続けました!

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学14日目】学んだこと

今日もCSSの続きをやりました。

昨日の記事で書いたように、ここ数日プログラミング学習にやる気が無く・・・。ただこれが夜子どもを寝かしつけた後に時間を取っていたからだと思い(眠くてやる気が出ない)、今日は午前中に時間を取ってみました。すると予想通りで、集中でき学習も捗りました!そしてCSSの基礎文法を終えることができました。全33レッスンあったので時間がかかりましたが、無事終えられて良かったです。CSSのレッスン自体はまだまだ続くのですが。

①z-indexで要素の重なり順を変える

要素の位置を指定するpositionプロパティには、以下のような種類があります。

position : static ;

position : relative ;

position : absolute ;

z-indexはpositionがstatic以外のときに使えるプロパティで、例えば以下のような記述があったとします。

<body>
 <div class="box1">BOX1</div>
</body>
.box1 {
 position : absolute ;
 top : 0 ;
 bottom : 0 ;
}

.box2 {
 position : absolute ;
 top : 30px ;
 bottom : 30px ;
}

.box3 {
 position : absolute ;
 top : 60px ;
 bottom : 60px ;
}

position : absoluteのとき要素がどのように表示されるかは、その親要素のpositionがstaticかそれ以外かで決まるんでしたよね。昨日のアウトプットに詳しく書いています。

例えばbox1では親要素が<body>となっており、その<body>に対してpositionは設定されていません。つまり親要素<body>のpositionはstaticです。ゆえにBOX1はウィンドウの左上を起点にして表示されます。今回topもleftも0pxとしているため、ウィンドウの左上に寄せた形で表示されます。

またBOX2、BOX3はBOX1から少しずつズレるような位置を指定しているので、BOX1の上にBOX2、BOX2の上にBOX3が重なるような形で表示されます。これは後から書いた要素が上から重なって表示されるというデフォルトの設定があるからです。

これを例えば一番上にBOX1にしたいなど、重なり順を変えたいとき。HTMLやCSSを書き直しても良いですが、簡単に重なり順を変える方法があります。それがz-indexです。

.box1 {
 position : absolute ;
 top : 0 ;
 left : 0 ;
 z-index : 3 ;
}

.box2 {
 position : absolute ;
 top : 30px ;
 left : 30px ;
 z-index : 2 ;
}

.box3 {
 position : absolute ;
 top : 60px ;
 left : 60px ;
 z-index : 1 ;
}

上のようにzz-indexを書き加えることで、BOX1の下にBOX2、BOX2の下にBOX3という順で重なって表示されます。z-indexの数字は大きい方が上に表示されます

z-indexはメニューやウィンドウをページの前面に表示させたり、写真の上に文字を重ねたりするときに便利なプロパティです。なおposition : absolute ; のみ記述し、topやleftを指定しなかった場合、その要素が本来表示されるはずだった位置に表示されます。またスクロールがされないようなページであれば、position : fixed ; と記述しても同じように表示されます。ただCSSの意味を考えるとabsoluteで記述する方が良いでしょう。

②box-sizingでborderやpaddingまで含めてスタイリングする

ボックスモデルでは、widthやheightはコンテンツの幅と高さを指定するためのものです。そこにpaddingやborder分の幅は含まれていません。しかし例えば以下のような記述があったとしましょう。

.box2 {
 width : 100px ;
 height : 100px ;
 border : 10px solid blue ;
}

上のような場合、borderの幅10px分があるため、box1とbox3の並びからはみ出たように表示されてしまいます。borderの幅分を考慮して計算し直しても良いのですが、box-sizingプロパティを使えば簡単に揃えることができます。

.box2 {
 width : 100px ;
 height : 100px ;
 border : 10px solid blue ;
 box-sizing : border-box ;
}

box-sizingプロパティを使用することで、「paddingやborderを含めて100px」という指定になり、box1やbox3からはみ出たような表示にならず揃わせることができます。

③calcで計算を行い結果通り表示させる

例えばページに3つのボックスを表示させたいとして、ユーザーがブラウザの幅を変更してもそれぞれのボックスの間を20pxで維持させかつボックスのサイズも均等にしたいとしましょう。ボックスの幅をxとすると、以下のような式が成り立ちます。

3x + ( 20px + 20px ) =100%

この式によりx=( 100% - 40px )/3 ということがわかります。ただ単位がそれぞれ異なるので値を計算することができませんね。このようなときに使えるのがcalcです。以下のように指定すれば、上の式の結果をそのまま反映させることができます。

width : calc((100% - 40px) / 3) ;

上の記述を適用させたい部分に書くだけです。なおこのcalcを使うときのルールは以下の2点です。

  • かけ算の×は「*」、割り算の÷は「/」と記述する
  • 四則演算の前後には半角空白を入れる

④ボックスモデルに影を付けるbox-shadowプロパティ

box-shadowプロパティを使えば、ボックスモデルに影を付けることができます。

box-shadow : 10px 5px rgba( 0 , 0 , 0 , 0.5 ) ;

上のように記述すると、x方向(水平方向)に10px、y方向(垂直方向)に5pxの影が付きます。

box-shadow : 10px 5px 3px rgba( 0 , 0 , 0 , 0.5 ) ;

上のように記述すると、x方向(水平方向)に10px、y方向(垂直方向)に5px、ぼかし具合が3pxの影が付きます。

box-shadow : 10px 5px 3px. 10px rgba( 0 , 0 , 0 , 0.5 ) ;

上のように記述すると、x方向(水平方向)に10px、y方向(垂直方向)に5px、ぼかし具合が3px、10px拡大された影が付きます。

⑤テキストに影を付けるtext-shadowプロパティ

box-shadowプロパティと同じ方法で、テキストにも影を付けることができます。

text-shadow : 10px 5px 3px rgba( 0 , 0 , 0 , 0.5 ) ;

なおbox-shadowプロパティであった影の拡大はテキストでは適用されません。実際に記述しても反映されませんでした。

⑥背景画像の設定

background-image : url(../img/header.png) ;

上のように記述すると、imgフォルダ内のheader.pngという画像を背景画像として表示させることができます。なおデフォルトでは、ユーザーがブラウザを伸縮させたときブラウザの左上を起点として伸縮されます。画像の中心に起点を置きながら伸縮させたいときは以下のように書き加えます。

background-image : url(../img/header.png) ;
background-position : center ;

画像の縦横比を維持したままなるべく大きく表示させたい場合は、以下のように書き加えます。

background-image : url(../img/header.png) ;
background-position : center ;
background-size : cover ;

なお背景画像のスタイリング時も一括指定プロパティが使えます。このとき1つだけルールがあり、background-positionとbackground-sizeはまとめて以下のように記述しなければいけないというルールです。それ以外の部分は順不同で、省略してもOKです。

background : center/cover url(../img/header.png) ;

⑦floatプロパティで画像を端に寄せる

img {
 float : right ;
}

上のように記述すると画像は右側に寄せて表示され、テキストがその周りを回り込めるように定義されます。floatで指定された要素は通常の配置から外れます。そしてテキストなどその後に続く要素は、画像が元々無かったかのような位置に表示されます。

⑧clearプロパティでテキストの表示位置を指定する

例えばfloatプロパティで右側表示された画像に対して、それに適応した形で次のh2を表示させる場合は以下のような記述になります。

h2 {
 cleat : right ;
}

floatプロパティで左側に表示された画像の場合は、以下のような記述になります。

img {
 float : left ;
}

h2 {
 clear : right ;
}

なお例えば画像が2つあり、その両方に対して適応された形でh2を表示させたい場合は以下のようになります。

h2 {
 clear : both ;
}

なおclearプロパティが使えるのはblock要素のみです

【プログラミング独学14日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

backgroundの一括指定プロパティで-size/-positionの順じゃだめなの?

backgroundの一括指定プロパティで-size/-positionの順じゃだめなの?

backgroundの一括指定プロパティでは、background-positionとbackground-sizeはまとめて記載しなければいけないというルールがあります。またその順はbackground-position/background-sizeとされていましたが、逆ではだめなのか?と思いました。他の方も同じように思ったようで、質問されていた回答を見ると逆ではだめということがわかりました。background-position/background-sizeの順を守った上で、他の記述は順不同かつ省略してもOKとのことです。

FREELANCE,WORDPRESS/WEB

Posted by miho