この記事にはプロモーションが含まれます。
個人サイトの製作・運営に慣れてくると、デザインや機能にもっとこだわりたくなりますよね。しかし、サイトを自分好みにカスタマイズするためには相応の知識が必要です。
HTMLやCSSをもっと自由に書けるようになりたいと思っても、よい勉強法が分からないという方は多いはず。勉強用の書籍を探してもたいていは仕事向けだったりして、「趣味でいいんだけど……」という身としてはとっつきにくいのが現状です。
そこで、趣味の範囲でいいからHTML/CSSその他言語をもっと自由に触れるようになりたい！という方向けのおススメの勉強法を紹介します。
個人サイトのカスタマイズに必要な知識を整理しよう
まずは、目的にあった正しい知識を身につけるため、どんな知識があればどんなことができるのかを整理しましょう。
HTML/CSSは必須！
サイト制作においてHTMLおよびCSSの知識は必須です（WordPressを使う場合は別）。HTMLとCSSはセットで利用されるので、セットで覚えましょう。
サイトのデザインをいじりたいだけなら、HTML/CSSの知識だけで事足りる場合が多いです。また、HTML/CSSはWeb系プログラミング言語の中でもやさしいので、少し勉強すればそれなりに書けるようになります。
よりこだわる場合はJavascript、PHP等も
カーソルを合わせたら色が変わるなどの簡易なアニメーションであればCSSだけで実現できますが、より動的にサイトにアニメーションをつけたり、どこかをクリックすると別のどこかに変化が起きるような複雑な仕組みをつけたい場合は、Javascriptの知識が必要になります。
その他、「ブログ」「掲示板」「メールフォーム」「いいねボタン」のように、訪問者の入力した情報をサーバーとの間でやりとりするプログラムのカスタマイズや制作には、PHP、Rubyなど、いわゆるサーバーサイド言語の知識が必要です（当サイトで配布しているずぼログやいいねボタン、コイブミはPHP製なので、カスタマイズにはPHPの知識が必要です）。
とはいえ、趣味でサイトを作るにあたって、このあたりの言語を習得する必要が出てくることはほとんどないでしょう。もちろん、書けたら書けたで、できることが大きく増えるのは確かです。
これらの言語の違いは最初はよく分からないと思いますが、触っているうちにどの言語に何ができるのか、なんとなく分かるようになるはずです。
WordPressサイト制作には、WordPressの知識が必要
WordPressサイトを作る場合には、HTML/CSSよりむしろWordPressの知識が必要かもしれません。テーマやプラグインなど、それぞれに何ができて、どういうふうに使うのかを理解することが重要です。
WordPressについては、当サイトの姉妹サイトである「ACT」でノウハウを提供していますので、ぜひ覗いてみてください。
学習の順序は？
HTMLベタ打ちのサイトであれば、HTML/CSSの勉強をして、少し足りないかもと思ったらJavascriptなどを勉強するのがよいでしょう。
PHPなどのプログラムをいじりたい場合も、いきなりPHPを触るのではなく、まずはHTML/CSSの知識をつけるのがおススメです。
WordPressサイトを作成する場合は、まずはWordPressの勉強だけでOK。既存のテーマやプラグインだけでは不十分、もっと自由に制作したいと感じたら、PHPやHTML/CSSなど、必要に応じて知識を身につけましょう。
知識習得の道のりはどの言語もだいたい同じ
まずは基礎的な知識をつける
最初は本を読んだり学習サイトを利用したりして、基礎的な知識をつけます。その言語でどんなことができるのか、基本的な文法などをなんとなくでいいので覚えましょう。
学習する中で、実際のコードの例が出てきたら、とりあえず写経（丸写し）するのが効果的です。とりあえず実際に書いてみて、文法を身に染みつけます。
なんとなく分かったらひたすら実践
どういうふうにコードを書くのかがわかったら、ひたすら書くのがおススメです。
先ほど、既存のコードを丸写しするのがよいと書きましたが、コードの文法が分かったら、自分で完成形をあらかじめ設定して、それを目指してひたすらに書いてみるのがよいでしょう。
HTML/CSSの場合は、いきなりサイトを丸ごと作ろうとするのではなく、とりあえず「飾りボックス」や「飾りボタン」のような、ちょっとしたものから作ってみるのがおススメです。
数学の公式を覚えただけでは問題が解けないのと同じで、コードの書き方を覚えたらひたすら書いて何か作ってみるのが習得の近道です。
つまづいたらググって解決！
大切なのが、解決できない問題にぶつかったとき。正しくコードを書いているはずなのに、なぜか思った通りにいかない……そんなことはコーディングでは日常茶飯事です。
しかしコーダーたちの多くは、自分のぶつかった壁とその対処法をブログに書き残して情報を共有してくれています。困ったことがあったら、Googleなどの検索エンジンで調査してみましょう。初心者がぶつかる壁であればたいていのことは検索で解決できます。
検索ワードは複数を組み合せ、困っている症状の分かりやすいものだと解決策が出てきやすいです。ちなみに、私が検索したことのある検索ワードはこんな感じ。
- margin 効かない
- Youtube 埋め込み レスポンシブ
- img 不要な余白
- flexbox 縦方向 中央揃え
分からないことがあったら即・検索するクセをつけると、学習がはかどりますよ。
レベル別オススメ教材
初心者向け：HTML/CSSの基礎知識がわかるサイト「サルワカ」
サルワカは、HTMLとCSSの基礎的な知識が詰まったサイト。誰でも無料で読むことができるので、学習をはじめるハードルが低いのが魅力です。
図解が多く、また初心者のつまずきやすいポイントをトピックスとして詳しく説明してくれるのも素晴らしいです。
趣味でサイトをいじる分にはこのサイトひとつでも十分な知識が得られます。何から始めればよいか分からないという方は、まずこちらのサイトを覗いてみてはいかがでしょうか。
初心者向け～実践：手を動かして覚えられる「個人サイトを作ろう！ テンプレートですぐできる！すぐに身につく！HTML&CSS」
手前味噌で恐縮ですが、当サイトの運営者である私・ガタガタが執筆した入門書です。
HTML/CSSを初めて学ぶ人や、過去になんとなく知っていたけど新しい知識を学び直したい人向けに、個人サイトを作るために必要なところだけをピックアップしてノウハウを紹介しています。
この本を読みながら実際に手を動かしていただければ、テンプレートを自分で編集して好みのサイトに作り替える程度の技術は身につけられるはず。ぜひお手に取ってみてください！
実践：3分動画を見ながら手を動かして覚える「ドットインストール」
ドットインストールは３分の動画を見ながらコードを真似して書くことで学習する、プログラミング学習サイトです。HTML/CSSのほかにJavascript、PHPなども学ぶことができます。
利用には会員登録が必要で、月額1,080円の会員費を払わなければ見られないレッスンも多いですが、レッスンの質がよく、わからないことは先生に質問することができます。
私もHTML、CSS、JavascriptおよびPHPの基礎はこのサイトで全て学びました。手を動かしながら耳で聞いて、サクサクレッスンを進められるので、とても効率よく学ぶことができたと感じています。
一度無料レッスンを受けてみて、あっているかも……と思った方は、ぜひ挑戦してみてください！
発展編：好きなサイトやプログラムを写経する
配布されているテンプレートやプログラムを使わず、自分でいちからサイトやプログラムを作れるようになりたい……！ そんなチャレンジ意欲あふれる方には、写経をおススメします。
写経といっても、コードを見てそれを書き写すわけではありません。コードは見ず、完成形だけを見て、どのようなコードを書けばそれが再現できるのか、自分で考えてコーディングするのです。
やってみれば分かることですが、これが意外と大変です。でもこれができるようになれば、テンプレートを使わずに自分でサイトを作ったり、プログラムを作ったりできる程度の実力は手にしているはず。
意欲のある方はぜひチャレンジしてみてください。いちから何かを作り上げられる喜びは計り知れませんよ！
自分に合った学習方法で楽しく学びましょう
いろいろな学習方法を紹介しましたが、上記で紹介した方法がすべての人にとって正解とは限りません。「自分には合わないかも」と感じたら、恐れることなく別の学習方法を試してみてください。きっとあなたに合った学習方法が見つかるはず。
HTMLやCSS、その他言語がわかるようになると、サイト作りが一気に楽しくなります。ぜひ挑戦してみてください！
