【未経験】コーディング？HTMLとCSSってそもそも何？現役Webデザイナーが解説

今回はこのような悩みを持つ方のために、

が「HTML・CSSについて」ご紹介していきます。

目次

1. そもそもWebサイトはなにでできている？
2. HTMLとは？
3. CSSとは？
4. HTML・CSSは本を読んだだけではコーディングができるようにならない
5. どうやってHTML・CSSを習得すれば良い？
   1. 独学で習得する方法
   2. Webデザインスクールで習得する方法
6. おすすめなWebデザインスクール
7. まとめ

そもそもWebサイトはなにでできている？

まずHTMLとCSSについて説明する前に、Webサイトはなにでできていて、どうやってWebサイトとして表示されるのでしょうか。例としてYahooのトップページを見てみましょう。

普段よく見るYahooのトップページですが、中身はHTMLやCSS等で構築されていて表示されています。実際に、その様子を見る方法はGoogle Chromeの場合「ページで右クリック」→「検証をクリック」します。

すると、下記のような画面になります。右側に表示されているのが、このYahooトップページの裏側、つまりHTMLとCSSです。普段当たり前のようにWebサイト閲覧をしている裏側には、こういったHTMLとCSSで構築されているのです。

次は、HTMLとCSSの違いについて解説していきたいと思います。

HTMLとは？

HTML(HyperText Markup Language)は、 文書を構造化するための言語であり、 マークアップ言語といいます。これだけでは意味が伝わらないと思うので、詳しく説明していきたいと思います。

HTMLのイメージは文書作成ツール

文書の構造化というのは、あるテキストに対して意味付けしていくイメージです。
例えば、会社でよく使うツールで例えるとMicrosoftのWordを思い出していただきたいです。Wordで何気なくあなたがしている作業として、文書に見出しをつけたり、大事な文章には下線や太文字にしたりすると思います。これも１つのテキストに対して意味付けをしていることになります。

HTMLも同じで、このページの見出しはこの部分ですよ、大事な文章はこの部分ですよ、この部分はリンクですよという意味を、コンピューターが理解できるように伝えていく作業なのです。

なぜコンピューターに理解させる必要があるかというと、Webサイトは一枚の画像とは違って、マウスやキーボードを使って操作できる必要があるからです。例えば、リンクテキストをクリックするとページ遷移できますよね、これは「リンクである」という意味付けをコンピューターが理解できるようHTMLで記述しているからなのです。

CSSとは？

CSS(Cascading Style Sheets)は、作成されたHTMLの見た目や装飾を整えるものであり スタイルシート言語と呼ばれています。

CSSのイメージは装飾(デコレーション)

上記のHTMLでは文書に対して構造化・意味付けをしていきました。HTMLではただの構造化・意味付けだけなので、見た目は考慮されていません。見た目を綺麗にしていく作業はCSSの担当となります。

例えば、文字色を変えたり、かたまり同士の間隔を調整したり、線に装飾を加えたりなど、見た目に関する色々なことが実現できます。

HTML・CSSは本を読んだだけではコーディングができるようにならない

ここまでHTMLとCSSの違いについてお伝えしてきましたが、HTMLやCSSは、本やWebサイトで読んだだけでは扱えるようになるわけではありません。
例えば、数学でも公式を単純に覚えただけではいきなり問題で解くことができません。公式を理解し、覚えて何回も問題を解くことで公式を扱えるようになっていきます。

HTMLとCSSも自分でWebサイトを構築していく経験を通して理解できるようになり、自然とコーディングができるようになっていきます。ですから、一朝一夕で身に付くものではないということを理解していただけると、良いかと思います。

どうやってHTML・CSSを習得すれば良い？

HTML・CSSの習得方法は主に２つあります。

• 独学で習得する
• Webデザインスクールで習得する

それぞれについて、詳しく解説していきたいと思います。

独学で習得する

独学でHTML・CSSを習得する場合には、まず基本を理解する必要があります。
有名なサービスだとHTMLクイックリファレンスやProgateなどを利用すれば、HTML・CSSの知識は身につきやすいと思います。

ただ、筆者自身も学生時代にHTML・CSSを独学で習得しようと試みたのですが、雰囲気でなんとかコーディングをしていたため、今思い返すと実務的レベルのコーディングスキルは皆無でした。その後は、独学でHTML・CSSを習得するのは限界があると感じてWebデザインスクールに通いました。

Webデザインスクールで習得する

上記でも少し触れましたが、一番手っ取り早くHTML・CSSを理解し扱えるようにするのは、Webデザインスクールで習得する方法です。上記の独学では、無料で習得できるというメリットもありますが、その習得したHTML・CSSのスキルが現場や仕事として使えるものなのかは自分では分かりません。

Webデザインスクールであれば、先生に教わることができるので正しいコーディング方法を教わることができます。そのため「仕事で使える」コーディングスキルが身につくことができるのがWebデザインスクールに通う最大のメリットです。

おすすめなWebデザインスクール

数多くあるWebデザインスクールの中でも、テックアカデミーを現役Webデザイナーである筆者はおすすめします。

テックアカデミーは、現役且つ選別(審査)されたWebデザイナーがマンツーマンであなたのWebデザイン・コーディングの学習をサポートしてくれます。

オンラインスクールでWebデザインを学習するメリット・デメリットについては下記の記事にまとめているので、参考にしてみてください。

講師が全員現役Webデザイナーだから、現場のコーディング能力が身につく。

テックアカデミーの講師は“選考を通過した現役Webデザイナーのみ”のため、他のスクールよりもハイレベルで即戦力となるWebデザイン、HTML・CSSコーディングの知見やスキルを得ることができます。

そのため、就職や転職をする際に即戦力となり重宝されやすくなります。初学者の場合、本やインターネット上に書かれている情報からHTML・CSSのコーディング方法を学ぼうとしますが、制作現場で求められる力とギャップが生じます。

スクールに通わず、オンラインで完結。

「オンラインで完結って逆に大丈夫？」と思う方もいらっしゃると思いますがWebデザイナーの場合、住む場所を問わずどこでも働くことができる職業の１つでもあります。筆者自身、ここ1年以上フルリモートで在宅勤務をしています。

ですから、オンライン講座の時点からリモートに慣れておくことでフルリモートの企業やフリーランスでもギャップなく働き始めやすくなります。もちろん、自宅から学べるので通学時間がないというメリットもあります。

また、日本中のどこにでも、Webデザインを学べるスクールが存在します。
ただ、地方側へいくに連れて教える側のWebデザインレベルが疑わしい印象があります。大手のWebデザインスクールであれば、しっかりとしたカリキュラムや講師が選別されているため一定のWebデザインスキルが担保されています。

やはり本物のプロWebデザイナーを目指すのであれば、本物のプロWebデザイナーに学ぶことが１番の近道です。なぜなら、現場で求められるWebデザインレベルを実際に聞くことができますし、仕事のノウハウまで学ぶことができ実践的なWebデザインスキルを習得することができます。

HTML・CSSなどのコーディングでつまずいたら、メンターに相談できる

もしHTML・CSSのコーディングでつまずいても大丈夫です。
テックアカデミーなら、メンタリングの時間にペアプロ形式(マンツーマンでコードを見ながらコーディングをする)で、画面を共有しながらコーディングの相談をすることができます。

テックアカデミーでWebデザインを学ぶメリット

• 受講目的をヒアリングされ、あなたの目標を設定しサポートしてくれる
• 現場で活躍できるフルスタック(Webデザイン・コーディング)なWebデザイナーを目指せる
• 週２回、現役Webデザイナーとマンツーマンでビデオチャットができあなたの悩みを解消できる
• 通過率10%という狭き門を通過した現役Webデザイナーがメンターだから、実務レベルの学びが得られる

まとめ

いかがだったでしょうか。
HTMLとCSSの違いは、Webデザインに関する勉強をしたことがない方にとってよく分からない言葉だと思います。上記でお伝えした通り、HTMLやCSSを扱えるようにするには、教科書やWebサイトを読んだだけではコーディングをすることはできません。