こんにちは！ イチヒラ(@ichihira_tw)です!
あなたはHTMLやCSSの知識がありますか？
HTMLやCSSを学ぶのは少し面倒ですが、一度覚えてしまうとかなり役に立ちます。
「じゃあHTMLとかCSSってどうやって学べばいいんだよ！」
と言いたくなる方もいるでしょう。
ですが安心してください。
ここに来たあなたには、WEBエンジニア歴8年のボクがいます！
今回は、WEBエンジニアのボクがオススメのするHTML+CSSを学べるサイトと書籍について紹介していきます！
もくじ
そのまえに、なんでHTML+CSSを学ぶの？
HTML+CSSの最低限の知識は必須
最近ではブロガー向けのテーマがたくさん出てきて、HTMLやCSSの知識がなくてもそれなりの記事が書けるようになりました。
しかし、テーマを入れればオシャレな記事が書けるようになった反面、みんな似たようなデザインになってしまうというデメリットもあります。
差別化を図るにはどうしてもWordpressのカスタマイズが必要になってきます。
WordPressをカスタマイズしたいならHTML+CSSの最低限の知識は必須！
いきなり複雑なHTMLやCSSを覚えろ！というわけでなく、簡単なものでもいいので少しずつHTMLとCSSの知識を覚えていきましょう！
オススメのWEBサイト
ドットインストール
毎日忙しい方に一番オススメなのがドットインストールです。
ドットインストールは、HTMLやCSS、いろいろなプログラミング言語を動画で学ぶことができます。
1レッスン3分ほどの動画で解説されており、スマホでも閲覧可能！
通勤時間や休憩中などの、隙間時間の勉強にもピッタリのサイトです。
一部のレッスンは有料でプレミアム会員にならないといけませんが、HTMLとCSSの知識の部分はほぼ無料でおさえることができ、最低限の知識は学ぶことが可能です。
WordPressはPHPというプログラム言語で動いているので、PHPも学習したい場合はプレミアム会員（月額980円）になってしまうのもアリです。
Progate
こちらもオンライン学習ができるサイトです。
ドットインストールと違って動画での解説はありませんが、初心者でもかなりわかりやすく解説されているので安心してください。
Progateはブラウザ上で実際にHTMLやCSSを入力して動作確認と答え合わせができるのが最大の特徴です。
わざわざエディターをインストールする必要がなく、ブラウザだけで学習できるのですぐにレッスンに取り掛かれます。
基本的には有料のレッスンばかりですが、初級レッスンは無料で学習することが出来るので一度試してみることをオススメします。
学習してみて自分に合いそうだったら月額980円の有料プランにしてみるといいでしょう。
HTML+CSS以外にも、javascript・jQuery・PHP・Ruby・Pythonなどのプログラムも学ぶことが出来ます。
とくにプログラム関係は普通だったらPC上にプログラムが動作する環境を設定しなければいけないところを、ブラウザだけで確認できるので、「プログラムも学びたい」と思っているならProgateがオススメです。
HTMLクイックリファレンス
HTMLクイックリファレンスは学習サイトというよりも、HTMLやCSSのリファレンスサイトです。
前述のサイトではHTMLタグやCSSをすべて網羅しているわけではありません。
場合によっては、ドットインストールやProgateで習わなかったHTMLやCSSを使う必要が出てくる場合もあります。
そんな時はクイックリファレンスでいろいろ探してみるといいでしょう。
また、「marginって上下10px、左右20px設定する場合、margin:10px 20px;だっけ？margin:20px 10px;だっけ？」と悩んだときは、ドットインストールなどの学習サイトを見るよりも、リファレンスサイトを見たほうが早いしわかりやすいです。
オススメの書籍
いちばんやさしいHTML5＆CSS3の教本
何冊かHTML5やCSS3の本を読みましたが、この本が一番わかりやすかったです。
HTMLとCSSの基礎はこの一冊で完全に抑えることが出来るので、買っておいて損はない一冊です。
かなり詳しく書かれている箇所もあり、そこは少し読むのに気力がいりますが、読めばHTMLとCSSの基礎力はきちんと身に付きます。
WEBエンジニアをやっているボクも「そうだったのか！」と気づかされる部分もあり、HTMLやCSSをなんとなーく理解している人にもオススメの本です。
HTML5&CSS3デザインブック
こちらはレスポンシブデザインを学びたいならこの本！って感じです。
レスポンシブデザインはPC用HTML+CSS・スマホ用HTML・CSSと分けて作らず、共通のHTML・CSSファイルでPCとスマホで適切なデザインを表示する技術です。
最近のWordpressのテーマはレスポンシブデザインが多いので、レスポンシブの技術は覚えておいて損はありません。
例えば、ボクのブログもレスポンシブデザインでできています。
ある程度HTMLとCSSの基礎知識があったほうが理解しやすいですが、知識がなくても本の通り進めていけば知識が身に付きます。
さいごに
さらにステップアップするならjavascriptやPHPも学ぼう！
HTMLやCSSを勉強するだけで、十分Wordpressのカスタマイズはできます。
しかしブログのジャンルによっては、記事内でスライドショーをつけたかったり、特殊なランキングを作ったりしたくなるかもしれません。
そんな時に役立つのがjavascriptやPHPの知識です。
javascriptはスライドショーなどのコンテンツを作るのに必要な知識です。
さらにWordpressはPHPでできているので、PHPを習得すればプラグインも自作できるようになります。
どうしても希望のプラグインが見つからなかった場合に、これらの知識は役立つのでステップアップをするならjavascriptやPHPも学んでみましょう！
