HTML って難しいですね。
実は先日、ワタシのレシピの表が見やすいと、ちまこ通信のちまこさんがホメてくださって。
豚もおだてりゃなんとやらのまるさん、その作り方を、ご伝授したんです。
ところが、表作りにおいて、根幹を揺るがす大事な説明を省いてしまったため、
ちまこさんがBlogにアップされた表が大変なことに・・・。
ちまこさんに、HTMLの書き変え方をどう説明しようか考えたんですが、
図解もしたかったので、このページを使うことにしました。
続きの部分は「ちまこさんへのお手紙」のようになっています。
ご覧いただいて差しさわりある内容ではないですが、
なにやらちんぷんかんぷんであると思われますことを、報告させていただきます。
皆さま、ご理解の上、お読み棄ていただければ幸いです。
ちまこさん
上記のタイトルの件なんですが、
実はワタシのPCで表示をすると、こんな感じになってしまっているのです。
↓ ↓
この記事にコメントを寄せられた方は、表がはみ出していることには触れておられず、もしかしたら問題なく見られているのかも知れません。
それに、ちまこさんご自身も問題なく表示されているのでアップをされていたのかも知れませんが、ワタシ以外にも残念な表として表示されているPC画面の人もいるかと思います。
ちまこさんの表のHTMLがどうなっているか見てみたところ、
以下の点が、原因ではないかと判明しました。
【B枠とC枠に入るcontentsを逆にした】
先に作成したワタシの表は、
B枠には写真を入れるように「200のサイズ」と命令をし、
C枠「320のサイズで、枠の上に表示」と命令をしたのですが、
ちまこさんがこれを逆にした時に、その命令が壊れたように思われます。
単純に全部を逆にしたのであれば、大丈夫だったのかも知れませんが、
途中からまたB枠に写真、C枠にコメントと戻していることもいけなかったようです。
【写真のサイズがひとつだけ大きい問題】
これはワタシの説明不足が原因です。
表に入れる写真には、「width="320"」というように、
その写真をどんな大きさで表示をするかといった命令をしなければいけなかったのです。もしそれをしないと、オリジナルの写真の大きさが表示され、表のレイアウトが崩れてしまうのです。
命令を書く場所は、ここです。
見たまま編集で、表の枠に写真を入れると、HTML編集は、このようになります。
<img class="hatena-fotolife" title="f:id:chimako-tsushin:×××:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/×××.jpg" alt="f:id:chimako-tsushin:×××:plain" />
この、最後の「/>」の前に、width="320" という命令を足します。
こんな感じに・・・
<img class="hatena-fotolife" title="f:id:chimako-tsushin:×××:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/×××.jpg" alt="f:id:chimako-tsushin:×××:plain" width="320" />
4つの写真を入れるなら、その全部に統一した320を入れます。
こうすることによって、仮にサイズの違った写真であっても、
全部同大きさ(320) で表示されるようになります。
正確には画像の命令は、width ( 幅 ) と height ( 高さ ) の両方で命令するのですが、
widthだけでも大丈夫なんです。
ちまこさんの場合、最初の 3枚は 320×240のサイズでしたが、4枚目の写真は、640×479のサイズでアップされていたため、4枚目だけ大きなまま表示されてしまったのです。
HTMLの表は、結構分かりにくく、ワタシも何回も失敗したんですが、
出来るようになると見やすくなったり、結構面白い。
説明わかりにくかったら、ごめんなさい。
とりあえず、
今回の表のhtmlを修正してみましたので、
下記をコピーして貼り変えてみていただけないでしょうか。
うまく表示されるといいんですが。。。
１ |
候補はこちらの3本 |  |
| ２ | 細い枝だけでは、お箸がテーブルに着いてしまうので、こちらで高さを出します。 |  |
| ３ | 今ひとつピントがよくないのですが、こんな風に組み合わせて、細い針金で固定し、その上からテープを巻き巻きします。 |  |
| ４ |
巻き終わったら、下を真直ぐに切ります。 この時、花の茎がちゃんと下に出ていることが大切です。 そうしないと、水が吸えないのですぐに花がしおれてしまいます。
左側は、太いままの枝では使いにくい形になってしまうので、半割にした枝を足しました。 |
 |
上記の表のHTMLは以下の通りです。
一応、表の幅は520。A枠を10、B枠を190、C枠を320にしておきました。
下をコピペして、プレビューしてみて、バランスを見て調整してください。
写真をもう少し小さくしてみるのもいいかも知れませんね。
<table width="520">
<tbody>
<tr>
<td valign="_top" width="10"><br />１</td>
<td valign="_top" width="190">候補はこちらの3本</td>
<td valign="_top" width="320"><img class="hatena-fotolife" title="" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/20150313/20150313120632.jpg" alt="" width="320" /></td>
</tr>
<tr>
<td valign="_top">２</td>
<td valign="_top">細い枝だけでは、お箸がテーブルに着いてしまうので、こちらで高さを出します。</td>
<td valign="_top"><img class="hatena-fotolife" title="" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/20150313/20150313120601.jpg" alt="" width="320" /></td>
</tr>
<tr>
<td valign="_top">３</td>
<td valign="_top">今ひとつピントがよくないのですが、こんな風に組み合わせて、細い針金で固定し、その上からテープを巻き巻きします。</td>
<td valign="_top"><img class="hatena-fotolife" title="" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/20150313/20150313120812.jpg" alt="" width="320" /></td>
</tr>
<tr>
<td valign="_top">４</td>
<td valign="_top">
<p>巻き終わったら、下を真直ぐに切ります。</p>
<p>この時、花の茎がちゃんと下に出ていることが大切です。</p>
<p>そうしないと、水が吸えないのですぐに花がしおれてしまいます。</p>
<p> </p>
<p>左側は、太いままの枝では使いにくい形になってしまうので、半割にした枝を足しました。</p>
</td>
<td valign="_top"><img class="hatena-fotolife" title="" src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/chimako-tsushin/20150313/20150313121636.jpg" alt="" width="320" /></td>
</tr>
</tbody>
</table>
どっちの枠に写真を入れてもいいようにするなら、BとCを同じにして、
一応、表の幅は520。A枠を10、B枠を255、C枠を255 にするのもいいかも・・・
その場合は、写真の命令も width="320" から、 width="255" に変えてくださいね。
うまく表示されるといいなあ。
