社会を生き抜く知恵

仕事や経験、本から得た知識に基づき処世術、豆知識など社会を生き抜くための知恵を紹介

プログラミング

【初心者必見!】ブログラミング初心者がCSSでハマりがちなこと

投稿日:

プログラミング歴2週間の自分がハマってしまったCSSの落とし穴

プログラミングやり始めて、2週間の管理人です。今のところ、ドットインストールとprogateにて、htmlとcssの講座を終了!

現在、javascriptとjqueryの講座を受講しつつ、コーディング模写をしています。

さて、今回はそんな超初心者の自分が思ったとおりに、CSSが動かずに解決に1,2時間近く、かかってしまったこと、いわゆるハマってしまったケースを紹介していきます。

自分と同じようにプログラミング初心者の人でhtmlとcssを勉強している人は、参考にしてください。

floatを警戒し過ぎて別のところで、ハマった件について

まず最初ですが、ボックスを3つに横並びにする時って、floatを使うじゃないですか。(まあ・・さっきググったら、それ意外の便利な方法、flexboxなるものもあるようですが、初心者の自分は習った唯一の技、floatを使うしかなかった・・)

で、動かしたいboxにfloatを入れた後、親要素にclearfixのクラスをセットして、よしこれでOK! お!なんか!こんな技を軽く使える俺もいよいよ素人脱出だな!

ってテンション上げて、コード打ち込んで、プラウザ更新したんですが・・

横並びになっていない・・正確に言うと、2つしか横並びになっていない・・

width33%にしているのに、なんでカラム落ちしているのかマジで謎・・

clearfixも間違いなく機能していて、幅も33%にしているから、3つ並んでも、収まるはずなんですよ。

余分なmarginもなし。boxsizingにしてるから、paddingも関係ないハズ・・

グーグルのデベロッパーツールで何度も、見本のサイトと比べたのですが、まるでわからない。余計な幅は全て削りきったはずなのに、何故!?

そんな感じでガチャガチャと一時間くらいやった後に、ようやく「ググるか」という一番最初にやるべきことに気づいて、「カラム落ち」で検索すると、すぐに理由が判明。

自分が模写した際の状況。3つに並ばず、カラム落ち状態・・

※こちらがコーディング模写をしている見本のウェブサイト

PAS-POL

htmlで改行すると、半角分が余分に幅として残ってしまう!

普段htmlで何気なく改行していたが、どうやらそれも「半角分」として認識されていて、その半角分がわずかだけど幅を取っているらしい・・・

で、問題はその改行によって生まれた半角分をどうやって削るのか。htmlで一切改行しなければ半角分は生まれずに解決するが、いくらなんでもそれは見辛いし、マークアップ漏れなどのミスが頻発しそうで現実的ではない・・

解決策は簡単で、親要素のフォントサイズを0として、半角分のスペースを0にすればOK。

確かに、見本のサイトを検証してたら、「fontsize : 0;」ってコードを見たが、何だこれ?って無視してたんですよね・・

フォントサイズを0にして、直接子要素にフォントサイズを設定したら、あっさりと解決。これでようやく3つ横並び状態になりました。

3つのボックスが収まりました!

参考にさせて頂いたサイトです。詳しく知りたい方はこちらもどうぞ。

inline-blockで横並びにしたらカラム落ちしてしまった!簡単な解決法をご紹介!

反省点・・デベロッパーツールの検証でも不明なら、さっさとググるべし!

思ったとおりに動かない場合、まずはデベロッパーツールの検証ということは見についてきました。が・・それでもわからなければ、さっさとググって先人たちの知恵に頼った方がいいですね。

わからん!わからん!ってガチャガチャやっているとあっという間に時間過ぎていきますから・・・

ググってもわからんこともありますが・・・その際はとりあえず放置してます・・

ハマることは悲しいことに毎日起きるので、解決できたら、またブログに書きますので、ご参考ください。

(ブログに書くと忘れずに知識として定着するので・・)

-プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【初心者】ド素人がプログラミングを3ヶ月勉強してみる【3日目】~htmlを学ぶ~

初心者必見!ド素人がhtmlをドットインストールで学ぶとどうなるのか!? 前回、ドットインストールのプレミアムプランに加入したまでを記載した。で、いよいよ本番。いざ、プログラミングの学習へ まず、最初 …

【初心者】ド素人がプログラミングを3ヶ月勉強してみる【1日目】

プログラミングを3ヶ月勉強すれば、月5万円くらい稼げるようになるだと!? はい。プログラミングをやろうと思ったキッカケは文字通り、「金のため」というゲスな動機です。 ちなみに、自分の今の状況はこんな感 …

【勉強開始1ヶ月】プログラミング初心者が1ヶ月勉強を継続して気づいたこと

プログラミングの勉強をはじめて、1ヶ月・・まだ一応継続してます。 年末にプログラミングの勉強をはじめてから、約1ヶ月。とりあえず挫折せずに、勉強継続できているので、気づいたことを簡単にここにまとめてお …

【初心者】ド素人がプログラミングを3ヶ月勉強してみる【2日目】~ドットインストールで勉強~

プログラミングやるぞ!・・・ってまず何からやりゃいいのよ・・ググっても情報多すぎ・・ ブログで高らかにプログラミングやります!って宣言して、挫折フラグを立てたのはいいが、まず何からやればいいのか・・・ …

【プログラミング初心者必見】コーディング模写した時につまずきやすいこと

Progate、ドットインストールの次にやること・・それはコーディング模写! progateとドットインストールのHTML、CSSの講座をやり終えたので、さて・・次のステップは・・と調べていたら、「プ …