css

「height」ってどういう意味?【意味から覚えるCSS(初心者向け)】

自分が職業訓練の「Webデザインコース」に通っていたときに苦戦したのが、CSSのプロパティを覚える事でした。英語がそこまで得意では無い自分は、全然CSSを覚える事が出来ませんでした。

そこで、考えた覚え方【意味から覚えるCSS講座】というわけです。
CSSの単語の意味を覚えてしまえば、コーディングの時も出てきやすくなりますよ!

この記事は以下のような方にオススメです。

こんな方にオススメ
  • Webデザインを最近始めました。
  • なかなかCSSプロパティが覚えられない。
  • もっと簡単なCSSの書き方ってないの?

「height」の単語の意味

「height – ハイト」
heightの意味は、身長、縦、高さといった意味があります。

heightは「高さを指定するためのCSS」です。

「height」の使い方

/* 高さ指定 */
height:;

/* 最大高指定 */
max-height:;

/* 最小高指定 */
min-height:;

「height」の省略記法(emmet)

emmet機能を利用した省略記法のご紹介です。
省略記法(emmet)は「Tabボタン」で展開する事が出来ます。

基本的にCSSをコーディングするとき、全部の文字を打つことってほとんど無いです。

省略記法 (emmet)をどれだけ覚えるかで、コーディングの速さは大きく変わります(断然ラクです)

案外、省略記法の書き方が載っている教材は少ないのでよければ参考にしてください!

/* h */
height:;

/* mah */
max-height:;

/* mih */
min-height:;

「height」の書き方の例

/* 高さauto */
height: auto;

/* 最大高100px */
max-height: 100px;

/* 最小高10% */
min-height: 10%;

「height」のCSSが効かない場合

カテゴリタグの高さが指定できない。

「spanタグ」がインライン要素になってないか確認してみよう!

まとめ

以上、今回は【意味から覚えるCSS講座】シリーズ「height」の覚え方はご紹介いたしました。