ずいぶんと久しぶりの更新となってしまった。別にブログ自体を放置していたわけではなく、WordPressの管理画面にはほとんど毎日ログインしていたし、アクセス状況は眺めていたのだけど、なかなか記事を書く気がおきず、ずるずると間が空いてしまったのだ。
そんな言い訳はさておき、ここ一週間くらいは暇があればHTMLとCSSを勉強していた。HTMLとCSSとは、それぞれホームページを作成するための言語・コードのこと。これさえ扱えれば有料のホームページ作成のソフトなど使わなくても、メモ帳などからホームページを作ることができるスグレモノなのだ。
というのも、WordPressでこのブログを運営しだしてから、ウェブの技術的なものにも僕は関心を持ちだした。ならばせっかくなのでと、このたび勉強してみようと思ったのだけど、じっさい勉強してみると面白い。今までWordPressのカスタマイズでCSSを少しいじったりはしていたけど、「あれってああいう意味だったのね」と今ではその理屈がわかるようになってきた。
超丁寧に書かれた入門書
今回、学ぶにあたって参考にした本は『デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版] 』の一冊。
Amazonのレビューやいくつかのブログ記事で、「最も優しく書かれた入門書」と紹介されていたので、この本を選んだのだけど、大正解。多分、HTMLやCSSを学ぶ上で、この本でつまずく人はそうそういないと思う。
というのも、「ここでEnterします」など、本当に懇切丁寧に書いてくれているので、多少PCスキルに自信がない人でさえ難なくできると思う。さすがに、「電源つけることくらいしかできない」レベルの人には厳しいとは思うけど、そんな人はそもそもHTMLなんかを覚えようとは思わないでしょう。
一応、僕自身のレベルを書いておくと、すでにWordPressでブログをやっていたので、なんとなくCSSでちょっとしたカスタマイズをしたり、記事を書く際にタグ付けなどの簡単なHTMLコードは打ったりしていた程度。
だから、もちろん初学者ではあるのだけど、「HTMLってなに？」「CSSってなに？」レベルはクリアしていたので、割とすんなり理解できたんだと思う。とはいえ、完全なる初学者でも充分対応可能でしょう。そのへんはやる気です。
ちなみに、サブタイトルに「Windows 10 & Mac OS対応版」とあるけれど、別にOS自体はなんでも平気。（さすがにWindows95だと無理だろうけど）
本書ではWindowsだと「メモ帳」、Macだと「テキストエディット」を使って進めていくように書いてあるけど、それらのソフトは正直コーディングするには使いにくいんじゃないかなあとは思う。僕はLinux(Ubuntu 16.04 LTS)を使って、デフォルトで入っている「gedit」というテキストエディターを使った。多分、メモ帳よりはよっぽどやりやすかったと思う。
手を動かしてやれ！
僕は集中して確実に覚えたかったので、この本を合計３回も繰り返してやった。その方法としては、
- 一回目は、素直にテキスト通りに、寸分違わず取り組む。
- 二回目は、復習としてもう一度テキスト通り同じものを作るが、HTMLとCSSのコメント機能を活用しまくって、「いちいちこれは〇〇のためのコード」とメモする。また、覚えておきたい本書の記述内容は、別ファイルのメモ帳に、どんどんノートを取っていく。
- 三回目は、工程自体はテキストと同じ流れに沿って進むのだけど、つくり上げるものは自分のホームページ。
といった感じ。
流石に、三回も取り組んだのは自分でもかなり念入りにやったなという気もするし、このやり方を他の人におすすめするわけではない。けれど、せめて二回は取り組んでみて、
- 一回目はテキスト通り寸分違わずに
- 二回目はテキストの内容を応用して自分のオリジナルのものを作り上げる
という流れに沿ってやると、身につくのが早いと思う。とにかく、この手の技術書は眺めるだけじゃなくて、実際に手を動かして取り組んでみなきゃダメだ。
どうせやるなら自分のサイトもつくってみる
本書でつくり上げるウェブサイトは、「67Green」という架空の植物専門店のホームページ。「トップページ」「商品案内」「店舗への地図」という、ものすごく簡素な構成のサイトなので、ウンザリするほどデザインに凝ったサイトに見慣れている今の感覚からすると、正直少しさみしい。（Googleフォントを導入していたりするあたりはオシャレだけど）
「昔のウェブサイトってこうだったよなあ」と、自分で作り上げておきながら思ってしまった。
とはいえ、これだけでも充分に情報は伝えられているので、すぐにでもウェブサイトを作りあげたい人には、役に立つと思う。
なお、上記したように、僕は二回本書のサンプルサイトをつくった後、応用して自分の個人サイトもつくってみた。（ローカル環境でつくっただけで、まだ公開はしていない）
つくったサイトの構成としては、
- トップページ
- プロフィール
- 楽器紹介
- ブログページ（外部リンクとして当ブログに飛ぶ）
- ギターレッスンの紹介（ある場所でレッスンを行っていると仮定して、その場所の地図情報を含む）
- 問い合わせページ（外部リンクとして当ブログの「contact」に飛ぶ）
という感じ。こうやって書き上げてみると、「なんだ結構充実しているじゃん」という印象も受ける。これくらいのページは本書から得られる知識だけでも充分に作成可能だ。
HTMLなんてネットで十分？
もちろん、最もわかりやすく書かれた本というのだけあって、本書が扱っている内容は初級レベル。だからこの一冊を読み通しただけで、「俺はHTMLとCSSがわかる！」だなんて威張れるわけではないので、注意が必要だ。あくまでも「これから始める」だ。
とはいえ、何事も初めが一番大事なのである。僕もこの本で学んだことによって、HTML・CSSの基礎的なことやしくみをよく理解できた。次はもう少し難し目な本に取り組んでみようと、現在取り寄せ中である。
ちなみに、HTMLやCSSの知識なんていまどきググればたいてい解決はする。するのだけど、それで知識がつくのかというと、少し疑問が残る。たしかYahoo!知恵袋だったか、「HTMLなんかで本を買うなんて無駄です。ネットで充分」みたいな書き込みを見たけれど、こういうのは余計なお世話の迷惑千万というのだ。
上記したように、何事も基礎が大事なのだ。基礎的な部分こそ体系的に学んでおいたほうが、後ほどググって得た知識も理解しやすい。それに、少なくとも一冊の本に向き合っている間はネットを使わなくてもいいので、集中してできるのが隠れたメリット。実際、本書のレッスンでも、グーグルフォントを導入するときとグーグルマップを表示させるとき以外はオフラインでも作業することはできた。
これがネットだとね、ググりまくっていろんなサイトやブログの記事をいったりきたりしている間に集中力がどっかいってしまうから困るのだ。
コメント