先生デビュー
HTML評価｜2019.02.26 PM 3:42
私が“HTML“と“CSS“を学び始めて約１年。
ついに人に教えることになりました。
誰に教えるかというと、インターンシップで来ている現役女子高生のざえもんです。
もう２回授業が終わってるので、そのことについて書いていきます。
まず１回目はHTMLに初挑戦してもらいました。
普段見ているサイトはこのようにできているのを見せたかったので、ページのソースを見せました。
▲イメージ
すると、うわっ！という顔
１年前の私もこんな反応だったなぁーと思い出しました笑
HTMLの基本ルールである＜タグ名＞（開始タグ）と＜/タグ名＞（閉じタグ）などを説明し、html, head, bodyなどの骨格部分についても説明。
タグとは
どのようなページなのかという情報や、ページ上のテキスト、画像、リンクなどを表示する際に必要なものです。
わかっているよ～なわっかっていないよ～な感じでした笑
言葉で説明より実践ということで実際に書いてもらうことにしました。
課題はざえもんの自己紹介をブラウザに表示すること。
教えたタグ
| ・<p>タグ | 文章を囲むことで、囲んだ中身を段落として表示させるタグ |
| ・<h1>～<h6>タグ | 見出しを表現するタグ |
| ・<img>タグ | 画像を表示させるタグ |
| ・<table>タグ | 表を作成するタグ |
| ・<a>タグ | リンク先を指定することで、他のページにジャンプするタグ |
▲ざえもん自己紹介
無事、表示に成功。
私も初めての時は自己紹介をしましたが、私の時よりスムーズにできていたと思うので良かったです。
２回目は少し早いですがCSSにの挑戦してもらいました。
まずは、まだHTMLの教えられていない、よく使うタグがありましたのでその勉強からでした。
教えたタグ
| ・<ul>,<li>タグ | リストを表示させることができるタグ |
| ・<ol>,<li>タグ | 1から順に番号がついたリスト表示させるタグ |
| ・<dl>,<dt>,<dd>タグ | 説明リストを作るタグ |
| ・<u>タグ | アンダーラインを引くタグ |
| ・<strong>タグ |
太文字として表示させるタグ
|
| ・<big>タグ | 文字を大きく表示させるタグ |
| ・<small>タグ | 文字を小さく表示させるタグ |
自己紹介の続きで好きな食べ物やゲームを上のタグで表示してもらいました。
そしてCSSに挑戦。
CSSの基本、書き方、書く場所の３パターンについて説明。
これもまた、初めて聞くことばかりなので難しそう。
今回、挑戦してもらったこと
| ・font-size | 文字の大きさを変える |
| ・color | 文字の色を変える |
| ・text-align | 文字を中央/右/左に寄せる |
| ・background | 背景の色を変える |
| ・border | 線で囲う・線を引く |
▲css
表示できましたー。
色が変わったりすることに感動してました。
人に教えるってすごく難しいことだと実感。。。
でも、教えると自分も初心にかえれるし、勉強になります。
今回はここまでです。
次回もお楽しみに―
