MY BLOG

×

不思議な世界へようこそ！

私のブログぜひ、
見ていってくださ〜い！！

単位を学ぶ？

あいさつ

みんさんおはようございます、こんにちは、こんばんは！
今週も始まったばかりですね〜　げんきですか？？
私は先週は誕生日だったので友達や家族にお祝いしてもらいました🎂
今回はHTML+CSSで単位について学んだので復習していきたいと思います！

復習

〈ピクセル（px）について〉
ディスプレイのピクセル数に対しての絶対値のことです。

[html]
<body>
 <h1><span>これは</span>見出し<span>です。</span>

[css]
（例）
body{
 font-size:16px;
}

h1{
 font-size:32px;
}

span{
 font-size:20px;
}

メリットは同じ環境であれば必ず同じ長さに表示できる、計算が必要ありません。
デメリットはブラウザの文字サイズ調節機能が作動しない、レスポンシブ対応の際に変更すべき箇所が多くなります。

〈エム（em）について〉
フォントサイズは親要素のフォントサイズの相対値、横幅や余白は自分自身のフォントサイズで表します。

【フォントサイズの指定】
指定したいフォントサイズ（px）/親要素のフォントサイズ（px）=em

[css]
/*親要素(html)のフォントサイズは16px*/
body{
 font-size:1em/* 16/16=1 */
}
 
 /*親要素(body)のフォントサイズは16px*/
 h1{
  font-size:2em/* 32/16=2 */
}

/*親要素(h1)のフォントサイズは32px*/
span{
 font-size:.625em/* 20/32=o.625 */
}

【Sassの記法】
body{
 font-size:(16/16)+em;
}

/*もしくは*/
body{
 font-size:(16em/16);
}

【横幅や余白の指定】
h1{
  font-size: (32em/16);
  width: (200em/32);
  margin: (30em/32);
  padding: (30em/32);
  border: (1em/32) solid;
}

メリットはブラウザの文字サイズ調節機能が正常に作動する、親要素のフォントサイズを変更するだけで子要素も差応対的に変更される、フォントサイズを変更するだけで余白等も相対的に変更される、文字数で設定できます。
デメリットは親要素の値によって表示サイズが変わるため個別の調整が必要になります。

〈レム（rem）について〉
フォントサイズも余白や横幅もルート要素（html要素）のフォントサイズの相対値で表します。

【フォントサイズの指定】
指定したいフォントサイズ(px) / ルート要素(html要素)のフォントサイズ(px) = rem

[css]
/*ルート要素(html)のフォントサイズは16px（デフォルトのサイズ）*/
body{
 font-size:1em/* 16/16=1 */
}

h1{
 font-size:2em/* 32/16=2 */
}

span{
 font-size:.625em/* 20/16=0.625 */
}

【Sassの記法】
/*@functionで関数化する*/
/*引数で数字を渡して計算した結果を呼び出し元に戻す*/
@function f-rem($value){
  @return ($value/16)+rem;
}
body{
 font-size:f-rem(16);
}

h1{
 font-size:f-rem(32);
}

【横幅や余白の設定】
h1{
  font-size: f-rem(32);
  width: f-rem(200);
  margin: f-rem(30);
  padding: f-rem(30);
  border: f-rem(1) solid;
}

メリットはブラウザの文字サイズ調節機能が正常に作動する、ルート要素のフォントサイズを変更するだけで全ての要素が相対的に変更される、emよりも計算が楽です。
デメリットはフォントサイズ以外には使用しずらいです。

〈パーセント（%）について〉
フォントサイズは親要素のフォントサイズの相対値、横幅や余白は基本、親要素の横幅の相対地で表します。

【フォントサイズの指定】
指定したいフォントサイズ(px) / 親要素のフォントサイズ(px) * 100 = %

[css]
/*親要素(html)のフォントサイズは16px*/
body{
 font-size:100%/* 16/16=1 */
}

/*親要素(body)のフォントサイズは16px*/
h1{
 font-size:200%/* 32/16=2 */
}

/*親要素(h1)のフォントサイズは32px*/
span{
 font-size:62.5%/* 20/32=0.625 */
}

【Sassの記法】
body{
 font-size:(16/16)*100%;
}

【横幅や余白の設定】
h1{
  font-size: 200%;
  width: 50%; /* 親要素の横幅の50% */
  height: 50%; /* 親要素の高さの50%（ただし、親要素の高さを指定していない場合は無効） */
  margin-top: 10%; /* 親要素の横幅の10% */
  margin-left: 10%; /* 親要素の横幅の10% */
  border: 1% solid; /* ボーダーの太さに「%」は指定不可 */
}

メリットはブラウザの文字サイズ調節機能が正常に作動する、親要素のフォントサイズを変更するだけで子要素も相対的に変更されます。
デメリットはプロパティによって挙動が違うため横幅以外には使いづらいです。a

〈画像の配置について〉
商品の画像を配置するときは画像の高さが違う画像もあるのでobject-fit:contain、object-positionで配置するといいです。

さいごに

今週は早くブログを投稿することができました！復習をすることによって頭の中に確実にインプットされてきているので一年生だけに限らず二年生でもブログを更新し続けたいなと思います💪
来週はJavaScriptについて復習していきたいと思うのでしっかり授業を聞いて勉強していきたいと思います！