自閉症児と頻尿おやじの不安払拭・未来開拓

自閉症児と頻尿おやじが未来へ向けて行動中

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

ずかとも(私):過活動膀胱を患う頻尿おやじ。永遠の20歳(本当は丙午生まれ)

 

先日ご紹介した本

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

を使って勉強中です。

 

zukatomo.hatenablog.com

 

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

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

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

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

 

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

 

セルフワークの作業

1.準備されているもの

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

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

 図1:完成形の絵(CSS による装飾は含まれていません)

f:id:zukatomo:20220109195116p:plain

1.完成形の絵

図2:文字しか書かれていない HTML ファイル

f:id:zukatomo:20220109195156p:plain

3.文字だけの HTML ファイル

図3:図2をブラウザで表示させたもの

f:id:zukatomo:20220109195237p:plain

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

2.作業内容

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

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

 

セルフワークに挑戦

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

つまり

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

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

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

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

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

「あれ?」

「あれ?」

 ・

 ・

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

老化現象ですね。。。

 

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

老化現象ですね。。。

 

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

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

老化現象ですね。。。

 

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

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

 

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

 

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

老化現象なのです。。。

 

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

そこで考えました。

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

 

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

 

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

f:id:zukatomo:20220109195634p:plain

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



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

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

・HTML / CSS 界の金田一京助になる!
(これは嘘です)

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

 

終わりに

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

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

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

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

 

<未来へ向けての私は>

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

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

 

ではまた。


 

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

にほんブログ村 オヤジ日記ブログへ
にほんブログ村