【HTML/CSS入門】HTMLとCSSエンジニアにおすすめの資格と勉強方法

初心者

HTMLとは

HTMLとは、Hyper Text Markup Languageの略でWebサイトを作成するためのマークアップ言語です。

HTML以外にもマークアップ言語としてXMLなどがありますが、HTMLが最も一般的でほとんどのWebサイトに使用されている言語です。

要はWebサイトの見出しや段落などの文書の構造を形成するための言語です。

実際どのように使われているかと言うとWebサイトを開いた状態で「Ctrlキー+U」で確認することが出来ます。このソースコード(英語等で並んでいる文字列)がHTMLの正体です。

このソースコードを読み込ませてよく見るようなWebサイトへと変換しています。

頻繁に出てくる<>で記載されているタグによって、見出しや段落、リンクなどを設定しています。HTMLは非常に身近に存在しており確認しやすいので、ソースコードと実際のWebサイトを見比べて勉強することも出来ます。

またファンクションキーの「F12」を押して「デベロッパーツール」を活用すれば実際にHTMLのコード編集をすることも出来ますので、練習もしやすい環境があります。

タグ例

  • <p>:段落
  • <a>:リンクの作成
  • <img>:画像の表示
  • <h1>:見出し(h2,h3…)
  • <ul>/<li>:リスト

などがあります。

その他にもたくさんありますので、気になる方は実際に学んでみてください。

CSSとは

CSSとは、Cascading Style Sheetsの略でスタイルシート呼ばれ、Webサイトの文字のスタイルを指定するための言語です。

基本的にはHTMLと一緒に使用され、HTMLが文章構造を形成するのに対し、CSSでは配置や配色などを指定し、見栄えの良いWebサイトへとすることが出来ます。

たまにページの読み込みが遅い時、文字列のみが表示されることを経験したことがある方もいるかもしれません。その後ページがきちんと読み込まれると見栄えの整ったWebサイトが表示されることがあります。
この後者がCSSが反映されたWebサイトであるということです。つまりWebサイト作成においてCSSも欠かせない言語なのです。

CSSでは具体的に下記のようなことが出来ます。

  • フォントのサイズや色の変更
  • 枠の作成
  • 下線の設置や種類等の変更
  • ボタンの設置

その他にもCSSで様々なことが出来ます。またJavaScriptと組み合わせることで、動きのあるWebサイトを作成することが出来るようになります。

HTML同様、ファンクションキーの「F12」を押して「デベロッパーツール」を活用すれば、実際にフォントの色やサイズの変更などを試してみることが出来ます。

必ずHTMLと一緒に使われるスキルですので、HTMLとCSSをセットで学んでいくようにしましょう。

HTMLとCSSエンジニアにおすすめの資格

HTML/CSSを扱うエンジニアは、Webサイトの作成に関わる開発がメインになりますので、資格で言うとWebクリエイターやWebデザイナーに関わる資格を取得するのが望ましいでしょう。

HTML/CSSを扱うエンジニアにおすすめの資格はこの3つです。

  • HTML5プロフェッショナル認定試験
  • Webデザイン試験(資格名:Webデザイナー)
  • ウェブデザイン技能検定

HTML5プロフェッショナル認定試験

HTML5プロフェッショナル認定試験は、HTMLはもちろんCSSやJavaScriptなどのマークアップに関する知識やスキルが必要な試験です。

階級は2つに分かれています。

  • レベル1:HTML5プロフェッショナル認定試験 レベル1
  • レベル2:HTML5プロフェッショナル認定試験 レベル2

レベル1では、HTMLとCSSを使ってのWebサイトのデザインや制作が出来るレベルの方向けの試験で、レベル2は、それに加えJavaScriptや最新のマークアップ技術を必要とする試験です。

どちらも受験資格自体は特にありませんが、レベル2の認定を得るためには、レベル1とレベル2の両方に合格する必要があります。

HTMLとCSSを主に扱うのであればまずレベル1の試験を受けて資格を取得することをおすすめします。ただいづれ活躍の場を広げていくのであればJavaScriptなどのスキルは必要になってきますので、ゆくゆくはJavaScriptの習得及びレベル2の資格取得に向けて動いていくのが良いかもしれません。

それぞれの受験料は15,000円(税別)と人によっては高く感じるかもしれませんが、Webデザイン側の開発をしていきたい方にはかなりおすすめの資格であり、勉強をサポートしてくれるためのイベントやセミナーなどもありモチベーション高く取り組みことが出来ます。


Webデザイン試験(資格名:Webデザイナー)

Webデザイン試験は、その名の通りWebサイトのデザインに関わる試験で、HTMLやCSSなどの基本的な知識や実装技術を計るための試験です。

この試験に合格すればWebデザイナーという資格をもらうことが出来ます。

今後Webサイトの構築やWebデザイナーを目指す人にはおすすめの資格でしょう。

Webデザイン試験の合格率は公表されており、累計で66.1%、2019年度は88.2%と非常に高いです。

受験資格は特になく、誰でも受けることが出来、受験料は10,000円(税抜)となっています。


ウェブデザイン技能検定

ウェブデザイン技能検定は、Webデザイン関連の資格の中で唯一の国家資格となります。

WebデザインやHTML/CSSのコーティング技術はもちろん、Web全体に関わる幅広い知識が必要となる試験です。

階級は大きく3つに分かれており、それぞれに学科試験と実技試験があります。

  • 3級:学科/実技
  • 2級:学科/実技
  • 1級:学科/実技

3級の試験に関しては、特に受験資格は必要なく誰でも受けることが出来ます。※原則としてWeb関連の作成や運営の業務に従事もしくは従事しようとしている方

2級に関しては、3級に合格している必要があり、その他にも2年以上の実務経験など様々な受験資格が必要となります。

さらに1級になると学科試験の受験資格は、2級に合格かつその後2年以上の実務経験や7年以上の実務経験などが多くの条件が必要になります。また1級の実技試験を受験するためには、1級の学科試験の合格が条件となっています。

2級と3級に関しては、同日内に学科と実技の両方の試験が開催されており、同時に受けることが出来ますが、1級に関しては、受験資格からも分かるように別々の日程で組まれています。

料金体系は年齢によって変動があり、下記のようになっています。(非課税)

  • 3級・・・学科:5,000円 / 実技:5,000円 (35歳以上)または3,000円(35歳未満)
  • 2級・・・学科:6,000円 /実技:12,500円(35歳以上)または7,000円(35歳未満)
  • 1級・・・学科:7,000円 / 実技:25,000円 (実技はペーパー実技含む)

合格率は累計(2019年度時点)で、約53%程となっております。
唯一の国家資格ですので、興味のある方はぜひチャレンジしてみてください。


HTMLとCSSの勉強方法

HTMLとCSSはWebサイトの作成・コーティングに関わる案件が殆どです。

まずはこれらの技術を確立させ、その後デザインスキルを加えてWebデザイナー側に携わるのかそれともJavaScriptを習得してフロントエンドエンジニアを目指すのか決めていくのが良いでしょう。

HTMLとCSSの勉強方法としては大きく2つです。

  • 書籍
  • プログラミングスクール

書籍でHTMLとCSSを学ぶ

まずHTMLとCSSを学ぶのであれば、初心者向けの書籍を見ていくことから始まるでしょう。そして資格の取得も目指すのであれば、それぞれの資格の参考書も一緒に購入し勉強していくのがおすすめです。

またHTMLやCSSの場合、実際にWebサイト上からソースコードなどを見ることが出来ますので、あらかじめどういったものなのか見ておく方が良いかもしれません。

さらにHTMLとCSSだけでは単価を上げていくためには難しいため、今後どのポジションに携わりたいかを明確にし、それに向けたスキルの習得も頭に入れておく必要があります。ですので、それらも含めた書籍の購入や勉強を検討しておくことをおすすめします。

おすすめの参考書



プログラミングスクールでHTMLとCSSを学ぶ

書籍での勉強に抵抗があるのであれば、プログラミングスクールでHTMLとCSSを学ぶのが良いでしょう。

Webデザインスクールを見つけられればHTMLやCSSを教えてくれるでしょう。また折角であれば将来的なことも考えて、デザイン側のスキルもしくはJavaScriptなどのスキルが学べるのかどうかも把握しておくことをおすすめします。

おすすめのプログラミングスクール

最後に

HTMLとCSSはWebサイトの作成には欠かせない言語です。

そのため仮に別のポジションを目指す事になったとしても損はしないスキルと言えるでしょう。

さらにこれらのスキルに加え+αで習得していくことで、活躍できる場や自身の価値を一気に高めていく事が出来ます。

また単発で出来る案件も多いので、メインがエンジニアやデザイナーではなくとも副業としても活かせる言語ではあります。

興味のある方はぜひ学んでみてはいかがでしょうか。

HTMLとCSS案件の単価相場
https://freelance-attack.work/column/html-css-marketprice/