プログラミング初学者がつまづきそうな問題の解決まとめ
プログラミングを独学で勉強している僕がちづみさん(@098ra0209)のnoteを購入して模写コーディングしているが何度も調べて解決した事があるのでまとめてみました。
学習中に教材や解説動画を見ながらやっていて分かったと思っていても実際に手を動かすと「あれ？」ってなりますよね。
その疑問を独自に調べて解決でき、その解決経験が積み重なれば出来る事が自然と増えていく。そのために当たり前の事でも書き記していると共に同じように悩んでいる初心者の方の手助けになると思います。
※ただし自己調査＆現時点でのスキルレベルで分かる事を記載しているので間違っている可能性もあります。とはいえ解決出来たのは事実です。
- なんでimgタグの下に隙間が出来るのか？
- XDカンプと数値も合っているのにはみ出てしまう時は？
- 背景画像がうまく表示されない時は？
- 要素を右寄せにしたいんだけど、どうしたらいいの？
- レスポンシブ化の時にflexboxを解除する方法は？
- レスポンシブ化したけど複数の横並び最後の一つを例外にしたい場合は？
なんでimgタグの下に隙間が出来るのか？
これはプログラミング学習のおそらく初期段階でぶつかる問題かもしれません。
Progateやドットインストールを一通りやった僕もこの問題にぶつかりました。
「なんで画像の下に隙間が出来るんだろう？」
「どっかで説明してたっけ？」
これは以下のサイトで解決しました。
原因
どうやらvertical-alignのデフォルト値であるbaselineという初期値が影響している事がわかりました。
なんでこうなるかは分かりませんが「こうなるもの」として僕は捉えています。
解決策
vertical-align:bottomで解決！
vertical-alignのプロパティの値をbaseline以外にすれば解決するとの事で、bottomにしたのはあくまでの設定する値の手段の一つです。
topでもmiddleでも解決するっぽいです。
特記
inline要素ならimgタグに限らず起こる問題との事でした。
imgタグだけの問題じゃないので、他の要素で問題が起こった時にもこの対策で解決するみたいです。（他のinline要素でこの問題に気がついていないので実証していませんが…）
XDカンプと数値も合っているのにはみ出てしまう時は？
XDカンプに限った事じゃないんですが、px単位でデザインされている仕様書（指示書）とmarginなどの数値を指示されている通りにやってもうまくいかないのはなんでだろうと思って調べてみました。
これはProgateでも触れている事でしたがすっぽりと頭から抜けていましたね（笑）
とはいえ調べた結果、すごく分かりやすく説明されているサイトがあったのでそこで解決しました。
原因
横幅（width）と縦幅（height）の中にpaddingとborderを含めるかどうか？の初期値が問題でした。
初期値は含めないcontent-boxになっているのが原因です。
その為、縦横100pxの正方形の要素があったとして、そこにpaddingを10px入れてしまうと全体としては110px四方の要素になってしまいます。
解決策
答えは単純でpaddingとborderも含めて要素の一つとする値border-boxを設定してあげれば万事解決です。
特記
reset.cssに以下のコードを入れれば普段気にしなくてもいいのかな？
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}アスタリスク（*）を使う事で全ての要素に適応されます。
また、疑似要素も並列で記述しておけばなお良いのかなと思います。
背景画像がうまく表示されない時は？
backgroundに画像を設置したんだけど、どうも狙ったように表示されないな〜。
と思って調べていたら以下のページを見つけました。
原因
background: url(○○);だけでは元画像の大きさがそのままで表示されてしまうのが原因でした。
解決策
background-sizeというプロパティで設定値を変更すれば狙った表示になる事が分かりました。
初期値はautoになっているのでこれを以下の具体例のように指示してあげればいいと思います。
具体例
contain元画像の比率保持で要素に元画像が全て収まるようになる
cover元画像の比率保持で要素をちょうどよく覆うようにしてくれる
考察
正直、containとcoverの違いがまだはっきりと分かっていないです。
なのでここは今度も使いながら理解を深めていこうと思っています。
まずは「こういうプロパティと値で調整できるんだ」というのが大事かと考えます。
object-fitを発見！
backgroundに画像を設置して上記のように四苦八苦してたんですが、なんと1行のコードを書くだけで解決するものを記事の執筆中に発見しました。
めちゃくちゃ便利！
まさに「コレコレ～(*´∀｀*)」って言いたくなるぐらいのレベル(笑)
簡単に説明するとimgタグに対して縦横の幅を設定したらこれを入れるだけでトリミングして表示してくれるんだって！！
値としてはbackground-sizeと同じものなので覚えられそう。
これを発見した時は目から鱗状態で、
「これさえあればbackground-sizeなんていらないんじゃね？」とも…。
初心者さんからしたら恐らく画像表示に引っかかると思うのでぜひお試し下さい♪
僕もこれから試しま～す(笑)
要素を右寄せにしたいんだけど、どうしたらいいの？
意外と引っかかるんですよね、コレ！
テキストを左寄せ・中央寄せ・右寄せにするのはパッと出てくるんですが、divとかのブロック要素には効かないのでほぼ毎回と言っていいぐらい調べてます（笑）
解決策
テキストと画像（インライン要素）はtext-align
要素まるごと（ブロック要素）はmargin
特記と考察
text-alignを設定する時は動かしたいインライン要素ではなく、その親要素に設定する事がポイント。
marginで設定する時はそのブロック要素の横幅を設定しないと効果がないので注意です。
floatも使えるけど高さがなくなってしまうので、調整がめんどくさい＆flexboxが主流になりつつあるらしいのであえて使用しませんでした。
レスポンシブ化の時にflexboxを解除する方法は？
PCのLPを作成したあとにレスポンシブ化しようと思ってコードを書くとどうも並びが言うことをきいてくれない。
どうしたもんか…と思って色々と探してみたら以下のページを発見しました。
問題点
なんでだ～って思ってたらどうやらdisplay:flexboxが問題でした。
でもこのコードを消すと今度はPCで見た時に表示したいレイアウトにならない。
どうにかスマホ用にレスポンシブ化した時にだけflexboxを解除して横並びから縦並びにならないかなって思ってました。
解決策
display:blockで問題解決。
うん…単純。
単純だけど、こういう小さいことも分からなくて解決策を検索して答えを探し出せたのが今回のいいところ。
レスポンシブ化したけど複数の横並び最後の一つを例外にしたい場合は？
1つ上のとちょっと近いけど、横並びにしたいものと縦並びにしたいものが一つのflexboxに入っている時はどうしたらいいの？
これはさすがに解決できないのか？
コード書き直しか？
問題点
例えば3つの要素がdisplay:flexboxで横並びになっている時に一番右（最後のひとつ）を横並びにしたくない時にどうするか？
解決策
display:flexを指示している要素に
flex-wrap:wrap対象になる子要素（この場合は3つ目）に
width:100%これで解決との事でした。
特記
そもそもflex指定している要素から外に出せば解決するらしいのであくまでも一つの手段として掲載しました。
基本的にはコードの書き方が合っていないから起こる現象なんですね～。
まとめ
学習中に教材や解説動画を見ながらやっていて分かったと思っていても実際に手を動かすと「あれ？」ってなりますよね。
その疑問を独自に調べて解決でき、その解決経験が積み重なれば出来る事が自然と増えていく。そのために当たり前の事でも書き記していると共に同じように悩んでいる初心者の方の手助けになると思います。
※ただし自己調査＆現時点でのスキルレベルで分かる事を記載しているので間違っている可能性もあります。とはいえ解決出来たのは事実です。
大事なのは、
手を動かすこと
疑問があったら自分で調べること
さぁ、Let’s Try!