バカネコ日記

久々に、バカネコ講座。
本日の講義は、写真と文章の配置について、一般的なテーブルレイアウトの
方法を紹介する。

次のような質問があった。

　左に写真を貼り付けその右側に写真の説明を３行ほど
　つけたいのですが、うまくレイアウトできません。
　で、写真を【align="left"】にしたところ小さい
　画面では、良かったのですが【最大化】してみると
　写真が左の隅っこで説明文とは離れてしまいます！

ホームページを作り始めると、誰でもぶつかる問題である。
こういうのは、tableタグを使って、簡単な表を組み、
写真と文章を分けて流し込んでやると、簡単にレイアウトできる。
例によって、超おおざっぱに解説しよう。

さて、左に写真、右に何行かの文章であるから、
マスがふたつ、横に並んだ表に、材料を流し込めばよい。

テーブルというと、苦手な方もおられるようだが、原理は簡単だ。
今日は、いつもとは逆に、小さい部分から、表を作ってみる。
たった５つの手順で、HTMLが完成する。

手順１
材料となる写真はあらかじめ、画像倉庫などに用意しておき、
その場所を、MyURLとする。
すると、画像表示HTMLの基本形は、
<img src="MyURL">　　となる。

手順２
上記のHTMLを、<td>タグと</td>タグで囲む。
これで、１マス分のデータが、一丁上がり。
<td><img src="MyURL"></td>

手順３
これに文章用のマスを足す。
何のことはない、同じ発想で、<td>文章</td>を横に並べるだけだ。
中身は後で書くとして、今は「文章」とだけ、入れておく。

<td><img src="MyURL"></td><td>文章</td>
これで、２マス分のデータが出来た。

手順４
これら２マスが、１行であることを示す必要がある。
ここから、ここまでが１行だよ、とタグで明示するために、
<tr>タグで囲む。
<tr><td><img src="MyURL"></td><td>文章</td></tr>

手順５
さて、仕上げに、これがテーブルであることを示すタグを書く。
これも、tableタグで挟むだけだ。
<table><tr><td><img src="MyURL"></td><td>文章</td></tr></table>

これで、基本的なテーブルができあがった。
あとは、写真の右に置く説明文を用意して、先ほどの
「文章」と書いたところに書き込むだけである。

結果はこうなる。　↓

うちのバカネコはヒマラヤン種。 ペルシャの長毛とシャム猫の色、 両方を受け継いでいる。

HTMLの書き方　例　↓
<table><tr><td><img src="MyURL"></td><td>うちのバカネコはヒマラヤン種。<br>ペルシャの長毛とシャム猫の色、<br> 両方を受け継いでいる。</td></table>


自動改行について
日記ページの場合は、自動改行されるので、上の例では、すべて１行になるように、
つなげて書いてある。
「文章」の部分にある<br>は、書かずに、ただ改行するだけでもよい。

しかし、通常のホームページ、あるいは、自動改行なしにセット
してあるフリーページの場合は、「文章」のところを改行するには
必ず、<br>タグを入れなければならない。
そのかわり、各タグを１行につなげて書く必要はない。
すなわち、以下のように書くことも出来る。

<table>
<tr>
<td>
<img src="MyURL">
</td>
<td>
うちのバカネコはヒマラヤン種。<br>
ペルシャの長毛とシャム猫の色、<br>
両方を受け継いでいる。
</td>
</table>

まあ、横書きを縦書きに、なおしただけであるが．．．。



【本日のポイント】
１．画像の横に、複数行の文章を配置するには、
　　テーブルレイアウトという方法がある。
２．マスを２つ用意して、それぞれに画像と、文章を別々に流し込む。


【注意事項】
テーブルによるレイアウトは、直感的でわかりやすく、ブラウザを選ばないので、
非常によく使われる方法である。
そのへんで、無料配布されているテンプレートも、これを使ったものは多い。

しかし、、tableは本来、表を作るためのものであるから、レイアウトに使うのは
好ましくないと、お偉いさん方は言っている。
レイアウトなど、見栄えに関するものは、中身の情報とは関係ないから、
CSSでやってくれ、というわけだ。
（ CSSというのは、見てくれを決める規格のこと ）

そうはいっても、HTMLでさえ、ひぃひぃ言っている初心者に、
CSSでレイアウトせよ、というのは、ちと酷な話である。
とりあえずは、テーブルの学習をかねて、ここから覚えよう。


【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン３号のサンプル版、
　「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

１日１票！　ブログランキング→


※バカネコ講座では、安全な方法を選んで紹介していますが、
　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。


ネコでもわかるＰＣ講座はこちら　→　バカネコ講座
バカネコ村特製！手抜きツール　→　バカネコソフト

【楽天トラベル】　バカネコ講座　バカネコソフト　バカネコ村　爆笑ガイド　猫砂の研究　パソコン購入費用の削り方　現物の投下位置　ずぼらなアクセスアップ　ページを読みやすくする方法　バーニャン・ミニ　楽天日記のバックアップ　にゃんこのコスプレ　テキストリンク下線の消し方　楽しめるアフィリ　己を知れ　自分のＰＣを知る　バカネコ・ビューア　バーニャン３号　にゃんタグ・フルバージョン



　The Power !　楽天日記の保存なら、バーニャン３号！

日記のテキストだけじゃなく、コメントも画像も保存したい。　トップページも残したい。
フリーページも全部、画像付きでバックアップしたい。　特定期間の日記だけ取りたい。
1000ページ以上あるんだけど、なんとかラクして、ダウンロードできないかしら。
ついでに、ダウンロードしたファイルの一覧もあったらいいな、リンク付きで．．．。

バーニャン３号なら、これらが全部できます。　しかも、クリック一発で。

詳細は　　→　こちらのページ サンプル版　→　ダウンロード 購入は　　→　楽天フリマ

画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。