前回は画像のサイズを指定するとどうなるのか試してみました。
関連していろいろと画像についての記事が出てきたので、続けて挑戦してみようと思います。気になったのは以下3点。
こちらのサイトを参考にしました。
HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とmarkdownのやり方も紹介 - ぴっぴのはてなブログでアフィリエイト
https://baby-chicken.hatenablog.com/entry/hatenablog-picture-html-ichikotei
HTMLで画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしない？ - ぴっぴのはてなブログでアフィリエイト
https://baby-chicken.hatenablog.com/entry/hatenablog-html-picture-mozi-mawarikomi
【HTML入門】画像の位置を指定してテキストを回り込ませる方法 | 侍エンジニアブログ
https://www.sejuku.net/blog/52694
左右に配置
“img要素にalign属性でleftまたはrightを指定する”
ちなみに[ align：整列 ]の意でした。
中央に配置
”align属性にcenterを指定しても中央に表示されない。
imgタグをdivタグで囲みalign属性にcenterを指定する。”
文字を回り込ませる
“前出の左右に寄せて画像を表示する方法にテキストを書くだけ”
このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ
”回り込みを止めたいところに<br clear="leftまたはrightまたはall"/>を書く”
このこねこのここのねここねこ
このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ
”画像と文字列の間に余白を入れるにはimgタグの最後にhspace="数字"を書く”
このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ
できました。間に余白がちゃんと入ってます。
(追記5/24：違う環境だとブラウザでは再現できてなかったりしました。追加で調べたらHTML5では見栄えに関する設定はCSSで、ということになったそう。
参照：
HTML5 & CSS3 リファレンス - hspace属性 （左右の余白（廃止））
http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/hspace_attr.php?menutype=2simpll01l02l03A0
「大阪教育大学」、
HTML5で廃止された属性｜HTML5｜HTML－havin' a coffee break｜珈琲とウェブデザイン
https://web.havincoffee.com/html/html5/html5_b_att-disuse.html )
ぴっぴさん、侍エンジニアさん、ありがとうございました。
それからどこで読んだか失念したんですが、よくSEOで言われてる画像のalt属性を指定するのって、読み上げ機能で使われるので聴覚障碍の方に大事らしいっす。
指定するとき耳で聞いて画像が分かり易いようにってことも考慮したいと思いました。
