こんにちは、パソコンインストラクターの川上雄大です。
パソコンって、どんどん新しくなっていくので、ついていくのが大変ですよね^^;
今日もまたご質問いただきました↓
Windows１0にアップグレードしてから、何もかもが変わってしまいました。
自分なりに奮闘しているのですが、
どうしても『画像の横に文字を表示させる方法』がわかりません。
先生の、２０１５．９．２９、のライオンの記事も読ませてもらいましたが
実際自分の画像のHTMLタグを出すと alt=ライオン の部分 つまり日本語のタイトルが出てこないんです。
ライオンの記事…
あ、こちらですね↓
このライオン↑ですね（笑）
ご質問いただいた方は、最新版エディタ（おすすめ！）ということがわかりまして^^;
最新版エディタ（おすすめ！）だと確かにタグが違っているようですので、ちょいと修正いたします。
まずは、
画像と、その横に配置する文字をそのまま上下で表示します（普通に）。
＝＝＝ここから↓↓↓＝＝＝
ライオン
このライオン、いったいどこを見ているんだろうね。
でも、さすが百獣の王だね。
迫力あるよ～～！
＝＝＝ここまで↑↑↑＝＝＝
タグがどうなっているかというと、
こんな感じ（クロム、最新版エディタ）になります。
<p><a href="http://stat.ameba.jp/user_images/20160517/11/sumitak1329/0b/2d/j/o0200020013648250391.jpg"><img src="http://stat.ameba.jp/user_images/20160517/11/sumitak1329/0b/2d/j/o0200020013648250391.jpg" width="200" height="200" alt="" /></a>
</p>
<p>
</p>
<p>ライオン
<br />このライオン、いったいどこを見ているんだろうね。
</p>
<p>でも、さすが百獣の王だね。
<br />迫力あるよ～～！
</p>
このタグ↑の画像タグ<img>の中に
style="float:left;margin:10px;"
を入れてあげます。
こんな風に↓
<img style="float:left;margin:10px;" src="http://stat.ameba.jp/user_images/20160517/11/sumitak1329/0b/2d/j/o0200020013648250391.jpg" width="200" height="200" alt="" />
コツとしては、<img
の後に半角スペースを入れて、
style="float:left;margin:10px;"
をコピペしてあげます。
<img style="float:left;margin:10px;" src="http://・・・・
そして、この文字の回り込みを解除する箇所に、
<p style="clear:both;"></p>
を入れてあげます。
最終形はこちらです↓
<p><a href="http://stat.ameba.jp/user_images/20160517/11/sumitak1329/0b/2d/j/o0200020013648250391.jpg"><img style="float:left;margin:10px;" src="http://stat.ameba.jp/user_images/20160517/11/sumitak1329/0b/2d/j/o0200020013648250391.jpg" width="200" height="200" alt="" /></a>
</p>
<p>
</p>
<p>ライオン
<br />このライオン、いったいどこを見ているんだろうね。
</p>
<p>でも、さすが百獣の王だね。
<br />迫力あるよ～～！
</p>
<p style="clear:both;"></p>
すると、こんな感じで、画像の横に文字が表示されます。
＝＝＝ここから↓↓↓＝＝＝
ライオン
このライオン、いったいどこを見ているんだろうね。
でも、さすが百獣の王だね。
迫力あるよ～～！
＝＝＝ここまで↑↑↑＝＝＝
あ、画像を左側でなくて、右側にしたい（文字を左側にする）場合は、
style="float:right;margin:10px;"
にしてくださいね^^!
以上、画像の横に文字を配置する方法でした。
LIDS札幌・ライフデザインスクール
川上 雄大
