ブログを書くのに便利な世の中になって久しいですね。WordPressやはてなブログのようなCMSを使えば、HTML・CSSの知識が無くてもキレイなデザインの記事が書けますよね。
ただ、それでも自分独自のデザインや装飾をしたければ、HTML/CSSの知識が必要となってきます。
また業者にサイト制作を依頼している事業主もHTML/CSSの知識があれば、自分でちょっとした更新ができるようになります。
この記事は以下のようなHTML/CSSを基本から学びたい方向けのまとめ記事です。
- HTMLって何?という初心者の方
- ブログをカスタマイズしたいけどHTMLとかCSSがわからない方
- 制作は業者まかせでサイトを運営してるけど、自分で更新したい方
年始にHTML/CSSを勉強を始めようと目標を立てている方におすすめの、ネット記事や参考書をご紹介します。
WEBサイト制作に関する記事
画像制作・デザインからコーディングまで学べる
ラブリーでおしゃれなデザインのサイトLopan.jpさんの記事です。サンプルサイトの制作を通して、サイトの制作の流れを実践的に学べます。photoshopのテクニックなどPRする画像制作のコツも学べます。サイトを作る目的をきちんと考え、目的に基づいて作るため、見た目だけのサイト作りではないところが実践に役立ちます。
この記事は続きものになっていてます
Lopan.jpさんはチュートリアル形式の教科書のようなサイトも公開されており、HTML一覧やCSS一覧など、「あれなんだっけ?」というときのチートシートとして大活躍です。
HTMLとCSSの基本をまとめた初心者向け入門記事
はてなブログテーマSpirea – テーマ ストア制作者のid:shun_prog0929 さんの記事です。図解とサンプルコードをふんだんに使ってHTML・CSSの基本的な文法から具体的なコーディングのための練習方法や勉強方法がまとめられています。私もCodePen使っています。トライ・アンド・エラーで自分の書いたコードで思い通りの表現できると楽しくなってきますよ。
参考 CodePenブロガー向けカスタマイズに使えるHTML・CSS入門記事
はてなブログテーマBrooklyn – テーマ ストア制作者のid:shiromatakumi さんの記事です。簡単なサンプルページを作りながら、サイトの構成に必要なHTMLやよく使うリンクや画像挿入、ボックスを横並びにする方法まで学べます。この基本が分かれば、ブログカスタマイズも捗りますね。
ブロガー向けCSS入門
最近はてなブログテーマmonolithic – テーマ ストアを公開されたid:nasust さんの記事です。ブロガー向けのCSSの記事が基本から各セレクタの記述方法まで実践的に解説されています。ブログデザインもかっこいいですよね。
こちらの記事は続きものです。
ブロガー向けWEBデザイン入門 – nasust life blog
こう見ると、はてなブログテーマ制作はCSSの勉強に良いとわかりますね。
HTML/CSSを学ぶ参考書
ネット記事で基本の枠組みを理解してから、困った時にさっと調べられるテキストがあると役立ちます。ここでは自分が買って参考にしてる参考図書をご紹介したいと思います。
HTML/CSSを基礎から学びたい人に
HTMLとかCSSとかなんとなくコピペして使ってるけどよくわからない、という方におすすめの参考書です。本当に本当の初心者さんから読めます。きちんと理解するから応用力も身につきます。
[wpap type=”detail” id=”4797388544″ title=”いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)”]
文字ばっかりの参考書はちょっとなあという方は下の「たった2日で楽しく身につく HTML/CSS入門教室」方がおすすめです。
[wpap service=”with” type=”detail” id=”4797383038″ title=”たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA)”]
こちらはイラストも豊富でイメージしやすく、基礎知識がない方も読みやすい1冊です。
初心者~中級者向け
私が一番始めに買った本です。ある程度基本知識があった上で、初心者が読むのに適した参考図書です。かゆいところに手が届く感じで、初心者がつまづきやすいところまでフォローがあります。
[wpap type=”detail” id=”484438029X” title=”いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリ…”]
中級者向け
2冊目に買った参考書です。
webページでよく使うボックスのレイアウトからレスポンシブデザイン、ブログ・ニュースサイトのレイアウト、ビジネスサイトのレイアウトまで実践的にサイト制作が学べます。テキスト通りにサンプルサイトを作ることで、サイト制作に必要なテクニック・知識が身に付きます。
本の配色やレイアウトも見やすく、初心者から中級者まで長く使える参考書です。
[wpap type=”detail” id=”4802610068″ title=”WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)”]
HTML/CSS Webデザインが学べるオンラインスクール・動画
テキストを一人で読むのは挫折しそうで不安…という方は動画で学ぶのもおすすめです。
ドットインストール
ドットインストールは基本無料でHTML・CSS・Javascript・PHP・その他プログラミング言語が3分動画で気軽に学べます。私もHTML/CSSこちらで勉強しました。動画で引っ張ってくれるのが良いですね。
無料オンライン学習サービスProgate
『Progate』は無料で、ブラウザ上で実際にコードを書きながら学べるオンライン学習サービスです。各分野ごとに達成率が確認でき、モチベーションも保ちやすいです。Twitterでもよく学習成果をツイートしてる方を見かけます。これが無料とは…
TechAcademy
無料のオンラインサービスでは挫折しちゃうかも…という方には、一対一で指導してくれるパーソナルメンター制度のあるTechAcademyブートキャンプがおすすめです。
TechAcademyのWebデザインコースでは実際に4つのサイトを制作・リリースすることで実務に近い形で学ぶことができます。
- レイアウト・配色・タイポグラフィ、Webデザイン原則
- HTML/CSSの理解とコーディングスキル
- 画像加工・ワイヤーフレーム・Git/GitHubの理解
- モバイルデザインの理解とレスポンシブデザイン対応
- JavaScriptライブラリ・Sass/Compassによる効率的な制作
- オリジナルWebサイトのデザインスキル
短期間でさくっと学べるのがHTML/CSSに良いところです。私も実際にサイトを制作を独学で勉強したときは2週間位集中してやれば一通り身につきました。
そこから日々最新の情報を学ぶ必要はあるのですが、基本は短期間で習得可能です。集中するのがポイントです。
TechAcademyのHTML/CSSトレーニングでは基礎を2週間で習得出来る集中コースです。こちらもメンターが付くので安心ですね。
TechAcademyマガジン | 教育×テクノロジーのオンライン専門情報誌はWeb系のニュースサイトとしても質の良い記事がそろっていますね。
手を動かそう!
勉強は継続が大事なのは当然ですが、何より手を動かすことが重要だと思います。とりあえず基本知識をざっくり理解してから実際にページをいくつか作って、困ったら調べながら勉強するのが良いと思います。上記に上げた記事や参考書もサンプルサイトを作りながら学ぶ形式になっているので、ぜひ自分の手を動かして学んでいきましょう。
私もまだまだ勉強すべき知識があって、いっぱいいっぱいですが…。
今年はJavaScriptやPHPの勉強を進めたいです。
勉強を始める前は「自分にできるかな~」と不安ですが、プログラミングと違ってHTML・CSSは基本、暗記で何とかなるので、きちんと勉強しさえすれば誰でもできます。とにかく前へ進めば霧も晴れていくでしょう。私も勉強がんばります!