【初心者向け】コーディング手順の「気付けそうで気付けない」ちょっとしたアドバイス

数ある記事の中から目を止めて頂き、ありがとうございます。
こんにちは！
Liall.（リアル）のディレクション担当、藪内です。
「Liall.ってなに？」という方はこちらから是非サイトを覗いてみてください！

自粛期間中から「ちょっとコーディング勉強してみるか！」と始められた方、結構いるんじゃないでしょうか？
ある程度HTML&CSSの学習が進むと、静的なホームページであれば制作できるようになりますので、自粛期間が１～２ヶ月だったことを考えると、そろそろ何か作ろっかなという人が出てくる時期だと思います。
実際にどこかのホームページを模写してみたり、実際にポートフォリオを制作してみると、学習していた内容通りになかなか進まない、っていうか学習したのに出来ない！なんてこともチラホラ。

・結構な時間割いて学習したのに、なんだか学習した内容がうまくアウトプットできない。
・コードは書ける、というかこうしたら上手くいきそうというイメージはある！でも、なぜかうまくいかない。

こういうのって、結構あるあるだと思うんですよね。
そこで今回は、独学でHTML＆CSSの学習が一通り済んだけど、これから始めて実際のサイトをコーディングしてみようというレベル感の人に向けて、ちょっとしたコーディングのアドバイスを書いていきたいと思います！

【１．レスポンシブデザインのコーディングはHTML＆CSSを同時並行】

私がWeb制作会社にて指導を受けていたときに教わったアドバイスです。
それまでの私は、「制作物のデザインカンプ（スマホ版・パソコン版双方）をしっかりと見る➡HTMLの骨子のイメージを頭の中に作る➡実際にHTMLを完成させる➡スマホ版のデザインカンプだけを見ながら、まずはスマホ版のCSSを完成させる➡パソコン版のデザインカンプを見ながら、パソコン版のCSSを完成させる」という手順で作業を行っておりました。
こうすることで、「HTML➡スマホ版CSS➡パソコン版CSS」と一つ一つ集中して完成させていけるので、ミスが出にくいと思っていました。
ですが、このやり方は当時の私のスキルを反映していないという欠点がありました。
どういうことかというと、私が最初に作るHTMLが完璧であるという前提で手順が組まれているのです。
もちろん、現在でもいきなり完璧なHTMLが組めるなどと大言壮語を吐くつもりはありませんが、当時の私はもっと無理でした。
だから、「スマホ版CSSを書いているときに、HTMLを修正」「パソコン版CSSを書いているときに、HTMLの修正を行い、それによって崩れたスマホ版CSSを修正」のような二度手間、三度手間が発生してました。
さらに、一日でコーディングを終えることはできませんし、制作したHTMLやCSSを完璧に暗記しているわけでもないので、翌日以降にHTMLやスマホ版のCSSを見返さないと「なんというクラス名を当てるべきか」「別の版のCSSが崩れないか」などを判断できませんでした。
そのため、翌日以降は「最初に前日までに制作していた内容をしっかりと見返す」という作業が発生しており、時間の無駄でした。

そこで、当時私の面倒を見てくれていた方が教えてくださったのが、同時並行で進めること。
どういうことかと言うと、「headerのHTMLを書く➡headerのスマホ版CSSを書く➡headerのパソコン版CSSを書く」という順番で作業を進めること。
こうすることで、「HTMLを組む前はこれでいけると思ったけど、いざパソコン版組みだしたらもう一つdivがあったほうが便利だ」みたいな場合の対応が容易です。
もし以前の私と同じやり方で進めていて、「なんだか無駄が多いなー」「手戻りばっかりだよー」という方がいれば是非お試しください。

【２．</body>の直前に<br>を５個くらい入れる】

これは、制作途中のページ下部に余白があるほうが、「自分のCSSが変だから画面が崩れているのか」「余白がなさすぎて変に画面が崩れているのか」を判断するのに便利だからです。
あんまり余裕がないときちんとイメージ通りのCSSが書けているか判断が難しい場合があるので保険的に入れております。
もちろん、完成したら削除しています。

【３．フォントサイズが悩ましいという問題への対処】

実際にどこかのサイトを模写したり、自分でデザインカンプを制作してコーディングを始めると、意図しないところで文字が改行されてしまうときがあると思います。
例えば「iphone6までのサイズだと問題なかったのにiphone5のサイズにすると、一文字だけ改行されてしまう。」みたいなことは良く起こりえると思います。
また、フォントサイズについては結構ググると色んな意見があるので、絶対に正解という方法があるわけではないと思います。（むしろあるなら教えてほしいレベル）
よく書かれている方法について、そのメリットとデメリットを記載しておきますので、ご自身の気に入った方法で制作を進めると良いと思います。

①デザインカンプから読み取れるフォントサイズ（px）で書く
➡メリット：読み取りが簡単、
➡デメリット：固定値なので、画面サイズがデザインカンプから離れれば離れるほど、文字が画面に対し、大きすぎたり小さすぎたりして見えてしまう、全体の変更が発生したら都度すべてのfont-sizeの変更が発生する
②デザインカンプから読み取れるフォントサイズを単位（rem）で書く
➡メリット：html要素のfont-sizeを変更することで一括で文字のサイズを変えられる、CSSフレームワークの文字サイズのうちbootstrapとかがremを採用しているから
➡デメリット：「html要素のfont-sizeを変更することで一括で文字のサイズを変えられる」というメリットを活かす機会があまりない（少なくとも私はまだ出会ってない）
③デザインカンプから読み取れるフォントサイズを単位（rem）で書く+html要素にfont-size:62.5%と書く
➡メリット：1rem=10pxという分かりやすさ、その他②と同様
➡デメリット：62.5％というフィルターのせいで、仮にブラウザ設定でフォントサイズを変更しても変化が小さくなってしまう
④vwを使用する
➡メリット：画面幅に対する割合で記述できるので、calc等を用いれば割とどの画面サイズでもデザインカンプ通りの見た目になる
➡デメリット：画面幅に対する割合なので、デザインカンプの段階から考慮したり、コーディングの際に注意していないと、画面幅によって極端に小さい文字・大きい文字となってしまう場合がある。

ちなみに私は学習初期は①のみで作業してました。
Web制作会社で指導頂いたのは①+④です。
最近は、②+④で作業するように注意してます。

rem使った方がよいのかな？っていうのは悩ましい問題です。
私はLiall.ではディレクション業務がメインなのであまりLiall.ではコーディングしません。
個人的にコーディング作業をするときは特にCSSフレームワークを利用していないことも多いので、remにこだわる必要性は低いかなと思いつつ、それでも今後フレームワークを利用するかもしれないからという微妙な理由でremを使用するように切り替えました。
デザインファーストというか、お客様の希望を詰め込んだデザインカンプをなるべくそのまま再現したいから、④は個人的には必須です。
一方で、③は個人的にはあんまり好きじゃないというか、remを使うなら例えばwidthとかにもpxじゃなくてremの使用を検討することになると思うんですけど、html要素に62.5%が邪魔になることがあるので。
そこだけpx使えよって話なのかもしれないですけど笑

【終わりに】

Web制作会社等で勤務していたり、フリーランスで制作会社から仕事を受けている場合であれば、その会社のコーディングルールに従うべきですが、個人で学習を始めた段階だとそこまで気にする必要はないかなぁと思います。
それより、如何に自分の学習した内容を活かしつつ、制作できるか。
そのためにどういうことに気を付ければうまくいくのか。
実は上記みたいな、「自分で気付けそうで案外気付けない」問題をクリアできると作業が進みやすいかもしれません！
誰かの参考になってると嬉しいなぁと思います！

また、コーディング独学の方って「自分のやり方は間違ってないだろうか？」「こんな手順で進めてるけど、これで合ってるのかなぁ」と不安になるときも多いと思います。
私は職業訓練という講師がいる環境だったおかげで一定の指標を得ることが出来ましたが、完全に独学の人はなかなか不安な人もいるかなぁと思います。
そういう方の指標というか、「こういう方法もあるよ」みたいなものを提示していけるように現在計画中です。

今後Liall.では「今日のあなたのお役に立つ」情報をnoteを始めSNSやYouTubeを中心に発信して参ります。ぜひご覧下さいませ。
Liall.へのお問い合わせはこちらから承っております。
Twitter・Instagramも更新中！