大豆猫の空

気になること備忘録

続・画像の位置、画像と文字いろいろ//初心者がやってみた

前回調べた画像と文字の配置のつづきです。

▽前回

画像の位置・画像と文字いろいろ//初心者 - 大豆猫の空

 

タグや属性が使用可・不可があるのでナンデカナ~と。

(使えなかった理由がこれだと断定はできませんが)

 

HTMLは最新がHTML5で、変更・廃止されたものがあるとのこと。

参照:

HTML5で廃止された属性|HTML5|HTML-havin' a coffee break|珈琲とウェブデザイン

https://web.havincoffee.com/html/html5/html5_b_att-disuse.html

今のところ使えていてもそのうち使えなくなっていく感じでしょうか。

 

前回で該当するのは

・hspace=""

・img align="",div align=""

・br clear=""

 

これらの代わりになるのないかな~とウロウロしました。

無かったら詰むで、しかし。

(注)素人が気ままに試してるだけなのでこれが正解かは全く不明です。ご理解のほど。

 

hspaceの代わりにpadding、margin

参照:

【HTML入門】余白の取り方(paddingとmargin)について | プログラミング教育ナビ

 黒地に白線で猫のイラストmarginを10px

paddingを20px

marginを10pxpaddingを10px

 

 

 div align="center"の代わりにdiv style="text-align: center;"

 

黒地に白線で猫のイラスト

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

 

 

img align="leftまたはright"の代わりにdiv style="float:rightまたはleft;

 

黒地に白線で猫のイラスト

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ



 

floatとtext-alignの比較

・floatはブロック単位、text-alignは要素内の並び

・text-alignはclearによる解除不要

・div、p、h、表のセル内など余白のある部分で使用

 参照:

http://homepage.sinoffice.com/css/text-align.html|いちから始めるホームページ作成

 

 

回り込み解除 br clear=""の代わりに

・p style="clear:rightまたはboth;を解除点に入れる

・div class="clearfix"で囲む

 参照:

clear-スタイルシートリファレンス

css】floatで回り込みを解除する方法 「clear」と「clearfix」 | WEBクリエイターの部屋 https://arts-factory.net/float/

 

 

このこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねここのこねこのここのねここねこ

このこねこのここのねここねここのこねこのここのねここねこ

 

 

なんとなく見つけて引っ張ってきて書いて試してるだけ なので、微妙ですが。

 が、なんとかなりました(なっていない)。

 

珈琲とウェブデザインさん、プログラミング教育ナビさん、一から始めるホームページ作成さん、HTMLクイックリファレンスさん、WEBクリエイターの部屋さん、ありがとうございました。

 

 以下、今日のぼやきです。

かなーり迷子になってました。

気になったら次々タブ増殖→読み漁る→寄り道→タブ絞り込み→ブログで実践→失敗→実践→失敗をひたすら繰り返す、という泥臭いというか効率の悪い方法なので。

 

結構初歩的な[ ” ]を忘れたり[;]忘れたり。

 未読タブがどっか不明になったり。

とは言え面白いのは面白い。

 

なにか構造物を分解し中の仕組みを覗くのに似ているかも。