記事の内容
padding margin borderとは？設定の仕方を分かり易く！
paddingとは、marginとは余白のこと
余白はどこに存在するのか
文字を書いたり画像を取り込んだりする領域のことをブロックと呼びます、下の画像の青い部分の所がブロックを表しています。
青いブロックの領域の上下左右の緑の領域を「padding(パディング)」と言います
ブロックの一番外側の濃いオレンジの上下左右の領域を「margin(マージン)」と言います。
このパディングとマージンは余白なのでブラウザには表示はされません。
パディングとマージンの調べ方
デベロッパーツールを使う
ＨＴＭＬやＣＳＳを記述する上ではこのデベロッパーツールを覚えておいた方がいいです。
場所は画面右上の点が上下に3つ並んだところをクリックして「その他のツール」を選択し「デベロッパーツール」をクリックします。
ショートカットキー「Shift」＋「Ctrl」＋「I」もあります、もしくは記事の画面上で右クリックして「検証」をクリックしても出てきます。
左が記事の画面で右側にデベロッパーツールが出てきます、デベロッパーツールの上側がHTML、下側がCSSをブラウザが解釈したところです。
上は「Elements」下は「Styles」に合わせれば確認することができます。
探したい所をクリックしたらボックスについての情報が出てきます。
パディングとマージンの設定の仕方
パディングとマージンも設定方法は一緒で上下左右にピクセル数を設定していきます。
上は(top)下は(bottom)左は(left)右は(right)で表し
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
このように表します。
記述を省略する
また表記の要領も数字が同じであれば省略して表すことができます。
例えば「margin: 10px;」この場合は上下左右とも「10px」を表します。
このように数値が一つの場合は「上下左右」
数値が二つの場合は「上下」「左右」を表します。
数値が三つの場合は「上」「左右」「下」を
数値が四つの場合は「上」「右」「下」「左」時計回りになるので注意しておきましょう。
他のブロックとの間隔を考慮して数値を設定しましょう。
borderとは？
パディングとマージンの間に「border(ボーダー)」という領域があります。
境界線を表すプロパティです
ボーダープロパティは、要素に外枠を表示するときに使用します。
ボーダーのスタイル・大きさ・色をまとめて指定できます。
同一の線の太さで表示させる場合
border-top: 10px;
border-bottom: 10px;
border-left: 10px;
border-right: 10px;
border style: solid;
border-color: red; これを説明すると線の太さは上下左右10ピクセルで、線は実線、色は赤になります、10ピクセルの幅の赤の線で囲まれるとなります。
上下左右が同じ数値ならまとめることができるので省略して書くと
border: 10px solid red; と記述することができます。
境界線が10ピクセルの幅の実線で色が赤になります。
border境界線が出ない場合
下の記述のように上下左右の線の太さを変える場合には下のような記述では表示されなくなります。
上下左右の線の太さを変える場合
Widthプロパティを使う
上下左右の線の太さを変えたい時には「Width」を使用して下のように記述します。
このように太さの違う線になります。
線の太さや種類を変える場合は「Width」を
上のようにborder-top: 〇px; など同一のの種類を指定する場合には向きますが、線の太さを上下左右帰る場合には「Width」を使用しましょう。
上の記述では線が表示されません、注意が必要です。
その他にも便利なプロパティ
外枠の線の種類を変更する border-style=" "
ＣＳＳのborder-styleプロパティは、要素の境界線上下左右四辺のスタイルを設定するためのプロパティです。
none
ボーダーは表示されず、太さも0になります。
background-imageを設定している場合を除き表のセルなで別に指定していてもborder-widthの値は「０」になります。
他に競合する境界線が設定されている場合はそちらが表示されます。
hidden
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid
1本の直線(実線)で表示されます。
double
2本の直線(実線)で表示されます、幅の合計はborder-widthで定義したピクセル数になります。
dashed
短く角が四角い連続した破線で表示されます。
dotted
連続した丸い点を点線で表示します。
groove
凹んだように見える線で表示されます。
ridge
出っ張ったように立体的に隆起した線で表示されます。
inset
ボックスが埋め込まれて見えるような境界線
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset
ボックスが出っ張ったように見える境界線
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
padding margin borderとは？設定の仕方を分かり易く！
ここまでお付き合いいただきありがとうございます。
これからも更新していきますのでよろしくお願いします。
