【プログラミング独学11日目】border・padding・marginのスタイリング

2022-03-26FREELANCE,WORDPRESS/WEB

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

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

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

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

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

今日もCSSの続きをやりました。ここ数日進みが悪いというか、以前ほどやる気が続きません・・・。ただ必ず続けていきます。今日はボックスモデルのpaddingやmarginの部分で、自分のこのサイトなどCSSを今までいじってきていたのですんなりわかる部分でした。

①borderのスタイリング

コンテンツの周りに枠線を付けたいときに使用するborderプロパティ。スタイリングは以下のように行います。

border-width : 2px ;
border-style : solid ;
border-color : blue ;

「border-width」で線の幅、「border-style」で線の種類、「border-color」で線の色を指定します。これらは以下のように1つにまとめて記述することもできます。

border : 2px solid blue ;

なお「border-style」にはsolid（実線）、dashed（点線）以外にもいくつか種類があります。MDNに載っているので確認してみましょう。

②特定方向だけにborderを付けたいとき

コンテンツの周り一周ではなく、例えばコンテンツの上下だけに線を付けたいときは、以下のようなCSSになります。

border-top : 2px solid blue ;
border-bottom : 2px solid blue ;

線がいらない場合は「none」と記述します。そのため例えば下だけ線を無くしたい場合は、上と左右のborderを指定するのではなく以下のように記述すると手間が省けます。

border : 2px solid blue ;
border-bottom : none ;

③領域の角を丸めたいとき

領域の角を丸めたいときは以下のようなCSSになります。

border-radius : 10px ;

これは半径10pxの円で四つ角を丸めるという意味です。「border-」となっていますが、枠線を付けない場合もこのように書けばOKです。枠線を付けた上でその枠線を丸めたい場合は、borderプロパティで指定した上でborder-radiusの記述をします。

④paddingのスタイリング

paddingはborderの内側の領域です。borderと同じく、-topや-bottomでそれぞれスタイルを指定することができます。また一括指定プロパティであるため以下のように1つにまとめて記述することもできます。

padding : 10px 20px 30px 40px ;

ただ注意したいのは、今までは一括指定プロパティでは要素の指定が順不同でしたが、paddingでは記載する値の数と書く順番にルールがあるという点です。上のように記述した場合、順番は「上・右・下・左」と時計回りに指定することになります。つまりコンテンツの上に10px、右に20px、下に30px、左に40pxという余白を持たせたことになります。

padding : 10px 20px 30px ;

また上のように3つ記述した場合は、「上・左右・下」を指定したことになり、コンテンツの上に10px、左右に20pxずつ、下に30pxの余白が設けられます。

padding : 10px 20px ;

上のように2つ記述した場合は、「上下・左右」を指定したことになり、コンテンツの上下に10pxずつ、左右に20pxずつの余白が設けられます。

padding : 10px ;

上のように2つ記述した場合は、「上下左右」を指定したことになり、コンテンツの上下左右に10pxずつ余白が設けられます。

⑤marginのスタイリング

marginはborderの外側に設けられる余白です。marginもborderやpaddingと同様、一括指定プロパティであり1つにまとめて記述することができます。またpaddingと同様記述する数と順番によって意味が変わってくるため注意が必要です。

margin-left : auto ;

また上のように記述した場合、余白が左に設けられ右寄りの表示になります。

margin-left : auto ;
margin-right : auto ;

上のように-leftと-rightと併せて記述した場合、左右両方に余白が均等に設けられ、結果的に要素が中央揃えで表示されます、この記述はよく使われます。

⑥marginのそうさい

例えば上下に並ぶbox1、box2に以下のようにスタイルを指定した場合。

.box1 {
margin-bottom : 20px ;
}

.box2 {
margin-top : 10px ;
}

box1とbox2の間には合わせて30pxの余白ができそうですが、実際にできるのは20pxです。これは垂直方向にmarginの指定が重なったとき、値の小さな方は大きな方に吸収され消えてしまうからで、これを「marginのそうさい」と呼びます。

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

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

width＝横幅じゃないの？

ボックスモデル全体の説明で「width」が出てきたときは、テキストなどコンテンツの横幅として機能していました。ただborderプロパティで出てきたときは横幅というより太さ。もやもやしたので英和辞書を引くと、以下のように書かれていました。

「横幅」と限定しすぎると余計ややこしくなるので、「幅」と寛大に構えていればborderでもすんなり納得できました。深く考えすぎない方が良いですね。

<center>で中央揃えじゃだめなの？

margin-leftとmargin-rightをautoとすることで中央揃えで表示され、この記述はよく使用されるとのことでした。ただ記述が面倒なので、HTMLの方で<center>で囲んじゃえば良いんじゃないの？と思いました。

そこで実際に<center>で囲んでみると、領域だけでなくその中のテキストまですべて中央揃えで表示されました。テキストは領域内左揃えで残しつつ、ボックスモデルのみ中央揃えにしたいときにmargin-leftや-rightのauto記述を使うのですね。すっきりしました。

marginのそうさいは垂直方向のみ？

marginのそうさいの説明で、「垂直方向にmarginの指定が重なると〜」と言っていたので、「水平方向ではそうさいが起こらないってこと？」と思いました。ただ考えてみたらボックスモデルは全体で1つの塊であり、横並びになることって無いはず。気になり調べていると、「インラインボックス」というものであればボックスが横並びになるようなので、そのときにmarginのそうさいが水平方向でも起こるのか気になるところです。先生に質問しましたが、ちょうど次のレッスンがインラインボックスに関するもののようなので、明日には答えが出るかな？と思っています。