( ~ᐛ )~web制作勉強記録②~( ᐖ~ )

勉強記録①から10日以上も経っちゃいました💦

ブログ2個分勉強したのにALISに記録せずに溜め込んでます…( 、ᐛ )、

アウトプットできてませんっ( 、ᐛ )、💦

今回勉強した内容は

1.文と文の上下の間隔

2.paddingとborderを含んだコンテンツの横幅と高さの変更

です٩( ᐖ )۶

1.文と文の上下の間隔

ざっと図で説明します( ᐛ )

こんな風なテキストがあるとします。

この二文はこのように構成されています。

ﾓﾌﾓﾌ…

ちなみに行の高さ(図では青色の部分)は「メイリオ」等の主要な日本語フォントではデフォルトでフォントサイズの1.5倍の大きさになります。

図でのフォントサイズは14pxで、何も設定を追加していない為、行の高さは21pxとなっています。

行の高さはcssでline-heightを使用する事で変更が可能です。

line-heightはフォントサイズを元に行の高さを変更します。

例

先程の「あざらし」と「もふもふ」が<p>であるとすると…

p{
line-height:3;
}

これによって、

行の高さ  ＝  フォントサイズ  ×  3

行の高さ  ＝  14px  ×  3＝  42px

となります。

2.paddingとborderを含んだコンテンツの横幅と高さの変更

(タイトル長い…( 、ᐛ )、)

Paddingについては勉強記録①で書きましたが、borderはまだなので説明しようと思います…ちょっと勉強記録①で使用した図を召喚します٩( ᐖ )۶ﾂｶｲﾏﾜｼｯ

borderが無い！

…( 、ᐛ )、

…border入れました

(使い回しできなかった…( 、ᐛ )、)

ボーダーはpaddingの外側をそってつくられます( ᐛ )

borderを追加すると(設定内容にもよりますが)実際にはこんな風に表示されます( ᐛ )٩( ᐖ )

borderについては終わりです٩( ᐖ )۶

ここからpaddingとborderを含めてボックスの横幅と高さを変更する方法についてです( ᐛ )

これらをまとめて変更するにはcssの「box- sizing」を使用します。

標準でのwidthとheightは

width:コンテンツの横幅;

height:コンテンツの高さ;

この様になりますが…

widthとheightの後に「box-sizing:border-box;」を入れると…

width:paddingとborderを含むコンテンツの横幅

height:paddingとborderを含むコンテンツの高さ

box-sizing:border-box;

この様になります

( ᐛ )

ちなみにbox-sizingにはborder-box以外に

content-box;

paddingとborderを含まない(標準ではこれが適用される)

 

inherit;

親要素を引き継ぐ(例えば、親がbox-sizing:border-box;を適用していた場合、border-box;が適用される)

今回はこれで以上です٩( ᐖ )۶

閲覧ありがとうございました(っ*´ω｀*c)