「HTMLのアウトラインやクラス名に一貫性がなく、その場しのぎでコーディングを続けるのが気持ち悪く全然モチベーションがあがらない」とも感じていました。この壁にぶつかってここ数日コードを書くことをやめて、ずっと悩んでました。何が足りないのかひたすらHTMLやCSS関連の記事を漁っていましたが、このままだとずっと悩んでいそうだったので、後から自分で振り返れるように記事にまとめることにしました。■この記事の対象者この記事では、なりふり構わなければ見た目はコントロールできるけど、毎回同じコードを書いてる気がする、、コーディング中はコーディングに集中したい!という人を対象にしています。■この記事を書いている人HTML&CSSについては、5年前に職業訓練で学んだ程度フリーランスとして再度勉強中。■この記事のゴール事前に考えておくことでコーディング中に考える時間を極力減らすことをゴールにしています。考えながら、コーディングしていませんか?コーディングは準備が9割、実行が1割。【準備編1】コードを書く前に予備知識を仕入れておこう【準備編2】コードを書く前に全体像をつかもう。大きな枠が1個できたら、次に進もうまとめ考えながら、コーディングしていませんか?よく初心者向けの記事やプログラミングスクールを見ると、「手を動かしながら学ぼう!」というキャッチフレーズが目につきます。僕自身、独学ではありますが手を動かしながら学ぼうと会社の有給消化期間中ではありますが毎日、5時間〜10時間はプログラミングの勉強に時間を費やしています。Progateやいろんなサイトの記事を見ながら手を動かすことで18日間くらいでなりふり構わなければ見た目は整えられるようになりました。着実に勉強の成果は出てきていますが、一貫性がなくその場しのぎでコーディングしているので後の運用や拡張のことが考えられていません。同じようなスタイルを別のところでもベタ打ちしているので全く効率があがらないという状態になってきました。そのため、考えながらコーディングをすることでその場しのぎではなくある程度一貫性を持ったコーディングをしようと考えました。いかんせん時間がかかりすぎます...時間がかかるとモチベーションが下がりますし、毎回同じところで引っかかっている気がして悩みに悩みました。コーディングは準備が9割、実行が1割!だからといって、手を動かさなければ現状は変わらないので手を動かし続けました。そこで、OOCSS(オーオーシーエスエス)という考えを知りました。CodeGrid詳しくは参照サイトを読んでみてください。理解はできていないですが、やはりどのようにコードを設計するかは共通の悩みどころであり重要なようです。どのようにHTMLとCSSを組み合わせてコードの設計を行うかそこで、設計とコーディングを切り分けて考えることにしました。設計は考える部分で、コーディングは作業です。この設計部分が大事で、大枠を決めてどのように実装していくのか余白はどうするのか、リセットCSSは何を使うのか、ブラウザはどこまで対応するかなどのことを事前に考えておきます。コーディングは準備が9割、実行が1割です!【準備編1】コードを書く前に予備知識を仕入れておこうコーディングは準備が全てです。事前に必要な準備ができていないとコーディングのときに考えることが多すぎて無駄に時間がかかってしまいます。コーディングに必要な予備知識を事前に仕入れて全体像を把握するだけでも効率が変わってきます。下記にコーディング中に毎回時間がかかっている事柄についてまとめました。コーディングの大まなかルールGoogleのコーディング規約を和訳している記事です。この書き方合っているかな?とかで毎回調べるのは不毛です。目を通しGoogleの基準に合わせておきましょう。Sheet)Progateから外に出てみて、まず引っかかるのがなんか変なスタイルが効いているぞ!というところですね。それは、UAスタイルシートののせいです。文書がある程度読みやすいようにブラウザごとにデフォルトでスタイルシートが設定されています。存在だけ知っておけば大丈夫です。stylesheetとは。きたわね、いらっしゃい各ブラウザのUAスタイルシートはオープンソースで公開されているので参考までに。(Safari)リセットCSS先程でてきたUAスタイルシートを放ったらかしておくと、ブラウザごとに差異が出て表示崩れが起きることがあります。その差異をなくすためにリセットCSSというものが用意されています。Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssがあるようです。目を通し、どういったものがあるか把握しておきましょう。コリスボックスモデルProgateでも出てきた概念です。理解した上でポイントとして覚えておいて欲しいのは、デフォルトでは「width」や「height」は文字や画像などを内包するコンテンツエリアを指定している点です。詳しくは下記を見て欲しいのですが、横並びのレイアウトをする際に単位に%を使用する際は、widthやheightにpaddingやborder部分は計算に含まれていません。そのため、カラム落ちすることがあります。border-box;を使うとpaddingやborder部分も計算に含まれる為カラム落ちしません。くわしくは、MDNを見てください。ZEROスタイルの継承CSSでは、親要素と子要素があり親要素にcolorで文字色を指定すると、子要素にも反映されますよね?これは、スタイルの継承と呼ばれるものです。継承プロパティ、非継承プロパティを理解しておくとなんとなくのコーディングから一歩抜け出せます。KOJIKA17スタイルの初期値スタイルの初期値を把握しておくと、色んな場面で役に立ちます。background-imageでショートハンドプロパティの落とし穴ショートハンドプロパティは、ご存知でしょうか?よく使うのは、margin、padding、backgroundプロパティです。1つのコードで省略してスタイルが当てられるので便利な反面、落とし穴があります。それは、background-colorのあとにbackgroundを使うと初期値でスタイルが上書きされます。無駄のないコーディングをするためには、ブロック要素とインライン要素の理解が不可欠です。divやpタグは縦に並ぶのはブロック要素で、aタグが横に並んだりするのはインライン要素だからです。レイアウトを組む上で必要不可欠ですのでMDNで必要なときに調べましょう。:プログラミング慣れ親しんだ地元で未経験からエンジニアになりますVagrant+ApacheでPHP開発環境構築プログラミング独学で集中力維持に効果があったのは◯◯でした職業初心者プログラマが思うインプットとアウトプットのバランスについてプログラミングの挫折しない学習法を考えていたら、まさにプロサーじゃね?となったので書き記しておく。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取る次の記事フリーランスになりたい。僕が思う理想の1日のスケジュールとは?佐野さんオープンなwebの世界を愛し、ポジティブな生き方に憧れてます。高卒で私鉄勤務→3年半で退職→web訓練→web会社勤務→役職就くも4年半で退職→プログラミングを学んだ上でどうすべきかじっくり考えてみます。キャリアを捨て、本当に価値あるスキル=課題を解決する力を身につけられるよう実力をつけます。