おすすめ

夏休みの自由研究の一例を示します。小学生向けにビスケットなどの簡易ビジュアル言語を使ってかなり高度なプログラミングをすることができます。

ここはテキストの文章に画像を加える方法を示します。

作成の順序

まず、JavaScriptが動作する環境を設定します。パソコンやスマホで当初はJavaScriptが動作しないように設定されていて、許可を指定した時に動作が可能になりましたが、今では効果的な表示をするために、初期値が動作可能状態になっています。

あなたのブラウザでJavaScriptを有効にする方法を参考にしてください。

JavaScriptが動作しない場合は、ブラウザに動作の許可を設置してください。操作は簡単ですが機器により異なるので上記サイトなどを参照して調査します。

作成手順

テキストエディタで文面を作り、○○○○.htmlの名前で保存します。拡張子がhtmlであることが必須です。

5行目にオリジナルな文章をセットし、3行目には飛び切りの勇姿画像を指定すれば、大きな達成感が得られるでしょう。



初めて、JavaScriptプログラミングするのならば、以下のコードをそっくりそのままコピーして動作させます。ファイル名はMyDiary.htmlでいかがでしょう。正しく動作すれば、これだけでもプログラミングの楽しさと芸域の広がりを体感できます。

サンプルコード

<DIV style="position:relative; left:0px; top:0px;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="432" height="323">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/suiyoku.png" width="99" height="130" style="position:absolute; left:290px; top:182px;">
<div style="font-size:26px; color:mediumblue; font-family:serif; position:absolute; left:30px; top:60px;">
今日、お父さん、お母さん、<BR>僕、妹の四人でプールに出か<BR>け、はしゃぎまわりました。<BR>お父さんと競争した<BR>り、妹にはおよぎを<BR>教えました。
</div>
</DIV>

HTMLコードの説明

絵日記

静から動へ

サンプルコードで示した内容はHTML書式の書類です。今回の表現方法を理解すれば、文字の考案とともに数千年、連綿と続いてきた土、粘土、樹皮、紙による静的な表現から、音声や色、動きなどを含む多彩な動的表現を体得する第一歩と言えましょう。

次へのステップ

今回はたった7行で絵入り日記を作ることができました。次の機会には、音声データを加えて日記の表現に厚みを加えてみたいと考えています。