Zenn
🙆‍♀️

CSSのプロパティまとめ-ボックスモデル&基礎編

2022/11/29に公開
CSS
初心者
入門
tech

頭の整理のために、CSSにはどのようなプロパティがあるのかということをまとめました。

割と詳しく説明しますので、CSSの理解に不安がある人は参考になるはずです。

ボックスモデル

まず、ボックスモデルというものを解説していきます。

ボックスモデルとは、「HTMLの要素は全て四角のボックスの中に納めれらている」という考え方になります。

まだよく分からないと思うので、詳しく説明していきます。

ボックスモデルの構成要素

ボックスを構成する要素として、次の4つがあります。

  1. コンテンツ
  2. border
  3. padding
  4. margin

これら全てをそれぞれ詳しく解説していきます。

コンテンツ

コンテンツとは、そのままの意味になります。

例えば、pタグの中に文章が入ってる場合は、その文章がコンテンツになります。

人間で例えると、内臓などになります。

border

ボーダーは、コンテンツの境界線になります。

人間で例えると、皮になります。

何か境界線上にスタイリングをしたい時に使います。

padding

paddingは、コンテンツとborderの間に存在する領域になります。

人間で例えると、脂肪になります。

borderとの間隔を空けたい時に使います。

margin

marginは、他のボックスとの間に存在する領域になります。

人間で例えると、ソーシャルディスタンスになります。

他のボックスと間隔を空けたい時に使います。

ボックスの種類

そして、ボックスの種類は主に以下の2つがあります。

  1. インラインボックス
  2. ブロックボックス

こちらもそれぞれ解説していきます。

ブロックボックス

ブロックボックスとは、その名のとおりブロックのように存在するボックスになります。

特徴としては、以下のようなことが挙げられます。

  • 縦幅と横幅を指定できる
  • 新しいボックスは改行されて表示される
  • marginにより、他のボックスとの間隔を空けることができる

インラインボックス

インラインボックスは、インラインに表示されるボックスになります。

こちらは以下のような特徴があります。

  • ボックスは改行されない
  • 幅を指定できない
  • mrarginやpaddingを指定しても、インライン上以外のボックスと間隔を空けることはできない

インラインブロックボックス

また、他にもインラインブロックボックスというものがあります。

こちらは、ブロックボックとインラインボックス、両方の性質を合わせ持ちます♤

具体的には、以下のような特徴があります。

  • 改行はされない
  • 幅を指定できる
  • paddingやmarginで、他のボックスからの間隔を作ることができる

ボックスのサイズやプロパティの指定方法

先ほどは、ボックスの構成要素を説明してきました。

次は具体的に、どのようにボックスのプロパティを指定するのかということを解説していきます。

ボックスのサイズ

ブロックボックスなどは幅を指定することができますが、この幅は少し奇妙に見えるかもしれないです。

というのも、幅を指定した場合、その幅にはpaddingやborderの値は含まれないからです。

例えは、以下のように指定した場合、コンテンツ自体の横幅は100pxですが、全体としては120や140pxあるようになります。

.block_box{
  width: 100px;
  margin: 10px;
  border: 10px solid black;
  padding: 10px;
}

そしてここは、box-sizingというプロパティを使って制御することができます。

例えば、border-boxを指定した場合は、コンテンツ自体の横幅は60pxになります。

marginの指定方法

次に、marginについて解説していきます。

このプロパティには負の数値も設定することができ、その場合は他のボックスと重なり合わせることができます。

また、マージンの相殺という概念があり、ブロックボックスのマージンが他のボックスのマージンと重なり合う時は、数値の大きい方だけが適用されます。

ただ、片方が負の数値の場合の時は、その合計値が適用されます。

paddingの指定方法

paddingで説明すべきことは、特にないです。

こちらのプロパティは、marginと違って正の値しか設定できないです。

borderの指定方法

borderに関するプロパティには、様々なものがあります。

borderはコンテンツの周りに4つあり、そのそれぞれに対して幅や色、スタイルを指定することができます。

ここで全ては紹介しませんが、以下のようなプロパティがあります。

  • border-top-width
  • border-top
  • border-width
  • border-style
  • border-color
  • border

borderを細かく指定する場合は、これらのプロパティを駆使してスタイリングしていくことになります。

逆に単純なborderを作る場合は、borderプロパティというショートハンドを使ってスタイリングすればOKです。

その他の基本的なプロパティ

次に、CSSの基本的なプロパティについて解説していきます。

background

まず、CSSの背景に関するプロパティについて解説していきます。

背景に関するCSSは、コンテンツとpaddingの領域に内を対象にします。

背景色

まず、background-colorで背景色を指定することができます。

こちらは詳しい説明は不要かと思います。

背景画像

背景には、background-imageを使って、画像も設定することができます。

画像がボックスのサイズよりも小さい場合は、何度も繰り返して表示されます。

ただ、この繰り返しはbackground-repeatで制御することができます。

プロパティ値には、以下の値を設定できます。

プロパティ値 説明
repeat xとy方向に繰り返される(デフォルト)
no-repeat 繰り返しはされない
repeat-x x方向にだけ繰り返される
repeat-y y方向にだけ繰り返される

また、背景画像をカンマ区切りで複数選択することも可能です。

その場合、背景に関するプロパティもカンマ区切りで複数設定することが可能です。

背景画像のサイズ

背景画像のサイズは、background-sizeプロパティを使用して調整することができます。

主な指定方法は、次のとおりです。

プロパティ値 説明
auto 自動的に調整される(デフォルト)
contain 縦横比を保ったまま、背景画像が収まるサイズに調整される
cover 縦横比を保ったまま、背景画像が領域をすべてカバーするサイズに調整される
幅,高さ 幅と高さをpxや%を使って直接指定することができる

autoだと縦横比がズレてしまうことがあるので、coverかcontainを使用するのが一般的です。

背景画像の位置

background-positionプロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。

このプロパティでは、ボックスの左上隅を(0, 0)として扱います。

それぞれ2つの値は、x軸とy軸の値を示します。

デフォルトでは、(0, 0)が設定されています。

これらは、pxや%で指定ができます。

また、以下のような指定も可能です。

  • top 上寄せ
  • bottom 下寄せ
  • left 左寄せ
  • right 右寄せ
  • center 中央寄せ

グラデーション

背景色には、background-imageを使って、グラデーションを指定することもできます。

線形グラデーション(linear gradient)と、放射状グラデーション(radial gradinet)を指定できます。

また、グラデーションの角度や幅、色なども細かく指定することができます。

例えば、以下のような指定が可能です。

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

ボックスからはみ出した要素の振る舞い

ボックスからはみ出した要素は、overflowプロパティを使って振る舞いを指定することができます。

具体的には、以下のようなプロパティ値があります。

プロパティ値 説明
visible 表示される(デフォルト)
hidden 表示されない
scroll スクロールが可能になり表示される

CSSは、可能な限りコンテンツを隠さないことが推奨されます。

コンテンツを隠してしまうと、通常は問題となりうるデータ損失が発生するからです。

例えば、文章の意味が取れなくなる場合がありますし、ボタンが押せなくなるかもしれないです。

ボックスの幅を指定してる場合、オーバーフローの可能性が出てきてしまいます。

なので理想としては、なるべくボックスサイズの固定をしないのがベストプラクティスとなります。

とは言え、ブログカードのディスクリプションなどで、途中で文字を切りたい場合もあるかと思います。

そんな時は、text-overflowを設定すれば問題ないです。

eclipseを指定した場合は3点リーダーが、clipを指定した場合は単純な省略がされます。

サイズ調整

CSSには、様々な幅や大きさの単位が存在します。

ただ、実務で使う種類はあまり多くないです。

主に使われる単位は次のとおりです。

単位 説明
px ディスプレイのピクセル
em 親要素に対する文字の大きさ(1em=親要素と同じ要素)
rem ルート要素の文字に対する大きさ(ルート要素に指定がない場合はブラウザの設定値)
% 親要素との比率
vh viewportの高さ(100vh=viewportと同じ大きさ)
vw viewportの横幅(100vw=viewportと同じ大きさ)

ちなみに、pxは小数点を切り捨てるブラウザなどもあるので、小数点はなるべく使わない方がいいです。

まとめ

今回は、ブロックボックスなどの基本的なCSSのプロパティについて解説してきました。

テキスト装飾編と、レイアウト作成編も執筆中なのでしばしお待ちを

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください！

Discussion