css

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

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

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

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

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

「width」の単語の意味

「width – ウィズ」
widthの意味は、幅、横、横幅といった意味があります。

widthは「横幅を指定するためのCSS」です。

「width - ウィズ」
幅、横、横幅  横幅を指定するためのCSS
height = 高さの指定
セットで覚えてしまおう

「width」の使い方

/* 横幅指定 */
width:;

/* 最大幅指定 */
max-width:;

/* 最小幅指定 */
min-width:;

「width」の省略記法(emmet)

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

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

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

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

/* w */
width:;

/* maw */
max-width:;

/* miw */
min-width:;

「width」の書き方の例

/* 横幅auto */
width: auto;

/* 最大幅100px */
max-width: 100px;

/* 最小幅10% */
min-width: 10%;

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

リンクボタンの横幅が指定できない。

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

まとめ

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