私はプログラミング学習（正式にはまだコーディング学習）を開始してもうすぐ４か月になります。
twitterなんかでは同じくらい、もしくはそれより短い勉強期間の方が結果を出されていますね・・・。
私はまだまだそんな方の足元にも及びません。なかなか難しくてスムーズに進捗してません・・・。
でも、結構もがいてるんですよね。
今から始める、みたいな方が躓くポイントは爆速で結果を出されている方やベテランの方よりもわかると思います。
ということで、自分が躓いたところに関する記事を少しずつ書いていこうと思います。
自分の備忘録的に書いていくので、もしよければ先に講義を受けた友達のノートを覗き見るような感覚で読んでもらえればと思います。
今回は要素の大きさを指定するwidth、heightについてです。
ではいきましょう！
もくじ
いきなり丸投げ・・・。でもこの記事はめちゃわかりやすい！
いきなり丸投げですが、widthやheightに関する知識は下の記事から学びました！めちゃわかりやすい！
本当は自分で記事を書いて紹介したいけどまだできない！！悲しい！！！
↓↓↓↓
全部読むと結構ボリュームがあると思うので、上の記事の内容の特に躓きやすいと思ったポイントについて抜粋して紹介します。
widthの指定方法の種類
とりあえず基本はこの３つです。
- 指定方法種類
- ① width:○○px
② width:○○%
③ width:auto
①は単純ですよね。
②もイメージは沸くと思います。この％は親要素の幅に対する割合になります。
親要素が1000pxだとして、子要素に80%を指定したら800pxになるという具合です。
いやちゃんとやってるのにはみ出すやん！てことがありますよね。これは、
からです。子要素にpaddingやmarginを指定していて、width:100%を指定するとpadding、margin分親要素からはみ出します。
box-sizing:border-boxを指定するとpadding、marginを含んだ割合になります。
これはめっちゃ躓いた！！！
そして、③のautoですが、親要素の幅いっぱいに広がります。
デフォルトがautoなので指定を何もしないとautoになります。
僕が躓いたのは画像を入れるときですね。
autoでなんとなくうまく表示してくれるのかなと思ったらそうではなくて、
画像は大きさを指定しないと元のサイズで表示されるので、親要素の幅を超えてしまうことがあります。
記事にinlineは幅の指定ができないとありますが、imgはできます。
こういう考え方があるらしいです。いまいちよくわからない・・・。↓↓↓
とりあえずあまり難しく考えず、元から大きさあるんやから変更できるっしょ！くらいの直感的な考えで良いかと思います。
というか、指定しないとうまくいかないですからね。
縦横比を保つにはheightかwidthのどちらかを指定して、どちらかをautoにすると良いと思います。
heightとwidthの違い
これは意識しておいたほうが良いです。
autoの場合、widthは基本親要素の幅いっぱいに広がりますが、heightはそうはならず、
まとめ
しっかり理解しておくとコーディングの満足度が違う
正直、感覚的にわかる部分もあると思うのですが、しっかり理解をしておくと、「ああ、自分はしっかり使い方を理解してコーディングできている」という安心感や満足感が得られます。
今回のwidth、heightについては、いまだにいざコードを書こうとすると「あれ、これで良かったっけ？」と手が止まってしまうところでもあったので、ご紹介させていただきました。
拙い解説になってしまいましたが、さらに学習をすすめ初心者の方にうまく説明できるよう私自身成長していきたいと思います。
読んでいただいてありがとうございました。
