月別アーカイブ: 2019年8月

暑かった夏に別れを

夏休みの総括

梅雨さむが続き、待ち焦がれた夏もあっという間に過ぎ去ろうとしています。猛暑もお盆までです。お盆を過ぎると土用波が立ち込めて海水浴は注意するようにとの言い伝えがあります。

長い休みには『ノルマ』が課されます。宿題を急ピッチで消化していることでしょうか。自由研究はまとまったでしょうか。今年は9月1日が日曜日なので2学期の始業式は2日になり一日、長い夏休みになっています。

以前に《電子絵日記》の作り方をブログに載せたことがあります。小学校で宿題として《電子絵日記》を課している学校はどの程度あるでしょうか。作り方の一例を以下に挙げます。

電子絵日記の一例

夏休み2019自由研究 参照音楽=『花火』作詞:井上赳、作曲:下総皖一
夏休み・自由研究
題名《夏祭り》
「ドッカーン!ドッカーン!」
これは、夏祭りの花火の音です。
毎年、祭りの最後に打ち上げ花火があります。
きれいな花火がいくつも上がるので、
わたしは花火が大好きです。

今年の夏祭りは、おじいちゃんと弟と行きました。
出店がたくさんあって、何を買おうか迷いました。
かき氷とたこやきをおじいちゃんが買ってくれました。
たこ焼きは弟といっしょに食べました。
大きなタコが入っていておいしかったです。

金魚すくいを弟がしました。
大きな金魚をすくいたいとねらったけれど、
逃げてしまいました。でも、お店の人が同じ
くらい大きな金魚をくれたのでよかったです。
また来年も夏祭りに行きたいです。

https://manabi-enjoy.com/syogakkouseikatu/archives/2447
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、
くらしの中で学んだことを伝えていきます!」を引用
絵日記の背景画はそれぞれのフリーサイトを参照
再生ボタンをクリックして開始です。

 ©TacM,2019 Ver0.02

 

 

電子絵日記サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.markey{
  width: 600px;
  height: 450px;
  overflow: hidden;
}
.balloon3-left-btm {
	position: relative;
	display: inline-block;
	margin: 3px 0px 10px 0px;
	padding: 0 5px;
	width: 360px;
	height: 50px;
	line-height: 60px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	background: orchid;
	border-radius: 15%;
	box-sizing: border-box;
}
.balloon3-left-btm:before{
	content: "";
	position: absolute;
	bottom: -24px;
	left: 20px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid orchid;
	z-index: 0;
	transform: rotate(90deg);
}
</style>
</head>
<body>
<div style="font-size:24px; font-weight:bold; font-family:'MS 明朝'; margin-left:10px; margin-top:0px;">夏休み2019自由研究<span id='num' style='font-size:14px; color:maroon;'> 参照音楽=『花火』作詞:井上赳、作曲:下総皖一</span></div>
<DIV id="w0" style="width:600px; height:450px; border:0px blue solid; display:block;">
<img id="w1" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png" style="width:600px; height:450px; opacity:1.0;">
<Div id="w2" class="markey" data-direction="right" style="clear:both; margin-top:-450px; border:0px green solid; background:seashell; opacity:0">
<div id="w3" class="h2vr_30" style="float:left; font-size:18px; margin-top:10px; line-height:1.8em; width:960px; height:500px; color:navy; border:0px red solid;">
<span style="font-size:48px; color:deeppink;">夏休み・自由研究</span><BR>
題名《夏祭り》<BR>
「ドッカーン!ドッカーン!」<BR>
これは、夏祭りの花火の音です。<BR>
毎年、祭りの最後に打ち上げ花火があります。<BR>
きれいな花火がいくつも上がるので、<BR>
わたしは花火が大好きです。<BR>
<BR>
今年の夏祭りは、おじいちゃんと弟と行きました。<BR>
出店がたくさんあって、何を買おうか迷いました。<BR>
かき氷とたこやきをおじいちゃんが買ってくれました。<BR>
たこ焼きは弟といっしょに食べました。<BR>
大きなタコが入っていておいしかったです。<BR>
<BR>
金魚すくいを弟がしました。<BR>
大きな金魚をすくいたいとねらったけれど、<BR>
逃げてしまいました。でも、お店の人が同じ<BR>
くらい大きな金魚をくれたのでよかったです。<BR>
また来年も夏祭りに行きたいです。<BR>
<span style="font-size:14px; color:brown;"<BR>
<BR>
https://manabi-enjoy.com/syogakkouseikatu/archives/2447<BR>
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、<BR>
くらしの中で学んだことを伝えていきます!」を引用<BR>
絵日記の背景画はそれぞれのフリーサイトを参照</span>
</div>
</Div>
</DIV>
<Div style="width:600px; height:120px; color:navy; border:0px solid red;">
<div class="balloon3-left-btm">再生ボタンをクリックして開始です。</div><BR>
<div style="float:left; width:300px; height:55px; color:yellow; border:0px solid red;">
<audio id="s35" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/hanabi.mp3" controls controlslist="nodownload"></audio>
</div>
<div style='float:left; height:55px; font-size:14px; line-height:1.6em; color:navy; border:0px solid gold'>&nbsp;&copy;TacM,2019 Ver0.02</div>
</Div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="utf-8">
var songNum=0;
var evnt = document.getElementById("s35");					//BGMのイベントオブジェクト
var w1Obj = document.getElementById("w1");					//画像オブジェクト
var w2Obj = document.getElementById("w2");					//holizontal-scroll-windowsオブジェクト
  window.onload = function(){								//読み込み完了のイベント関数//console.log('ページ読み込み完了');
	evnt.addEventListener('play', function(){				//プレイイベント//console.log("PLAY/PAUSE", j);console.log("START");
		song();
		jQuery(function () {								//marquee関数
			console.log("jQuery start");
			jQuery('#w2')
			.bind('finished', function(){					//マーキー完了処理
				jQuery('#w2').marquee('destroy');			//.marquee('toggle');
				w1Obj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png";
				w1Obj.style.opacity=1;
				w2Obj.style.opacity=0;
				console.log("markey is completed.");
			}).marquee({duration: 37000})					//50000,38000,35000
		});
	}, true);												//trueで本来のイベント処理を続行させる
	evnt.addEventListener('ended', function(){});			//再生完了を知らせる//再利用を可能にする
  };
function song(){  //https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019B.png
	w1Obj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019" + "BCDE".substr(songNum,1) + ".png";
	w1Obj.style.opacity = 0.5;
	w2Obj.style.opacity = 1.0;								//console.log("backGround", songNum, w1Obj.src);
	if(++songNum < 4)	setTimeout("song()", 24000);
	else				songNum=0;							//再開用
}
</script>
</html>

 

 

くじ引きで楽しむ

運試し

ポイントカードで買い物したり、福引きセールでガラガラを回すときはちょっぴり胸がときめきます。市民生活における小さな息抜きは楽しいものです。

ダーツ、吹き矢、射的などで的めがけて矢を射るゲームは古今東西、多く見かけます。

ここでは、HTML、JavaScriptで小さなゲームを作って夏休みの宿題を盛り上げましょう。

▶ボタンを押下して運試しスタートです。ラッキーセブンを引き当てたらファンファーレが鳴り響きます。

7を出すコツの難易度はそこそこです。サンプルコードを末尾に挙げました。参考にしてください。

©2019 TacM,Ver0.01
🎯
🌸

サンプルコード

<!DOCTYPE html>
<html>
<body>
<Div id="top" style="width:600px; height:600px; border:1px solid blue; font-size:64px; color:mediumvioletred; background-color:lightyellow;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2019/08/kujibiki2.png" width="285" height="150" style="margin-left:150px;">
<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span>
<img id="disc" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="width:360px; height:360px; margin-left:110px; margin-top:15px; transform:rotate(90deg);">
<div style="margin-left:470px; margin-top:-205px; font-size:32px;">&#x1F3AF;</div>						<!-- &#x21e6; -->
<a href="javascript:void(0)" onclick="startStop();return false;" style="text-decoration:none;">
<div id="playstop" style="margin-left:10px; margin-top:130px; font-size:64px;">&#x25b6;</div>
</a>
<div id="luckyNo" style="margin-left:460px; margin-top:-140px; font-size:96px; color:blueviolet;">&#x1F338;</div>
</Div>
<audio id="atari" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<script type="text/javascript" charset="utf-8">
var interval=40;														//回転スピード, 74 ~ 10
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("playstop").innerHTML = "\u23f9\u25b6".substr(k, 1);
	if(k==0){setTimeout('revolution()', interval);document.getElementById("top").style.backgroundColor="lightyellow";}		//停止中から開始
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%36*10+90;											//0 5 10 15 20 ~ 355,   90 ~ 440
	var e=Math.floor((d-72)/36) % 10;									//0 ~ 9
	document.getElementById("luckyNo").innerHTML = e;					//console.log("Degree=", degree, d,e);
	document.getElementById("disc").style.transform="rotate("+d+"deg)";	//回転を制御
	if((clickCount % 2)==0)	setTimeout('revolution()', interval);		//引き続き回転を制御する
	else{																//停止指令を受けた
		if(e==7){document.getElementById("atari").play();document.getElementById("top").style.backgroundColor="hotpink";}	//大当たり
	}
}
</script>
</body>
</html>

 

図の回転と停止

もう一つの円形ふちどり

先日、画像を丸く縁どるにおいて、2つの図を重ね合わせることによって丸い画像を描画しましたが、今回はCSSのborder-radiusを使って円形画像を実現しています。cssは別ファイルでなく、HTMLの中にstyle要素を定義しborder-radius属性を設定しています。

回転方法

シーソースイッチ

図を回転するには、transform-rotateを使います。連続して回転するには回転角度を変化させます。そして、一定間隔で等速回転させるには、setTimeout関数を使います。時間にて起動されるイベントにて回転角度を制御します。

回転と停止を制御するには一つのクリックボタンを押下します。このボタンはシーソースイッチと同じ機能を持ち、押すごとに回転と停止が交互に機能します。

スイッチの名称は交互に変化し、メカニックのシーソースイッチの機能ををソフトウェアで実現させています。

図の回転と停止例

rotation©2019 TacM,Ver0.01

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bordering4 {
	background-image: url("https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png");/* 表示する画像 */
	background-size:354px 354px;
	border:6px solid navy;												/* 枠線を付加 */
	background-position:-7px -7px;										/* 横長画像の左上を基準に表示 */
	border-radius:50%;													/* 角丸半径を50%にする(=円形にする) */
	width:340px;	height:340px;										/* 縦横を設定 */
}
</style>
</head>
<body>
<Div style="width:600px; height:600px; position:relative; border:1px solid blue; font-size:64px; color:mediumvioletred;">
<div style="position:absolute; left:120px; top:0px;">rotation<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span></div>
<div id="disc" class="bordering4" style="position:absolute; left:120px; top:130px; transform-origin:177px 177px;"></div>
<a style="position:absolute; left:20px; top:470px; width:120px; height:120px;" href="javascript:void(0)" onclick="startStop();return false;">
<img id="gostop" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/startBotton.png" width="120" height="120"></a>
</Div>
<script type="text/javascript" charset="utf-8">
const SPEED=74;															//回転速度, 74 ~ 4, Japanese 30 kei sight-seeing game
var interval=SPEED;														//回転スピード, Japanese ten large tourist spot
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("gostop").src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/" + (k?"startBotton.png":"pauseBotton.png");
	//console.log("startStop", clickCount, k, document.getElementById("gostop").src);
	if(k==0){															//停止中から回転開始
	  setTimeout('revolution()', interval);								//回転開始
	}
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%72*5;												//0 5 10 15 20 ~ 355
	var e=d-18;															//-18 -13 -8 -3 2 7
	//console.log("Degree=", degree, d);
	document.getElementById("disc").style.transform="rotate("+e+"deg)";	//回転を制御
	if((clickCount % 2)==0){											//回転中ならば継続
		setTimeout('revolution()', interval);							//引き続き回転を制御する
	}
	else{}																//停止指令を受けた状態、revolution()を呼ばなければ自然に停止
}
</script>
</body>
</html>

 

小数派受難時代

寄らば大樹の陰か

生きとし生けるもの、群れを作って生きていくものです。先日、急な冠婚葬祭に出会い、200㎞程の移動をしました。

世の中、市場経済で動いており少数派が生きにくい体験をしました。群れの一員になることを潔しとせず孤高を貫くことはなかなか大変なことです。

そのことで嫌がらせ、村八分、いじめなど顕在化することがあります。それは自分で実行する勇気がなく大勢に流される自分への不満、実行に移したものへの妬み、嫉み、やっかみの現れです。

少数派は面倒

一人の指導者が多人数を指導する場合、標準からはずれた人への対応は並大抵ではありません。そこで少数派は切り捨てられかねません。

その間隙を縫って「権兵衛が種まきゃ我が家も始める」、「五人組制度」、「運命共同体」、「相互監視社会」、「密告制度」、「前例主義」、「コネ、縁故採用」などが台頭してきます。

完璧な対応

世の中、完璧絶対の言葉が躍っていますがなかなか、怪しいものです。自動車免許証の更新で警察や免許センターに行くことがあります。

有効期限が迫っている免許証を差し出すとすぐに穴があけられ、次の手続きに進みます。それから啓発のためのビデオなどを見せられ、1~2時間後に新しい免許証を発行してもらえます。

この講習時間中に大地震などが起きてしまったら、穴のあいた免許証が通用するのでしょうか。新旧免許証の交換は同じタイミングでないとはなはだ危険です。物事を円滑に進めるために時間差は生ずるものですが絶対あり得ないことではありませんという例をあげました。

効率優先で少数ケースを切り捨てる

通常は特急を使っているコースを気まぐれで在来線を使うことにしました。

切符は通常、A-B-C間を特急、C-E間を普通列車で買いますが、先日はA-B-F-Dと普通列車にし、D駅から知人の車でE駅近辺の会場に向かう予定でした。

ところがB-F間のローカル線の運転間隔が90分と長く待ち合わせ時間に間に合いそうもなく、E駅に直行することを連絡しました。

切符は先のD駅まで買ってあり途中下車のつもりで降りようとしたところ、乗り越しの警告で止められました。

駅員はD-E間を乗り越しと判断したため改札のドアが閉まったと説明しましたが、途中下車ではと主張したところ改札を通してくれました。

切符購入でB、Fを経由地と告げてありシステムのどこかに不備があったのでしょう。2系統以上の特定区間では短い方の距離で運賃計算するようですが、今回のように大幅に異なる場合は実際に乗ったコースで運賃を決めるのではないだろうか。

雑感

日本列島は時計の針に例をとれば、12時40分のような形をしています。鉄道や高速道路は国土を縦断することに便利に作られていて、横断するには不便です。

横断するには一度、縦断しそこで乗り換え、更に縦断した方がどれほど時間の短縮になるかを身に知らされました。

少数派はいつの世も切り捨てられる運命にあるのでしょうか。

トリミングと拡大表示

トリミングとは

トリミングとはコンピューターで画像を加工するとき、画像の周囲や映像の前後を切り取って、必要な部分だけを抜き出し画面を整えることを言います。ここでは10種の動物を集めた1枚の画像から指定された動物をクローズアップします。合わせてタイマー管理を紐解きます。

画像トリミングとボタン操作 ©TacM,2019 Ver0.01

❼whale  クジラ
©TacM,2019 Ver0.01

トリミング実現方法

トリミングするには多くはclip:rectを用いますが、今回、position:relativeにoverflow:hiddenを指定し、合わせてposition absoluteを併用して必要な画像を切り抜いています。

一つのことを実現するに当たり様々な方法が存在します。いろいろな手法を身に着けることによって深みのある文書や作品を作成することができます。

HTMLとJavaScriptサンプルコード

<html>
<body>
<img id="uenozoo" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px">
<DIV style="font-size:24px;">
<button onclick="if(v==0)setClip();">開始</button><span id="num1" style="color:red">&#x277c;whale</span>&nbsp;
<span id="num2" style="color:blue">クジラ</span>
</DIV>
<DIV style="position:relative; width:300px; height:300px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px; zoom:2.0;">
<img id="animal" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<div style="font-size:12px;">&copy;TacM,2019 Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
const animalName =    ["リス", "クマ", "タヌキ", "ライオン", "キツネ", "キリン", "ゾウ", "クジラ", "コアラ", "カバ"];
var v=0;
function setClip(){                                                             //animal10.png  original-size : 750*300
 document.getElementById( "sample" ).style.left = (- v % 5 * 150) + 'px';
 document.getElementById( "sample" ).style.top = (-Math.floor(v / 5) * 150) + 'px';
 document.getElementById("num1").innerHTML ="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
 document.getElementById("num2").innerHTML = animalName[v];
 if(++v < 10) setTimeout(setClip, 2000);
 else v = 0;
}
</script>
</body>
</html>

画像を丸く縁どる

画像にインパクトを付ける

写真や図は縦、横の長さこそ異なるものの長方形で扱われます。時には丸、楕円形、雲形、ハート形で縁どられた写真を見かけることがありますが、通常のものに較べて目を引きます。

今回、重ね合わせの方法によって画像を丸く縁どってみます。

縁取りの仕組み
ameblo.jpより

下図のように、表示したい画像に透明色を持つ縁どった画像を重ね合わせます。手法は実際の写真立ての原理そのものです。

先に本命の画像を表示し、そのあとに縁取り用の画像を重ね合わせます。丸い部分は透明なガラスのような効果を生み下の画像が素通しになりますが、円の外は白色のため何も表示されません。

白色でなく淡いグレーにすれば曇りガラスのようにぼんやりした画像にすることができます。

HTMLによる表示例

<div style="float:left;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png" width="300" height="300"></div>
<div style="float:left;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-98.png" width="300" height="300"></div>
<!-- ================ 【method】POSITION:ABSOLUTE ================ -->
<Div style="clear:both; position:relative; width:620px; height:660px; border:0px solid orange;">
<div style="position:absolute; top:50; background-image: url('https://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png'); width:600px; height:600px;"></div>
<img style="position:absolute; top:50; width:600px; height:600px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
</Div>

画像に文字を入れる

夏を楽しむ

画像に文字を入れてみます。画像の説明文を画像の周辺や画像上に添えることがあります。今回は画像上に上書きしています。黒色による夏の風物詩は画像イメージであり、夏を楽しむがテキスト表示です。

画像エディタなどで画像に文字を入れて一体の表示物にする場合と、HTMLのテキスト表示機能によりテキストを入れる場合があります。双方に長所と短所があります。

タグ名は大文字と小文字を区別しません。入れ子になった開始タグと終了タグが明確になるようDivとdivを使い分けています。

夏を楽しむ

HTML表示コード

<Div style="width:640px; height:265px; border:1px solid blue;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/07/e4e718a86f9ae87f820a7909d0ee171e.png" width="640" height="260">
<div width="640" height="100" style="margin-top:-120px; margin-left:190px; font-size:80px; color:khaki;">夏を楽しむ</div>
</Div>

ひと夏の恋

情熱のサマー2019

夏は人を開放的に、大胆にさせます。タイトルに挙げたことは夏に始まり、季節が切り替わる前に終わる儚い出来事でしょうか。それでも永遠のエネルギーを燃やしたいものです。古典の秀歌、クラシックの名曲をお楽しみください。

また、若き力をたぎらせている活人におかれては、幻想的な電子万華鏡を自作してはいかがでしょう。作り方はこのブログを紐解いてください。

次の画像をクリックし、さらに切り替わった画面でBGM再生ボタンをクリックします。

 

 

動画を表示する

動画ファイル形式

動画を投稿して楽しむには動画形式に則ったファイルを作り動画を表示します。動画形式にはmp4, avi, wmv, flvなどたくんさんの種類があります。採用する形式はいつも使っているブラウザがサポートしているタイプがいいでしょう。

 

上の開始ボタンを押下してスタートです。

動画表示用HTMLコード

動画を表示するにはvideoタグを用います。autoplayを指定してもmuted以外の音声付き動画では記事のロードとともに開始にはなりません。一般にはcontrols属性を指定してコントロールバーを付加します。

poster属性は動作開始前に表示する動画内容を代表する静止画像を指定します。srcに指定するアドレスはyoutubeの投稿先アドレスやアップロードした公開サーバーアドレスを設置します。

<video id="wild" src='https://aidesign.lolipop.jp/wp-content/uploads/2016/02/WildAnimals.mp4' poster="https://www.crazyvector.com/wp-content/uploads/2018/11/Wildlife-Landscape-Illustration.jpg" controls width="100%" height="100%" controls></video>

動画の作り方

動画を利用するにあたってデジタルカメラで撮った画像を動画形式を確認してそのまま利用することができます。その形式をブラウザがサポートしていなければ変換します。

変換ツールは良質なフリー素材をダウンロードすることが可能です。写真をスライドショーのように動画風にまとめるときにはムービーメーカーを利用します。

表現豊かな動画を作るには

驚異的な閲覧数を期待するには、表現する題材もさることながら、編集技術などの知識が必須です。多数の閲覧者を誇るユーチューバ―と呼ばれる一部の人は多額の広告収入を得ていることが報道されています。

一定の訪問者数を長きに渡って保有し続けるには大変な努力が必要ですが誰にも開かれた門戸です。一念発起して頑張ってみてはいかがでしょう。

 

画像を表示する

写真やイラストを表示する

すでに作った画像、写真、イラストはimgタグを用いて表示します。

 

実際のHTMLコードは次のようになります。

<div>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/season4.png" width="828" height="226" />
</div>

imgタグのsrc属性にて画像の格納先を指定します。ブログやホームページは多くの人々に見てもらうのが目的ですので公開サーバーのアップロード先をアドレスとして指定します。動作確認時には自分のローカル記憶装置のアドレスで構いません。

画像の多彩な表現方法

画像を横に並べたり、説明文を加えるにはimgタグの他の属性を指定しなければなりません。まずは簡単な表現をマスターします。

画像の作り方

画像やイラストをどのようにして作るのでしょうか。まずは既存の画像を表示してみます。公開することなく自分のローカル環境で表現するぶんには著作権の心配はありませんので、ネット上にある画像を表示してみます。

自信がついて友達に見せたいときには、フリー素材を探して表示するようにします。

魅力的な画像入り記事をつくるには

表現力の高い画像記事にするには画像編集ソフトやデジタルカメラの扱い方などの知識を吸収するとよいでしょう。