プログラミング歴2週間の自分がハマってしまったCSSの落とし穴
プログラミングやり始めて、2週間の管理人です。今のところ、ドットインストールとprogateにて、htmlとcssの講座を終了！
現在、javascriptとjqueryの講座を受講しつつ、コーディング模写をしています。
さて、今回はそんな超初心者の自分が思ったとおりに、CSSが動かずに解決に1,2時間近く、かかってしまったこと、いわゆるハマってしまったケースを紹介していきます。
自分と同じようにプログラミング初心者の人でhtmlとcssを勉強している人は、参考にしてください。
floatを警戒し過ぎて別のところで、ハマった件について
まず最初ですが、ボックスを３つに横並びにする時って、floatを使うじゃないですか。（まあ・・さっきググったら、それ意外の便利な方法、flexboxなるものもあるようですが、初心者の自分は習った唯一の技、floatを使うしかなかった・・）
で、動かしたいboxにfloatを入れた後、親要素にclearfixのクラスをセットして、よしこれでOK！ お！なんか！こんな技を軽く使える俺もいよいよ素人脱出だな！
ってテンション上げて、コード打ち込んで、プラウザ更新したんですが・・
横並びになっていない・・正確に言うと、２つしか横並びになっていない・・
width33%にしているのに、なんでカラム落ちしているのかマジで謎・・
clearfixも間違いなく機能していて、幅も33%にしているから、3つ並んでも、収まるはずなんですよ。
余分なmarginもなし。boxsizingにしてるから、paddingも関係ないハズ・・
グーグルのデベロッパーツールで何度も、見本のサイトと比べたのですが、まるでわからない。余計な幅は全て削りきったはずなのに、何故！？
そんな感じでガチャガチャと一時間くらいやった後に、ようやく「ググるか」という一番最初にやるべきことに気づいて、「カラム落ち」で検索すると、すぐに理由が判明。
※こちらがコーディング模写をしている見本のウェブサイト
htmlで改行すると、半角分が余分に幅として残ってしまう！
普段htmlで何気なく改行していたが、どうやらそれも「半角分」として認識されていて、その半角分がわずかだけど幅を取っているらしい・・・
で、問題はその改行によって生まれた半角分をどうやって削るのか。htmlで一切改行しなければ半角分は生まれずに解決するが、いくらなんでもそれは見辛いし、マークアップ漏れなどのミスが頻発しそうで現実的ではない・・
解決策は簡単で、親要素のフォントサイズを0として、半角分のスペースを0にすればOK。
確かに、見本のサイトを検証してたら、「fontsize : 0;」ってコードを見たが、何だこれ？って無視してたんですよね・・
フォントサイズを0にして、直接子要素にフォントサイズを設定したら、あっさりと解決。これでようやく３つ横並び状態になりました。
参考にさせて頂いたサイトです。詳しく知りたい方はこちらもどうぞ。
inline-blockで横並びにしたらカラム落ちしてしまった！簡単な解決法をご紹介！
反省点・・デベロッパーツールの検証でも不明なら、さっさとググるべし！
思ったとおりに動かない場合、まずはデベロッパーツールの検証ということは見についてきました。が・・それでもわからなければ、さっさとググって先人たちの知恵に頼った方がいいですね。
わからん！わからん！ってガチャガチャやっているとあっという間に時間過ぎていきますから・・・
ググってもわからんこともありますが・・・その際はとりあえず放置してます・・
ハマることは悲しいことに毎日起きるので、解決できたら、またブログに書きますので、ご参考ください。
（ブログに書くと忘れずに知識として定着するので・・）
