HTML/CSS、何から勉強する？

自分のサイトって憧れますよね。
どうせつくるなら自分でいろいろデザインをカスタムできればいいのに。
でもHTML/CSSって難しそうだし、独学するにしても何から始めればいいんだろう？
そんな人向けに、私が何となくそれっぽいものを組めるようになった勉強法をまとめました。

基本はテンプレートを使うよ！という人も、ちょっと意味が分かるだけで編集が格段に楽になること間違いなし。

1.まずは無料で触ってみる

できるか分からないのに最初からお金をかける方法はハードルが高くないですか？
世の中には初歩から無料で解説してくれているサイトがあるもの。また、Youtubeにも解説動画が以外とあります。
以下は私が最初に見てみたページの一例です。

とほほのWWW入門

かなり歴史のあるサイトで、サイト作成の流れからHTMLタグ・CSSプロパティの解説までかなり細かく掲載されています。
これが個人運営、だと！？

とほほのＷＷＷ入門

セイト先生のWeb・ITエンジニア転職ラボ

HTML/CSSの入門動画をアップロードしているYoutubeチャンネルです。
動画になっているので実際の流れが視覚的に分かりやすいのがポイント。

HTML/CSS入門講座

2.書籍で勉強する

もっと本格的に知りたい、組んでみたい！という気持ちがでたら入門書での勉強がおすすめです。
出版社を通っているだけあります。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

売れているとの宣伝文句通りかなり分かりやすいです。
読みながら一緒にコードを書くことで、構造を理解しながら今時のおしゃれなレスポンシブデザイン（スマホとパソコン両方に対応したデザインのこと）のページを一緒に組んでいくことができます。
また、さらに勉強を続けたい人には同著者によるJavaScriptと入門から一歩踏み込んだHTML/CSSの本もあります。
※でもSNSアイコンは規約に則り公式のものを使いましょう

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ

3.動画で勉強する

ここで言う動画は有料で視聴する動画講座になります。
長い文章を読むのがだるい人におすすめの方法です。

デジハリONLINE　Adobeマスター講座

いや、なぜここに来てAdobeの講座なの？と思われたかもしれませんがHTML/CSSの基礎が動画で学べます。
理由は簡単、ホームページエディタ（コードを書くためのソフト）がAdobe CCに含まれているからです。

Adobe CCを通常契約するより安いし講座もついててお得すぎる。
IllustratorやPhotoshopで画像などの素材まで自作することを検討している方には特におすすめ。

Adobe（アドビ）マスター講座（Adobe CC ライセンス付属）【デジハリ公式】｜通信講座 |デジハリ・オンラインスクール

Udemy

言わずと知れた動画型学習サイトです。
セールを狙うのです。通常の価格より大幅値下げされててびっくりするので。

Online Courses - Learn Anything, On Your Schedule | Udemy

Doorkeeper （CSS Nite）

ある程度分かるようになったら、オンラインセミナーで勉強に新しい風を取り込むのもおすすめです。
特に、「朝までマークアップ」などの朝までシリーズは当日視聴だけなら無料！

CSS Nite

4.とにかく書いてみる

とりあえず手を動かしましょう。
自分で実際に挙動を知ることに勝る勉強はありません。
分からなかったらとりあえずググる！
思った表示にならなかったら検証する！

Visual Studio Code

ちなみに、ぶっちゃけメモ帳機能があればサイトが組めるのをご存知ですか？でも打ち間違いをしても見つけるのが大変すぎますね。
そんなときは無料のコード編集エディタ！
VS CodeはMicrosoft公式が提供しており、拡張機能も豊富。HTML/CSS以外の言語にも対応しています。

Visual Studio Code – コード エディター | Microsoft Azure

Google Chrome

ブラウザなら大抵そのページの「ソース表示」及び「検証」機能が備わっています。
ページ内右クリックで表示されるメニューの下の方にあるはずです。
うまくいかないなという時、コードのどこに問題があるのか確認するためにとても重要。

MDN

Mozilla公式によるウェブ技術に関する情報が網羅されたサイトです。
他の方法と併用して、分からないHTMLタグやCSSプロパティを調べながら勉強するのが理解への近道。

開発者向けのウェブ技術 | MDN

Qiita

技術者が集まっているnoteみたいなところです。
Qiita内で検索してもよし、ググる際にキーワードに放り込むのもよし。

エンジニアに関する知識を記録・共有するためのサービス - Qiita

---

HTML/CSSはそんなに怖くない

HTML/CSSは厳密にはプログラミング言語とは異なる言語です。
書いたらすぐにブラウザ上に反映されるという分かりやすさがあります。
書き方がたとえ間違っていてもうまいこと表示されないだけで、何も怖いことはないんですね。試行錯誤しまくれます。
（HTMLは要素の意味をコンピューターに理解させるためのものなのでできるだけ正しいに越したことはありませんが…！）

ぜひ軽率にHTML/CSSにズブズブ沼って行ってください。
一緒に苦し、いや溺……楽しくやりましょう。