HTML&CSSの初心者が知るべき3つの誤解！【暗記・タイピング・入力ミス】

解決できる悩み

HTML&CSSはウェブ分野のデザイナーやエンジニアを志す人の多くが初めて触れるコンピューター言語です。

私はウェブ制作やウェブ開発の講師業をしている仕事柄、HTML&CSSに苦戦する入門者を数多く見てきました。
その中で入門者の方に待ち構えている3つの誤解を解きたいと思います。

HTML&CSSにまつわる3つの誤解

注意

この3つは心構えとして決して間違ってはいないのですが、入門者の方は囚われすぎてしまう傾向が見られます。

そんな思い込みを少しでも楽にしてHTMLとCSSを楽しんでくれる人が増えてくれると嬉しいです♪

HTML&CSSの多種多様なタグやプロパティを全て暗記する必要はありません。

つい受験勉強のような感覚で「たくさん暗記しないといけない」という思い込みがあるとは思いますが、HTML&CSSを活用する場面で求められることは記憶力ではなく応用力です。

補足

HTMLやCSSの内容を完全に暗記しようとすることは現実的ではありません。

HTMLには多種多様に及ぶタグと属性、CSSには同じく多種多様なプロパティと値（あたい）が存在します。
その数は膨大であり、こまめにアップデートされていて新しい単語や文法がどんどん生み出されています。

最近のコードエディタは高性能なので予測変換してくれます。

皆さんもスマホで漢字や英単語を入力するときは、予測変換を活用しますよね？
それはHTML&CSSのコーディング時にも応用すれば全てを暗記する必要な無いんです😄

コード補完機能は実務の現場でも当たり前に使われています。
なので完全に暗記しなくても良いわけですね！

ウェブデザイナーやプログラマーの多くは「暗記とか計算はコンピュータに任せて、人間はもっとクリエイティブな仕事をするべきだ」という考えを持っているので、あなたもどんどん活用していきましょう！

時にはメッタに使わないコードを必要とされる場面もありますが、都度調べればOKです。
熟練の開発者でも毎日のように調べ物をしています。

ウェブ開発者はコーディングやプログラミングをする際に半分近くが調べ物をする時間を占めている、という統計もあります。

「暗記してないから調べる」というのは当たり前なんです👍

コーディング時のタイピング（入力作業）はEmmetエメット（省略記法）で半自動化が可能です。

入門者は学習のためにあえて自分で全てタイピングする期間を設けることが一般的ですが、これから先も「一から十まで自分で入力するのは非効率なのでどこかでEmmetの導入を検討してみてはいかがでしょう？

EmmetとはHTMLとCSSで使える省略記法のことです。
予め決められているスニペットを入力し展開することで長尺のコードを少ない文字数で入力することが出来ます。

実務の現場でのHTML&CSSは自動生成が主流になっています。
こういったツールを活用することで「HTML&CSSをすべて自分で手入力する」という必要がなくなります。

有名どころで言うとHTMLテンプレートエンジンのpugパグや、CSSメタ言語のSassサスがあります。
また、最近は静的サイトジェネレーターも開発現場でトレンドとなっています。

補足

これらの多くはHTMLとCSSにプログラムのエッセンスを組み込んで面倒な工程を自動化したり、管理しやすくするためのものです。

自動生成と聞くと「じゃあHTMLとCSSを覚えても意味ないの？」と思うかもしれませんが、決してそんなことはありません。

これらの自動生成ツールを使いこなすためにはHTMLとCSSの基礎知識が必須となります。
HTMLとCSSを勉強していくことは全く無駄ではありません。
しかし、ゆくゆくは自動化してくべきであることは間違いないでしょう。

入門者の方は「入力ミスは気をつける」のではなく、「入力ミスが起こらない環境を作る」という目線に切り替えましょう！

まずはVisual Studio Codeのようなコーディングのためのエディターを導入しましょう。
そしてコードエディタに搭載されている入力ミス検知機能の使い方を理解しましょう。