作成したページ

散々放置していたHTML/CSSの基礎を学ぶ。最初は”詳しい友人”に教えてもらうのが一番!

こんにちは。とってぃです。

先日8月25〜26日の週末を使って、もう十数年手付かずのままだったHTML・CSSの基礎を学ぶ機会がありました。

実は中学生の頃、友人が書いている小説をWeb上に公開するため、個人サイトを作成して管理人をしていた時期があります。
もうさすがに残っていないのですが、当時は全然わからないままHTMLをなんとかコピペをしたりWebサイトのテンプレートを提供してくださっているサイトからダウンロードをして、CSSなどもわからないながらもちょっと読み解いたりググったりしながら作成していました。

仕事を辞めて、デザインの仕事をしていく上でやはりWebデザインに関する知識もつけていきたいと考えていたので「いい加減勉強しないとな」と思っていました。が、全然手をつけられず…の状態で、時間だけが過ぎていったのでした。

たまたま偶然、とある企業でSE・Webデザイナーをされている方と知り合う機会があり、そのお二人が講座を開催してくれるというので、いつもお世話になっている吹上のコワーキングスペース・タスクールのスタッフである名城さん(@nasiro3)と一緒に受講することになったのでした。

ただの座学だと身につかない!実践方式で学ぶことに意義がある

講座では、ほぼ全くなにも書かれていないhtmlファイルを、講義を受けながら受講生全員が少しずつ記述をしていくことで、最終的にWebサイトのTOPページとメニューページを完成させることを目標としていました。

今回のテーマは「カフェのWebサイト」。
ページ左側にメニュー、右側にコンセプトや説明があるようなパターンです。
作成したページ

講義は「タグ」の話から始まり、「pタグ(文章を書く際に段落を構成する)」や「aタグ(リンクを生成するもの)」などこれは”知っておかないとお話にならない“基礎的なタグの説明と、その使い方の説明がありました。

もしこれが座学だけで実際に手を動かしてWebサイトを作るということをしなければ(個人的な感想としては)全く身につかないと思うので、とにもかくにも実践することに意味があるんだなと思いました。

いままで「divタグ」と「spanタグ」の説明を読んでもさっぱりだったのですが、説明を聞いたおかげで理解ができてむちゃくちゃ嬉しかったです。
以前は、HTMLリファレンスなどのページを読んでいても説明されている言葉が難しく、イメージとして、また実際にどういう意味があるのかということが理解できないままでした。

それが「実際にこの文字列を打ってみてください」「この文字列をこう変えてみましょう」とWebサイトがどのように変化するのかということを目で見て確認することによって理解ができました。
Webサイトを完成させるにあたって「こんな風に表示させるには?」という問が立っている状態で各タグの説明を聞くので、知識をすぐに実践して理解することができるのもとても意味があることだと思いました。

できているかどうかをチェックしてもらえればつまづかない

講座では、HTMLファイルとCSSファイルに習ったことを記述して、それが正しく反映されているか確認するのですが、思ったようにならないことも何度もあります。

この時、独学だとどこが間違っているのかがわからず悶々とする時間が発生してしまいますが、講座では詳しい人に教えてもらっているわけなので、すぐに手をあげて、もしくは声をかけて聞いてみることができます。

ここで大事なのは、全然知らない先生ではなく「知り合い」「友人」に教えてもらっているということです。
(私は特に「質問がなかなかできない」タイプの人間で、最近はそれでも出来るようになってきたのですが、学生時代は「なんであんなに簡単に質問できるんだろう?」と他人のことを羨んでいたレベルでした。)
何より気軽に聞くことができます。そして間違っていても、「そこはね、」と丁寧に教えてくれます。このフィードバックがすぐにあるかどうかが重要だと思いました。

わからないところがあって、少し自分で考えてみてもわからなかったら、さっさと諦めて聞いてしまっていいと思います。
それで「ああそうなのか!」と理解して、自分で修正できるようになればそれで十分だし、つまづくことなく次へ進んでいけます。

自力で作ろうとすると知識があやふやなことが痛いほどにわかる

講座2日目。最初の時間は、前日の続きからではなく、前日の復習でした。
完成形のページ画像を提示され、それと同じになるようにHTMLとCSSを記述してみましょうという問題でした。

今回の講座に限りませんが、やはり問題を解くことで自分の知識レベルがどの程度なのかということを知ることができます。

手を動かしながら、あーでもないこーでもないと悩んで、うまく表示させられないことを経て知識が定着するし、レベルが上がっていくという感覚がありました。

復習の時間として改めて知識を説明する時間は全くなかったのですが、この問題のおかげで1日目の復習をがっつりすることができたのでした。

ある程度わかってきたら、わからないことをググり始めても大丈夫

2日目の午後は、メニューページを自分で作ってみる時間として充てられていました。
メニューページを作るために表形式でメニュー名と金額を表示する必要があったのですが、それに必要な「tableタグ」は講座内で説明されていませんでした。

でも、集中的に基礎を学んでいると、わからないことがあってググったとき(検索をかけたとき)でも、そのページに書かれていることがなんとなくわかるようになっています。
そのレベルまで到達したら、自分でできる範囲でどんどんググって覚えていくのが上達への早道だと感じました。

あとは、学んで覚えた基礎知識と重ね合わせてどうすれば思い通りに表示させることができるのか?ということを試行錯誤しながらやっていきます。

私は最終的にメニューページも完成させることができました。

新しく知識を覚えるときには、知っている人から集中的に基礎をがっつり学ぶ!に尽きる

十数年放ったらかしにしていたHTML・CSSの勉強ですが、2日間集中的に勉強することで、早く基礎レベルを習得することができます。

「勉強する時間がとれない〜」と嘆いて1年以上経つより、詳しい人(でかつ知り合い・友人)にお金を払って短期間で教えてもらうのが一番効率的な方法だと感じました。

これがもし受講料がタダだったとしたら、やる気もはここまで出なかったと思いますし、知識も身についていないと思います。
お金を払って、その分の価値を得る!と決めることで、学ぶことに意欲的になれるということを感じました。

講座のおかげで、ブログのテンプレートをいじれるようになった!

この2日間のおかげで、このブログのCSSファイルを見てみると、だいたいは何をどうするために記述されているのかわかるようになっていました。

そのおかげで、少しではありますが自分のできる範囲でブログのテンプレートをいじれるようになり、自分の望むような形に変更していくことができるようになりました。

まだまだ知らない知識はありますが、あとはググって調べることもできますし、本で解説を読んで理解することもできるようになったので、これからもやっていきたいと思います。