Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

初心者がHTML/CSSを勉強するのにおすすめの入門記事・参考書

f:id:syofuso:20170103160039j:plain
ブログを書くのに便利な世の中になって久しいですね。WordPressやはてなブログのようなCMSを使えば、HTML・CSSの知識が無くてもキレイなデザインの記事が書けますよね。

ただ、それでも自分独自のデザインや装飾をしたければ、HTML/CSSの知識が必要となってきます。
また業者にサイト制作を依頼している事業主もHTML/CSSの知識があれば、自分でちょっとした更新ができるようになります。

この記事は以下のようなHTML/CSSを基本から学びたい方向けのまとめ記事です。

  • HTMLって何?という初心者の方
  • ブログをカスタマイズしたいけどHTMLとかCSSがわからない方
  • 制作は業者まかせでサイトを運営してるけど、自分で更新したい方

年始にHTML/CSSを勉強を始めようと目標を立てている方におすすめの、ネット記事や参考書をご紹介します。

WEBサイト制作に関する記事

画像制作・デザインからコーディングまで学べる

Webサイトの作り方のまとめ!デザイン制作からコーディング手前まで。
ラブリーでおしゃれなデザインのサイトLopan.jpさんの記事です。サンプルサイトの制作を通して、サイトの制作の流れを実践的に学べます。photoshopのテクニックなどPRする画像制作のコツも学べます。サイトを作る目的をきちんと考え、目的に基づいて作るため、見た目だけのサイト作りではないところが実践に役立ちます。
この記事は続きものになっていてます
Webサイトの作り方のまとめ!番外。
Webサイトの作り方のまとめ!コーディングまで。
Webサイトの作り方のまとめ!トップページ完成まで。

またLopan.jpさんはチュートリアル形式の教科書のようなサイトも公開されています。
Webサイトの作り方のまとめ
HTML一覧やCSS一覧など、「あれなんだっけ?」というときのチートシートとして便利です。

Webサイトを作るのに必要な知識のガイド

これからWebサイトの制作をしたいけど、何から勉強したらいいの?っていう人のためのガイド
Wordpress本も執筆されているWeb Design Recipeさんの記事です。サイト制作に必要な身に付けるべき知識とその勉強方法、 Webサイトを作成するときに使うツールについて丁寧にわかりやすく解説されています。HTML、CSSの意味や役割からwebサイトが表示される仕組みまでwebの基本が学べます。
Webサイトを作成するために必要な知識、プログラム言語がフロー形式でまとまっているのも便利ですね。

HTMLとCSSの基本をまとめた初心者向け入門記事

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】 - いつ俺〜いつから俺ができないと錯覚していた?〜
はてなブログテーマSpirea - テーマ ストア制作者のid:shun_prog0929 さんの記事です。図解とサンプルコードをふんだんに使ってHTML・CSSの基本的な文法から具体的なコーディングのための練習方法や勉強方法がまとめられています。私もCodePen使っています。トライ・アンド・エラーで自分の書いたコードで思い通りの表現できると楽しくなってきますよ。
codepen.io

ブロガー向けカスタマイズに使えるHTML・CSS入門記事

shiromatakumi.hatenablog.com
はてなブログテーマBrooklyn - テーマ ストア制作者のid:shiromatakumi さんの記事です。簡単なサンプルページを作りながら、サイトの構成に必要なHTMLやよく使うリンクや画像挿入、ボックスを横並びにする方法まで学べます。この基本が分かれば、ブログカスタマイズも捗りますね。

ブロガー向けCSS入門

初めてのCSS。ブログをカスタマイズしたい人向けの解説 - ブロガー向けCSS入門 - nasust blog
最近はてなブログテーマmonolithic - テーマ ストアを公開されたid:nasust さんの記事です。ブロガー向けのCSSの記事が基本から各セレクタの記述方法まで実践的に解説されています。ブログデザインもかっこいいですよね。
こちらの記事は続きものです。
ブロガー向けWEBデザイン入門 - nasust blog

こう見ると、はてなブログテーマ制作はCSSの勉強に良いとわかりますね。

個人事業主向けのFTPソフトの使い方やブログテーマ制作など

手前味噌ですが自分の記事から。個人事業主が自分でサイト更新するための基本知識を解説しています。
個人事業主のためのホームページ更新方法 - Minimal Green
ブログカスタマイズの前に理解しておくべき基本知識
コードをコピペする前に HTMLタグの基本 a アンカータグ - Minimal Green
HTMLがきっちり組まれているはてなブログテーマ制作はCSSの勉強におすすめです。
自作テーマのススメ/はてなブログテーマ制作の流れなど - Minimal Green

HTML/CSSを学ぶ参考書

ネット記事で基本の枠組みを理解してから、困った時にさっと調べられるテキストがあると役立ちます。ここでは自分が買って参考にしてる参考図書をご紹介したいと思います。一番始めに買った本です。ある程度基本知識があった上で、初心者が読むのに適した参考図書です。かゆいところに手が届く感じで、初心者がつまづきやすいところまでフォローがあります。

2冊目に買った参考書です。
webページでよく使うボックスのレイアウトからレスポンシブデザイン、ブログ・ニュースサイトのレイアウト、ビジネスサイトのレイアウトまで実践的にサイト制作が学べます。テキスト通りにサンプルサイトを作ることで、サイト制作に必要なテクニック・知識が身に付きます。
本の配色やレイアウトも見やすく、初心者から中級者まで長く使える参考書です。

オンラインスクール・動画

テキストを一人で読むのは挫折しそうで不安…という方は動画で学ぶのもおすすめです。
ドットインストール
ドットインストールは基本無料でHTML・CSS・Javascript・PHP・その他プログラミング言語が3分動画で気軽に学べます。

オンラインブートキャンプ無料体験

TechAcademyのブートキャンプでスパルタ式に?集中的に学ぶのも良いですね。
TechAcademyマガジン | 教育×テクノロジーのオンライン専門情報誌はWeb系のニュースサイトとしても質の良い記事がそろっています。

手を動かそう!

勉強は継続が大事なのは当然ですが、何より手を動かすことが重要だと思います。とりあえず基本知識をざっくり理解してから実際にページをいくつか作って、困ったら調べながら勉強するのが良いと思います。上記に上げた記事や参考書もサンプルサイトを作りながら学ぶ形式になっているので、ぜひ自分の手を動かして学んでいきましょう。
私もまだまだ勉強すべき知識があって、いっぱいいっぱいですが…。
今年はJavaScriptやPHPの勉強を進めたいです。

勉強を始める前は「自分にできるかな~」と不安ですが、プログラミングと違ってHTML・CSSは基本、暗記で何とかなるので、きちんと勉強しさえすれば誰でもできます。とにかく前へ進めば霧も晴れていくでしょう。私も勉強がんばります!