Hatena Blog Theme Custom

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

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

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

ブログカスタマイズの前に理解しておくべき基本知識
コードをコピペする前に HTMLの基本 a アンカータグ - Minimal Green
HTMLがきっちり組まれているはてなブログテーマ制作はCSSの勉強におすすめです。
自作テーマのススメ/はてなブログテーマ制作の流れなど - Minimal Green

HTML/CSSを学ぶ参考書

ネット記事で基本の枠組みを理解してから、困った時にさっと調べられるテキストがあると役立ちます。ここでは自分が買って参考にしてる参考図書をご紹介したいと思います。

HTML/CSSを基礎から学びたい人に

HTMLとかCSSとかなんとなくコピペして使ってるけどよくわからない、という方におすすめの参考書です。本当に本当の初心者さんから読めます。きちんと理解するから応用力も身につきます。

初心者~中級者向け

私が一番始めに買った本です。ある程度基本知識があった上で、初心者が読むのに適した参考図書です。かゆいところに手が届く感じで、初心者がつまづきやすいところまでフォローがあります。

中級者向け

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


HTML/CSS Webデザインが学べるオンラインスクール・動画

テキストを一人で読むのは挫折しそうで不安…という方は動画で学ぶのもおすすめです。

ドットインストール

f:id:minimalgreen:20180314233517p:plain

Dotinstall
ドットインストール

ドットインストールは基本無料でHTML・CSS・Javascript・PHP・その他プログラミング言語が3分動画で気軽に学べます。私もHTML/CSSこちらで勉強しました。動画で引っ張ってくれるのが良いですね。

無料オンライン学習サービスProgate

f:id:minimalgreen:20180314233010p:plain
『Progate』は無料で、ブラウザ上で実際にコードを書きながら学べるオンライン学習サービスです。各分野ごとに達成率が確認でき、モチベーションも保ちやすいです。Twitterでもよく学習成果をツイートしてる方を見かけます。これが無料とは…
prog-8.com

TechAcademy

無料のオンラインサービスでは挫折しちゃうかも…という方には、一対一で指導してくれるパーソナルメンター制度のあるTechAcademyブートキャンプがおすすめです。
f:id:minimalgreen:20180314232004p:plain
TechAcademyのWebデザインコースでは実際に4つのサイトを制作・リリースすることで実務に近い形で学ぶことができます。

TechAcademy
Webデザインコース

f:id:minimalgreen:20180314232204p:plain

身に付くスキル
  • レイアウト・配色・タイポグラフィ、Webデザイン原則
  • HTML/CSSの理解とコーディングスキル
  • 画像加工・ワイヤーフレーム・Git/GitHubの理解
  • モバイルデザインの理解とレスポンシブデザイン対応
  • JavaScriptライブラリ・Sass/Compassによる効率的な制作
  • オリジナルWebサイトのデザインスキル

短期間でさくっと学べるのがHTML/CSSに良いところです。私も実際にサイトを制作を独学で勉強したときは2週間位集中してやれば一通り身につきました。そこから日々最新の情報を学ぶ必要はあるのですが、基本は短期間で習得可能です。集中するのがポイントです。TechAcademyのHTML/CSSトレーニングでは基礎を2週間で習得出来る集中コースです。こちらもメンターが付くので安心ですね。

f:id:minimalgreen:20180315000957p:plain

TechAcademy
HTML/CSSトレーニング

TechAcademyの無料体験の詳細

TechAcademyマガジン | 教育×テクノロジーのオンライン専門情報誌はWeb系のニュースサイトとしても質の良い記事がそろっていますね。

手を動かそう!

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

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