徒然なるままに

HTML&CSSを学んでみた!

Webデザインに必要なHTML&CSS

いろいろと手をつけ始めてしまって、なんか中途半端な感じを受けつつ、その中で楽しめることがあればいいかなぁと思っています。あとからつけた言い訳なんですけど‥。
今回は、すべてが身につく「HTML&CSSとWebデザイン」入門講座 mana(マナ)著 SBクリエイティブ 2,260円+税 に挑戦してみました。
Webデザインって、ちょっとおしゃれなWordにも惹かれたのですけど‥。ホームページの仕組みなど、わかっていたら役にたつかなぁという考えでスタートさせました。
とか言って、このblogはWordPress使っちゃっているんですけどね。本当、WordPressって優れものと感じる今日この頃。

そもそもHTML&CSSって?

HTML

Hyper Text Markup Languageの略で、HTMLのもとになるファイルを作成する言語。
Webで表したい文などを「<」「>」で挟まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていきます。

CSS

HTMLだけでは、Webは白い背景と黒い文字だけになってしまいます。CSSを使用することでWebの元であるHTMLの見た目を調整できる言語。文字の大きさ、カラーなどなど。

う~ん、私も実際はなんのことかよくわからずに、とりあえず読み進めようということで、学習をスタート。

テキスト 前半(基本)

テキストを開き、まずWebサイトの基本について学びます。知らない基本的知識なので書いてあることが、新鮮です。「へぇ~、こんな風にサイトができているんだぁ」と気持ち高らかに学びながら、こんなおしゃれなWebサイトが作れるのかぁとわくわくし始めます。

また、実際の基本的な入力も体験できHTML&CSSで入力した言語が、パソコン上でWebページとして表示されるだけで、感動です。
コードを書いたり、画像を挿入したりと少しずつできることが広がっていきます。

特に苦もなく、楽しく少しずつ丁寧に学べるところはよい点です。

テキスト 後半(実践編)

実際のホームページ制作です。テキスト通りに入力していけば、更に感動が待っています。おしゃれなサンプルのようなWebサイトがつくれます。
しか~し、そんな甘いものではありませんでした。コードの入力など量が増えるにつれ、1か所のうち間違えでさえ、なんか変な画面になっちゃうし、その間違えたコードを探すのも大変。その繰り返しの中、サンプルに近づいていくのは楽しさがありました。
一部OS環境の違いなのか、サンプルコードなど確認しても間違いも見つからず、うまく起動しないものもありました。
実際の画面とHTMLファイル、CSSファイルをいったりきたり、手直ししてはWeb表示させてとかなり時間を要しました。

とりあえずWebページとしてみられるようになったことで、達成感を得ました

まとめ

HTML&CSSを学びましたが、実際最初から一人で‥とは無理なレベルです。けれど、基本的知識を得ることができ、Webの構造もや制作の流れは少しだけ理解できたことは、これからプラスになるはずです。もう1回、最初からテキストをやりなおし知識の定着をしていきたいと思います。独自でWeb制作できたら‥なんて夢をみながら(笑)

補足

Progate HTML&CSS以外も学べます。一部無料で使用できます。

私、このテキストを始めてからしばらくして、アプリ「Progate」の無料版「HTML&CSS」も同時に学びました。相性がよかったです。テキストであまり理解できていないところも「Progate」でテスト方式で構造が学べて理解がすすんだと感じました。

もうひとつ、でてくるコードなど意味や使い方がわからない時に使用した Web制作者必携 HTML&CSS 全辞典 加藤善規&できるシリーズ編集部 (株)インプレス 1,880円+税 も理解への助けとなりました。

諦めなければ、何歳になっても新しいことはできるはずですから。

みなさんも、HTML&CSSに触れることでWebのことが少し近くになりますよ。