【HTML / CSS の勉強にお勧めの本】実力試しのセルフワーク。お勧めの勉強方法で実力アップ！してると思う。。。

ずかとも（私）：過活動膀胱を患う頻尿おやじ。永遠の２０歳（本当は丙午生まれ）

先日ご紹介した本

「これだけで基本がしっかり身につく
　HTML/CSS & Webデザイン１冊目の本」
発行：翔泳社
著者：竹内瑠美　竹内直人

を使って勉強中です。

zukatomo.hatenablog.com

この「これだけで基本がしっかり身につく HTML / CSS ＆ Webデザイン１冊目の本」の中に「セルフワーク」というものが準備されています。
（本のタイトルが長い）

要は補助教材を使って自分でやってみる！です。
（補助教材は「これだけで・・・HTML / CSS・・・本」の指示に従えばダウンロードできます）

セルフワークを行なうことで弱点や、ウェブサイトの構成が改めて理解できるなどメリットがいっぱい。

セルフワーク、お勧めです。

そのセルフワークの一つをご紹介します。

セルフワークの作業

１．準備されているもの

以下の教材、サンプルが準備されています。

1. 完成を目指すウェブサイトの完成形の絵（図１）
2. 文字しか書かれていない HTML ファイル（図２）
3. それに必要な画像や写真（サンプル省略）

　図１：完成形の絵（CSS による装飾は含まれていません）

１．完成形の絵

図２：文字しか書かれていない HTML ファイル

３．文字だけの HTML ファイル

図３：図２をブラウザで表示させたもの

３．文字だけの HTML ファイルをウェブサイトに表示したもの

２．作業内容

上記１の準備されたものを用いて、以下の作業を行ないます。

• 完成させるウェブサイトの絵を見ながら
• 文字しか書かれていない HTML ファイルに
• 今まで学習した コマンド（タグや属性、その値など）を記入し
• 完成形と同じものを作成する

セルフワークに挑戦

完成形の絵を見ながら考えるわけです。

つまり

• 図２に必要なコマンド（タグやプロパティなど、HTML の言語）を書き
• 文字の体裁を整え
• 準備された素材を貼り
• 図３を図１と同じにする

「まずは、ヘッダー（header）とフッター（footer）、メイン（main）に分けてと。サイドバー（aside）はないな・・・」

「大見出し（h1）で画像を貼り付けて・・・」

「あれ？画像を貼り付ける img のあとは【src】だっけ？【scr】だったっけ？」

「 img はテキストの何ページだったっけ？」

「あれ？」

「あれ？」

　・

　・

てな具合に「あれ？」「あれ？」がでてくるわけです。

老化現象ですね。。。

「なんで覚えてないの？つい先日学習したばかりなのに。。。」

老化現象ですね。。。

「あれ？」「あれ？」が出てくるたびに、本の末尾の INDEX から「img は i アイ、アイ、アイ・・・５４ページ」

なんてやってるわけです。

老化現象ですね。。。

もう情けないったらありゃしない。。。

年は取りたくないですね。。。

「あれ？」が出てくるたびに「これだけで・・・HTML / CSS・・・本」のページをめくり、或いは自分で書いたノートのページをめくり。。。

もうね、自己嫌悪に陥るわけであります。。。

老化現象なのです。。。

辞書があれば解決するんじゃね？

そこで考えました。

「使うタグやプロパティは何となく覚えているが、今一つ自信が持てない。ならば、HTML のタグや CSS のプロパティを、アルファベット順に並べた辞書を作ればいいんじゃね？（若者言葉を入れてみました）
辞書があれば検索スピードがアップすんじゃね？（また若者言葉を入れてみました）」

そこでもう一度「これだけで・・・HTML / CSS・・・本」と、自分で書いたノートを復習しながら、出てきたタグやプロパティ、使い方などをエクセルに入力、整理し独自の辞書を作成中です。

これが完成すれば、ウェブサイトの制作の効率がグンとアップすること間違いなし！

いずれ辞書になる。。。はず

きっとそういった辞書が既に発売されていると思いますが

・自分自身で作成することに意味がある！

・HTML / CSS 界の金田一京助になる！
（これは嘘です）

という思いを（少しだけ）持って作成中です。

終わりに

セルフワークを行なうことで自分の弱点（記憶力？理解力？）が分かりました。

またそれを補うための「復習」もできました。

どんな勉強にも言えますが、復習、セルフワークは大切です。

この「しっかり身につく・・・HTML / CSS・・・本」に準備されているセルフワークは優れものです。

＜未来へ向けての私は＞

目標に向けて「自分に合った勉強と工夫」を続けていきます。

この「しっかり身につく・・・HTML / CSS・・・本」をやり通したら、改めて本の評価記事を作ります。

ではまた。

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ] 価格：2420円（税込、送料無料) (2022/1/9時点) 楽天で購入

人気投票にエントリー中。
よろしければクリックをお願いします。

にほんブログ村