大豆猫の空

気になること備忘録

画像の位置・画像と文字いろいろ//初心者

前回は画像のサイズを指定するとどうなるのか試してみました。

soycatblog.hatenablog.com

 

 

関連していろいろと画像についての記事が出てきたので、続けて挑戦してみようと思います。気になったのは以下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属性を指定するのって、読み上げ機能で使われるので聴覚障碍の方に大事らしいっす。

指定するとき耳で聞いて画像が分かり易いようにってことも考慮したいと思いました。