【CSS入門】よく使うプロパティと値の一覧続き

前回のプロパティの続きです。前回の記事もぜひご覧ください。

画像の表示方法

object-fitは画像要素<img>の中身のをどのように表示するか指定します。

.image {
  /* 縦横比を保ちimg要素全体を埋める */
  object-fit: cover;
}

値にはcontain、cover、fill等を用い、初期値はfillです。
containの場合、画像は縦横比を保って、画像全体が表示されるように拡大・縮小されます。
coverの場合、画像は縦横比を保って、<img>要素全体を埋めるように拡大・縮小されます。はみ出た場合、その部分は表示されません。
fillの場合、<img>要素全体を埋めるように拡大・縮小されますが、<img>要素と元画像の縦横比が異なる場合は、元画像を引き延ばして表示します。

以下のcodepenの例で、各プロパティについて紹介していきます。

colorは文字の色を指定します。

.box {
  /* 文字を赤色に */
  color: red;  
}

fontは文字のフォント、サイズ等を一括して指定します。
font-sizeや、font-familyのみでよく使います。

.box {
  /* 太字、大きさ20px、行高さ3倍、sans-serif体 */
  font: bold 20px/3 sans-serif;  
}

値には以下のもの等をスペースで区切って指定します。一部指定する順番があります。

文字の太さをboldや、300、500等の数値で指定します。
文字のサイズ、行の高さを[文字サイズ]/[行高さ]とスラッシュで挟み、まとめて指定します。文字サイズは指定必須です。
- 文字のサイズは数値+px,em,rem,%,vw,vh等で指定します。
- 行高さは数値+単位や、単位なしの数値で指定します。単位なしの場合は、指定した数値×文字サイズが行高さとなります。
フォント(字体)を、serif、sans-serif等のキーワードで指定します。カンマ区切りで複数指定(先に書いてあるものから優先される)することもできます。指定必須で、最後に記述します。
各プロパティは子孫要素にも適用されます。

font-weight、font-size、line-height、font-familyに同じ値の指定方法で、個別に指定することもできます。(fontはこれらのプロパティのショートハンド)

↓こんな感じです。

.box {
  font-weight: bold;
  font-size: 20px;
  line-height: 3;
  font-family: sans-serif;
}

行高さ(line-height)の定義は下図のように、テキストを中央に上下に余白が追加されたものとなります。

text-alignは水平方向のテキストの配置を指定します。

.box {
  /* 文字を左右中央揃えに */
  text-align: center;
}

vertical-alignはインライン要素や表のセルボックスの垂直方向の配置を指定します。ブロック要素に指定しても効果はありません。

.box {
  /* 文字を上揃えに */
  vertical-align: top;  
}

値にはtop、bottom、baseline、middle、text-top、text-bottom等の値を指定します。初期値はbaselineです。
top、bottomのみ、行高さによるボックスを基準とし、それ以外のキーワードは親要素を基準として垂直方向の配置を決定します。
<img>要素に指定することもできます。

以下のcodepenの例で、各プロパティについて紹介していきます。

positionは要素がどのように配置されるかを指定します。

.box {
  /* 配置方法をrelative */
  position: relative;
}

指定する値	効果
`static`	通常の配置となります。後述する`top`等の位置指定プロパティや、`z-index`は無効です。(初期値)
`relative`	`static`での配置を基準として、`top`等の位置指定プロパティや、`z-index`が反映されます。
`absolute`	親要素の端を基準として、`top`等の位置指定プロパティや、`z-index`が反映されます。 (親要素には`static`以外の値を`position`に指定する必要があります。指定されていなければさらに祖先の要素まで遡り、そこを基準とします。)
`fixed`	画面そのものの端を基準として、`top`等の位置指定プロパティや、`z-index`が反映されます。スクロールしても位置が変わりません。
`sticky`	親要素がスクロールしても、`top`等で指定した位置に貼り付くようになります。スクロールして親要素が画面外に行くと、一緒に消えていきます。

top、right、bottom、leftは、要素の配置を指定します。
positionプロパティがstatic以外の時に有効となります。

.box {
  /* 左下に配置 */
  left: 0;
  bottom: 0;
}

z-indexは要素の重なりを指定します。
positionプロパティがstatic以外の時に有効となります。

.box {
  /* 重なりを999に */
  z-index: 999;
}

次の記事
プロパティ紹介の最後です！めっち便利なFlexBoxを紹介しています！