GooBlog編_おはら野のブログ

_この世は猫のみる夢_

2020.8.8【HTML テスト_tableで画像のレイアウトすることをあきらめる。横幅320ピクセルの画像をalign="left" とbr clear="left"でレイアウトする

2020年08月07日 | おはら野の日記(ブログ版)since:2018-02-23
横幅320ピクセルの画像をalign="left" とbr clear="left"でつくる
テスト①どうしたらいいんですk。3行開くんですよ。
1行はタグの前後は改行されるから2行開いてしまう。理由がわからん。



ナポリタンケチャップ味のパスタ
ケチャップ味のパスタ
ナポリタン


テスト②
 タグ打ちしてtableをつくり、画像を入れて、横に文字を入れる←面倒くさい作業になる。
 なので。
⑴普通に画像を入れる。問題は、デフォルトで横640ピクセル×480(縦の画像だと横640ピクセル×縦960)の馬鹿でかい画像になる。→手元のファイルからGooBlogにアップロードするときに320ピクセルにサイズを指定する(縦の写真は240ピクセルに)、アップロードしてからはサイズ変更はできないようだ。
⑵画像がセンターに、文字は画像の下から、←これがデフォルト。これを画像を左に置いて、右に文字を配置する。
⑶この文字の右配置を解除して画像の下に持っていく。
<img src="https://blogimg.goo.ne.jp/user_image/1b/33/1a1cf93b5a96f3df06612de92cd82937.jpg" border="0">『TEXTエディター』で編集すると、HTMLのタグは<>(小文字)で囲まれている。
↑ 画像をいれたところのタグはこうなってる。ここに、 align="left" を書き込む
img src="https://blogimg.goo.ne.jp/user_image/1b/33/1a1cf93b5a96f3df06612de92cd82937.jpg" align="left" border="0"
↑ 太字強調のように。 空白がある、半角スペースが入ってる。抜けるとうまくいかない。
br clear="left"←align="left"で「(画像の横に文字が入るようにしたが)、改行br 左に画像を配置して右に文字が入るようにしたことを解除clearします」位の意味。これを入れたつづきの文字は画像の下から始まる。

ここに文字を入れる。画像は左
欲しいデジカメのリスト
**なのだ。

横幅320ピクセルの画像をalign="left" とbr clear="left"でつくる
align=  left左へ、cente中央へ、right右へ
br clear= 解除left right all(どちらであっても解除する)

《フロートに対する回り込み》と訳されるが、
インライン(行単位の処理)ではなく、ブロック(単位)の処理をする場合。文字などは何行にも渡って横に入れられず上に、真ん中に下に改行位置までになるのを縦幅にあわせて何行か入るように処理するタグである。と。

***まだ文章がおかしいがこのへんでよす。**

PC版のブラウザだと、640ピクセルの画像がスライドバーを使って横に二つ並び(はみ出る)。モバイルブラウザで見ると320ピクセルの画像に縮小されて表示される。PCから画像をアップロードすると、デフォルトは640ピクセルで保存される。保存した画像を320に変更するのか。不便だな。
320の画像をブログにアップロードすると、640に拡大されてきったない画像になるし。回避する方法はないのかな。
**スマホのモニター対応を優先する現状では仕方ないのか。私はPCモニターできれいなレイアウトを維持する方向、スマホ無視の方針だから、最悪、ブログの変更か。いままでの自身のサイトへ戻るかだわ。

最新の画像もっと見る