この記事を読んでほしい方
- HTMLやCSSを学び始めた方
- フロントエンドエンジニアの初心者の方
HTMLやCSSの参考コードは、Webサイトの記事にあふれています。
中には、CSSのライブラリというものもあり、
このライブラリは、CSSをまとめたファイルでして、これを使えばある程度楽にフロントエンドコーディングができます。
有名どころだと、Bootstrapとかですね。
ものすごくざっくりな説明ですが
「HTML上でクラス名をつけるだけで、ある程度のレイアウトや見た目を整える」作業とかができます。
「これがあればCSS覚える必要ない！」と思っていた時期が、僕にはありました。
もちろん目的によって、
こういった「楽にフロントエンドコーディングするためのツール」を
選定することは良いことだと思います。
ただ、ライブラリを覚えたり、
参考コードをWebサイトの記事からそのまま真似るだけで、
業務がうまくいったかといえば、僕はそうではありませんでした。
（もちろん初学者のうちは、そういった行動も大事です。）
HTMLやCSSは1から書けた方が良いと思います。その理由について書いていきます。
1から書ければ、状況が変わってもコーディングできる
HTML、CSSを1から書ければ、目的によって手法を変えることができます。
CSSのライブラリなどは、ある目的によって作られたパターンが多いです。
たとえば、「Webサイトを効率的につくるために開発された」とか、
「Webアプリ開発用」とか「デザイン重視型」などなどあるかなと。
要は、その目的が外れる場合、ライブラリを使うことは逆に非効率になりかねないんですね。
もちろん、自分が作りたい目的だけ達成できれば良い（例えばポートフォリオを作るとか）であれば
ライブラリを使うことは問題ないです。
ただ、業務には基本的に、Webサイトを納品するお客さんがいて、
そのお客さんの目的を達成しないといけないわけです。
そこで、HTMLやCSSが1から書ければ、一番効率的な方法を考えつつ、
Webサイトを制作することができます。
また、サイト制作では、サイトの修正や改修が発生しますので、
「いかに修正しやすいサイトを作るか？」「今後起こりうる修正に備えて、どういうふうにコーディングすべきか」などを考えながらサイトを制作することができます。
Webサイトを構成する他の要素について学ぶとき、困らない
「他の要素」は、SEOやJavascript、Wordpressなどが当てはまります。
SEO
HTMLでは、タグを打ち込みますよね。H1タグとか、pタグとか。
このタグにはそれぞれ意味がありまして、H1だったら大見出し、pタグは段落といった感じです。
この「タグ」は、正直あまり気にしなくても、サイトデザインを組むことができます。
ですが、タグにはSEOに影響を与えます。
初学者のうちはSEOについて、細かく気にしてコーディングするよりも、
まずはサイトデザインをうまく組めるようになることをおすすめしますが、
追々SEOに特化したサイトを作るときに、
HTMLタグの意味についてざっくり知っておくだけでも、スムーズに頭に入ってくるかと。
Javascript
他にWebサイトを構成する要素といえば、サイトに動きをつけたいときに使用する、Javascriptですね。
Javascriptを実装するときには、HTML上にクラス名やidと呼ばれる属性を付与したり、
CSSと連携させて細かく動きを調整できたりします。
そういった、サイトデザインにこだわりをもって作業を進めたい方は特に、
HTML、CSSを1から書ける能力を身につけるべきだと考えます。
WordPress
WordPressを使うときも同じような感じですが、
既存テーマを使わずにコーディングする場合は、
まずHTML、CSSでコーディングしたあとにWordpressのPHPファイルと呼ばれるファイルに組み込んでいきます。
（もしくはそのままPHPファイルに組み込みつつHTML、CSSをコーディングしていきます。）
組み込んでいくときには、HTMLやCSSの構造を理解しておくことが結構大事になってきます。
構造が分からないと、どこに何を組み込むかが分からないからですね。
その他にも色々
ちょっとコーディングと外れますが、前工程である「ワイヤーフレーム」、「デザイン」を、もし作ることになったときに、
「何ができて何ができないか」「どうすればコーディングしやすいか」を、幅広く考えることができます。
ライブラリを使用した制作は、便利だし早くコーディングできるかもしれませんが、幅広い考え方でコーディングしたい場合は、
1からコーディング、もしくはライブラリと1からコーディングを組み合わせてみましょう。
自分の表現したいデザインを忠実に再現できる
これは言わずもがな、理解していただけるかと思いますが、
やはりHTMLやCSSを1から書けると、自分の表現したいデザインを忠実に再現できます。
CSSでは色んなことができます。
色をつける、グラデーションをつける、影をつける、テキストのフォントを変える、
レイアウトを整える、パソコン・スマホで見たときの見た目を変える、サイトの動きを調整するなどなど。
このあたりを細かく設定できると、理想的ですね。
前述しましたが、業務には基本的にWebサイトを納品するお客さんがいます。
Webサイトはコーディングする前に、デザインを行う作業が入るのですが、
デザイナーがデザインしたデータを忠実に再現できれば、
お客さんから修正依頼が来ることを最小限に防げると思います。（もちろん、完全に保証はできませんが）
なので、時間をかけて丁寧にコーディングしたほうが、実は一番ゴールに近かったりします。大きな修正が入ったら、コーディングを設計し直さないといけないこともありますしね。
その上で、HTMLやCSSを1から組めることは大事です。
とはいえ、初学者のうちは色々試したほうがいいかも
最終的にはHTML、CSSを1から書けたほうが良いのは良いんですが、
初学者のうちは、まず外観を掴みたい方もいらっしゃるかと思います。
その上で、ライブラリに手を出してみるのは全然アリです。
ライブラリを使って一サイト作れてしまえれば、達成感も出てくるでしょうし、間違いなく学習にはなります。
そういった過程を積みつつ、最終的には1から理解できるまで学習、もしくは業務してみてください！
それでは〜
