【初心者ロードマップ】HTMLとCSSを扱う前の準備と具体的なコーディング手順【実践に備える】

Progateや教本を入り口にして体系的に覚えたはずなのに、実践になると全然手が動かない

それに、

HTMLのアウトラインやクラス名に一貫性がなく、その場しのぎでコーディングを続けるのが気持ち悪く全然モチベーションがあがらない

とも感じていました。

この壁にぶつかってここ数日コードを書くことをやめて、ずっと悩んでました。

何が足りないのかひたすらHTMLやCSS関連の記事を漁っていましたが、

このままだとずっと悩んでいそうだったので、後から自分で振り返れるように記事にまとめることにしました。

■この記事の対象者
この記事では、なりふり構わなければ見た目はコントロールできるけど、毎回同じコードを書いてる気がする、、コーディング中はコーディングに集中したい!という人を対象にしています。

■この記事を書いている人
HTML&CSSについては、5年前に職業訓練で学んだ程度
フリーランスとして再度勉強中。18日目。

■この記事のゴール
事前に考えておくことでコーディング中に考える時間を極力減らすことをゴールにしています。

■目次
考えながら、コーディングしていませんか?
コーディングは準備が9割、実行が1割。
【準備編①】コードを書く前に予備知識を仕入れておこう
【準備編②】コードを書く前に全体像をつかもう。→「広く浅いものから順番に」
②-1 リセットCSSを決める
②-2 ボックスモデルを決める
②-3 余白の扱いを決める
②-4 文字サイズ、文字の色、行間、フォント、リンクの扱いを決める
②-5 CSSページレイアウト技術を把握しておく
②-6 スタイルの継承を意識する
②-3-1 継承プロパティと非継承プロパティを理解しておく
【準備編③】手書きで全体像を書いていこう
③-1 大きな枠から全体像を書いていこう
③-2 大きな枠に名前をつけていこう
③-3 小さな部品を書いていこう
③-4 小さな部品に名前をつけていこう
【準備編④】枠や部品ができたら、個々のページの固有のスタイルについて考えよう
④-1 個々のページの余白を考える
④-2 個々のページの配置を考える
④-3 共通化できる部品や無駄なコードはないかもう一度考えよう
【実践編①】コーディングの流れを理解しよう
①-1 HTMLで大きな枠を作ろう
①-2 HTMLで小さな部品を作ろう
①-3 CSSで大きな枠と小さな部品の見た目を整えよう
①-4 大きな枠が1個できたら、次に進もう
まとめ

考えながら、コーディングしていませんか?

よく初心者向けの記事やプログラミングスクールを見ると、「手を動かしながら学ぼう!」というキャッチフレーズが目につきます。

僕自身、独学ではありますが手を動かしながら学ぼうと会社の有給消化期間中ではありますが

毎日、5時間〜10時間はプログラミングの勉強に時間を費やしています。

Progateやいろんなサイトの記事を見ながら手を動かすことで

18日間くらいでなりふり構わなければ見た目は整えられるようになりました。

着実に勉強の成果は出てきていますが、一貫性がなくその場しのぎでコーディングしているので後の運用や拡張のことが考えられていません。

また、同じようなスタイルを別のところでもベタ打ちしているので全く効率があがらないという状態になってきました。

そのため、考えながらコーディングをすることで

その場しのぎではなくある程度一貫性を持ったコーディングをしようと考えました。

しかし、いかんせん時間がかかりすぎます…

時間がかかるとモチベーションが下がりますし、毎回同じところで引っかかっている気がして悩みに悩みました。

コーディングは準備が9割、実行が1割!

だからといって、手を動かさなければ現状は変わらないので手を動かし続けました。

そこで、OOCSS(オーオーシーエスエス)という考えを知りました。

「Webページを、レゴの集まりで考えよ」

知っておきたいCSS設計法 – OOCSSの基本 | CodeGrid

詳しくは参照サイトを読んでみてください。

理解はできていないですが、やはりどのようにコードを設計するかは共通の悩みどころであり重要なようです。

どのようにHTMLとCSSを組み合わせてコードの設計を行うか

そこで、設計とコーディングを切り分けて考えることにしました。

設計は考える部分で、コーディングは作業です。

この設計部分が大事で、大枠を決めてどのように実装していくのか余白はどうするのか、リセットCSSは何を使うのか、ブラウザはどこまで対応するかなどのことを事前に考えておきます。

コーディングは準備が9割、実行が1割です!

【準備編①】コードを書く前に予備知識を仕入れておこう

コーディングは準備が全てです。

事前に必要な準備ができていないとコーディングのときに考えることが多すぎて無駄に時間がかかってしまいます。

コーディングに必要な予備知識を事前に仕入れて全体像を把握するだけでも効率が変わってきます。

下記にコーディング中に毎回時間がかかっている事柄についてまとめました。

コーディングの大まなかルール
Googleのコーディング規約を和訳している記事です。この書き方合っているかな?とかで毎回調べるのは不毛です。目を通しGoogleの基準に合わせておきましょう。
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

UAスタイルシート(User Agent Style Sheet)
Progateから外に出てみて、まず引っかかるのがなんか変なスタイルが効いているぞ!というところですね。それは、UAスタイルシートののせいです。文書がある程度読みやすいようにブラウザごとにデフォルトでスタイルシートが設定されています。存在だけ知っておけば大丈夫です。
CSSのuser agent stylesheetとは。 – よくきたわね、いらっしゃい

各ブラウザのUAスタイルシートはオープンソースで公開されているので参考までに。
Chromium UA stylesheet (Chrome, Opera)
Mozilla UA stylesheet (Firefox)
WebKit UA stylesheet (Safari)

リセットCSS
先程でてきたUAスタイルシートを放ったらかしておくと、ブラウザごとに差異が出て表示崩れが起きることがあります。その差異をなくすためにリセットCSSというものが用意されています。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssがあるようです。目を通し、どういったものがあるか把握しておきましょう。
CSSリセットの現状、どのCSSリセットが適しているか選ぶ際の指針 | コリス

ボックスモデル
Progateでも出てきた概念です。理解した上でポイントとして覚えておいて欲しいのは、デフォルトでは「width」や「height」は文字や画像などを内包するコンテンツエリアを指定している点です。詳しくは下記を見て欲しいのですが、横並びのレイアウトをする際に単位に%を使用する際は、widthやheightにpaddingやborder部分は計算に含まれていません。そのため、カラム落ちすることがあります。その時は、box-sizing: border-box;を使うとpaddingやborder部分も計算に含まれる為カラム落ちしません。くわしくは、MDNを見てください。

box-sizing | MDN
ボックスモデル|CSSの基本|CSS HappyLife ZERO

スタイルの継承
CSSでは、親要素と子要素があり親要素にcolorで文字色を指定すると、子要素にも反映されますよね?これは、スタイルの継承と呼ばれるものです。継承プロパティ、非継承プロパティを理解しておくとなんとなくのコーディングから一歩抜け出せます。
Inherited?
宣言ブロックのCSS設計|Web Design KOJIKA17

スタイルの初期値
スタイルの初期値を把握しておくと、色んな場面で役に立ちます。例えば、background-imageで

ショートハンドプロパティの落とし穴
ショートハンドプロパティは、ご存知でしょうか?よく使うのは、margin、padding、backgroundプロパティです。1つのコードで省略してスタイルが当てられるので便利な反面、落とし穴があります。それは、background-colorのあとにbackgroundを使うと初期値でスタイルが上書きされます。詳しくはMDNで!
一括指定プロパティ | MDN

ブロック要素、インライン要素
無駄のないコーディングをするためには、ブロック要素とインライン要素の理解が不可欠です。divやpタグは縦に並ぶのはブロック要素で、aタグが横に並んだりするのはインライン要素だからです。レイアウトを組む上で必要不可欠ですのでMDNで必要なときに調べましょう。
ブロックレベル要素 | MDN

コメントを残す

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