スキル習得ノウハウ ブログ

【デザイン学生の体験談】HTML/CSSは独学で使える?勉強方法教えます!




マリ
こんにちは!webデザイン勉強中のフリーライター・マリです!
今回はコーディングに興味のある皆さんに向けて、
「HTMLやCSSは独学で使えるの?」という疑問にお答えします!

サイト制作に欠かせないHTMLとCSS。
興味はあるけれど、コーディングって独学じゃ難しそう……。そう思っていませんか?

ここが知りたい!

  • 独学で学べる?学べるならどこまでできる?
  • 学んだらどんなことができる?

そんな疑問に、webデザインを学んでいる学生である私がお答えします!
HTMLやCSSを勉強したらどんな仕事ができるようになるか、具体的な勉強方法はどんな感じになるかご紹介します。

独学でHTML/CSSは使えるようになる?

マリ
独学でもできますよ!

文字の羅列に抵抗がない人なら、独学でも結構しっかりしたサイトが作れます!

英語など新しい言語の習得が得意な人、プラモデル制作などコツコツ組み立てるのが好きな人なら、きっと短期間でマスターできますよ。

ここまでは独学可能!HTML/CSSでできること

実際どんな仕事ができるかや勉強方法について説明する前に、「HTML/CSSとはなにか?」について少し触れておきますね。

HTML/CSSが組めると、かなりしっかりしたサイトが作れますし、コーディングの仕事もある程度のものまではできるようになりますよ!

HTMLでできること

HTMLはサイト制作の一番基礎になる部分です。

こんなことができる!

  • サイトの骨格を作る
  • 文字や画像を入れる

この「学生フリーランス」というサイトを例にとると、

  • 一番上に「学生フリーランス」のロゴを画像として挿入する
  • ロゴの下に「HOME」「ブログ」「運営メンバー」「お問い合わせ」をナビゲーションとして入れる
  • 記事本文の文章、広告や投稿履歴を入れる

こんなざっくりした構造を作っているのがHTMLです。

骨格を作り、「ここはナビゲーションですよ」「ここは文字ですよ」と指定していくだけなので、構造としては比較的簡単です。

まずはここから覚えましょう!

CSSでできること

HTMLで作ったサイトを元にして、CSSで装飾を加えていきます。

こんなことができる

  • それぞれの要素の大きさ・形・色・場所などを指定する

この「学生フリーランス」というサイトを例にとると、

  • 背景をうっすらグレーにし、記事の部分の背景を白にする
  • ナビゲーションの背景を青にし、字を白にする
  • 本文を画面の左側に、広告や投稿履歴を右に配置する

CSSは設定しなければならない項目が多く、自由度も高い分、最初のうちはかなりゴチャゴチャして分かりづらいと思います。

でも必要なものをどんどんコピペしていけばサイトが作れるので、慣れてしまえば結構大丈夫!

ここから先は独学じゃ難しいかも……HTML/CSSでできないこと

ただ、全てのサイトがHTML/CSSでできているわけではありません

ちょっとここから先は独学で難しいかも……というコーディングについても触れておきます。

サイトに動きをつけるJavascript

動きのあるサイトを作るとき使うのがJavascriptです。

こんなことができる!

  • ポップアップウィンドウ(パスワードが必要なサイトなどで表示されるウィンドウ)
  • スライダー(画像がメリーゴーランドのようにスライドして切り替わる)
  • モーダルウィンドウ(画像をクリックすると大きくポップアップ表示される)

Javascriptは独学で勉強できなくはないのですが、1つでもスペルを間違えるとまったく動かなくなります。

「:」「;」、「.」と「,」など、微妙なところを1つ間違うだけで1セクション全部が動かなくなってしまいます。

文法自体が間違っているのか、文法は合っているがどこかに小さなミスがあるだけなのか初心者では判断が難しいため、間違い探しができる経験者について教えてもらうのをおすすめします。

お問い合わせフォームやショッピングカートを作るPHP

企業サイトなどで多用されていますが、独学では習得困難なのがPHPです。

こんなことができる!

  • 暗号化が必要なお問い合わせフォーム・ショッピングカート
  • ブログやSNSなど、書き込んだ文字・写真を使って新たなページを作るシステム

実際にサイト制作を始めると、「空席/満席がその場で確認できて、予約もできるようにしてほしい」とクライアントに頼まれるケースがありますが、独学ではまず無理です。

どうしてもできるようになりたい場合は、HTML/CSS/Javascriptを全てマスターした上で、プログラミングスクールに通って学ぶのがいいでしょう。

番外編:WordPress

近年増えているのが「WordPress」というシステムで作られたサイトです。

マリ

この「学生フリーランス」というサイトもWordPressで作られています!

自由度の高いブログのようなシステムで、記事全体のイメージを作る「テーマ」を設定し、「記事を作る」「お問い合わせフォームを作る」といった用途別の「プラグイン」を導入することで、立派なwebサイトを構築することができます。

コーディングの知識がなくても立派なサイトが作れるので、近年人気のサイト作成方法です。

ライターとして仕事をしている人は、「WordPress入稿」ができると単価が上がりやすいので、一度挑戦してみるといいですよ。文字装飾に関するHTML/CSSがある程度わかれば、十分に対応可能です。

ただし「WordPressのコーディング案件」は受けないように!

WordPressは既存の「テーマ」「プラグイン」を使ってサイトを作るのは簡単です。

ただし、「テーマ」や「プラグイン」自体を作るとなると話は別。

PHP必須になります。プログラミングを学んでPHPが理解できるようになるまでは、避けるようにしてください。

HTML/CSSが使えたら、どんな仕事ができるようになる?

次は実際にHTML/CSSが使えたら、どんな仕事ができるようになるか見てみましょう!

直接的にはこんな仕事ができる!

職種としてはコーダーになります。

デザインカンプ(webデザイナーが作ったサイトのデザイン画像)をもとに、HTML/CSSを組んでwebサイトを作成する仕事です。

仕事の値段相場としては、以下のような感じです。

  • HTML/CSSコーディング(素材あり)5,000〜50,000円
  • ランディングページ(LP)制作(1〜2ページ)50,000〜120,000円

引用:Lancers「仕事の種類・参考価格」

ランディングページ(LP)とは、web上の広告をクリックしたときに飛ぶ縦長の商品紹介ページのことです。

この参考価格はおそらくデザインカンプ制作〜コーディングまで全て含めた値段ですが、コーディングのみの案件も多いです。

サイト制作に比べるとコーディングが簡単なものが多いので、狙い目のジャンルです。

間接的にはこんな仕事で役に立つ

ブロガーやwebライターは、文字装飾に関わるHTML/CSSを覚えておくと役立ちます。

セールスライティングができるライターなら、ランディングページ(LP)制作で力を発揮できるでしょう。コーディングが未熟でも、サイトの構造がわかっているだけでも大きな強みになるはずです。

また、デザイナーなど異業種のプラスワンとしても効果的。デザイナーがコーディングもできるようになると、クライアントにとっては「デザイナー」「コーダー」の2人に頼まなければいけない仕事が1人に全部任せられるため、手間が省けて重用されやすいです。

HTML/CSSを学ための4ステップ

直接的にも間接的にも仕事の役に立つHTML/CSS。

実際の勉強はどう進めればいいのか紹介します!

ステップ1:コーディングソフトをダウンロードする

まずはコーディングソフトをダウンロードしましょう。

フリーソフトの「Atom」か「Brackets」が定番です。

ステップ2:基本的な型をつかむ

次はHTML/CSSの基本構造を本やネットで勉強しましょう。

いいものがたくさん出ていますが、「サルワカ」というサイトが分かりやすくておすすめです!

HTML/CSSはひとつの言語のようなもの。基本的な文法にあたる構造を学んで、簡単なサイトを作れるようになりましょう。

ステップ3:使えるタグを少しずつ増やす

HTML/CSSの基本的な構造が作れるようになったら、次は使えるタグをどんどん増やしていきましょう。

語学に例えるなら、「使える単語・イディオムを増やす」段階です。

ネットで検索をかけ、かっこいい・使えそうなタグを見つけたら、コピー&ペーストでどんどん使ってみましょう。

うまく動かなかったり、デザインが崩れてしまうこともあると思いますが、あれこれと工夫しているうちにどんどん上達していくはずです。

ステップ4:センスを磨く

あとはセンスを磨くのみ!

かっこいいなと感じるホームページやランディングページを見ながら、似せたものを作ってみましょう。

企業のサイトはJavascriptやPHPを多用している場合が多く、難しく感じるかもしれませんが、ほとんどの構造を作っているのはHTML/CSSのはず。HTML/CSSをマスターすれば、難しそうなサイトでもかなりの部分を似せて作れます。

ぜひ挑戦してみてくださいね!

HTML/CSSの独学は可能!その先まで学びたいなら習うのがおすすめ

マリ
HTML/CSSの独学は可能です!

まずは無料のコーディングソフトをダウンロードし、試しにちょっと触ってみてください。

オンラインにも分かりやすい無料の解説サイトや動画がたくさんあるので、それを見ながら勉強してみてくださいね。

ただし、JavascriptやPHPなど独学ではなかなか難しい部分もあるので、HTML/CSSを学んでみて「もっと勉強したい」と思った方は、プログラミングスクールなどで習うのがおすすめです。

  • この記事を書いた人
  • 最新記事
マリフジモト

mari

一般企業に6年勤め、ハローワークの求職者支援訓練を受けてフリーランスに転向した30代女性。一度社会に出た人視点、デザイナー・ライター視点で情報発信します。

-スキル習得ノウハウ, ブログ

© 2021 学生フリーランス