学ぶよりまねよ

赤ちゃんは言葉を覚えるのに親の挙動をひたすら真似ます。そして喜怒哀楽を表現します。HTMLの習得にこれを応用します。先人の功績を模倣しましょう。

<p>世界のみなさん、こんにちは</p> をキーボードから入力してsample.htmlに保存しましょう。そして、chrome, edge, FireFoxなどのブラウザでsample.htmlをダブルクリックします。

世界のみなさん、こんにちは

とモニタ画面に表示されます。<p>や</p>は表示されません。pは段落のparagraphを意味し、文字サイズや色などを指定するものです。メッセージが表示されない場合は何らかの正当な理由があり、拡張子がhtmlになっているかを確認します。

期待したように表示されたら一安心です。文字サイズをもっと大きく、後半のこんにちはを青色で表示できないかなどの疑問が湧いてきたらあなたの未来は輝いていると言えるでしょう。

サンプル

HTMLを使ったサンプルは風鈴（ふうりん）を取り上げ、涼やかな音色と左右にゆらゆらと揺れるさまを表現します。

❶風鈴を吊り下げる

❷風鈴を鳴らす

❸左右にゆらゆら揺れる

❹ひらひらと回転する

❺鳴動と揺れを停止

❻風鈴を取り外す

初回の今回は静止画像で音声もついていません。また、短冊に書く願い事は変更が効くようにテキストで後で入れるので空白のままです。

風鈴で楽しむ

風鈴の名称について説明します。上の例では、金魚の絵柄模様の部分は上に吊り紐が付いて外身（そとみ）と呼ばれたいます。鉄製のものが多くガラス製のものもあります。

外身とこすれ合って音を出す中の部分は舌（ぜつ）と呼ばれ、金属製で棒状あるいは古銭のように円、楕円上になっています。さらに舌にぶら下げる紙や布製の短冊から構成されています。

HTMLのコードは閲覧者がいつでも確認できます。芝居ならば舞台裏を覗くことができるようなものです。ソースコードは今まで表示や動作とは別に特別枠として掲示していましたが資源の無駄遣いを改め、適切な操作で表示することにしました。

❶動作している画面で右クリックする

❷検証

❸Sources

と操作すれば、行番号のついたソースコードを見ることができます。