バカネコ日記

フリーページ

2005年07月14日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
久々に、バカネコ講座。
本日の講義は、写真と文章の配置について、一般的なテーブルレイアウトの
方法を紹介する。

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

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


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

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

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

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

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

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

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

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

手順5
さて、仕上げに、これがテーブルであることを示すタグを書く。
これも、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>



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

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

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


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



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


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

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

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


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

1日1票! ブログランキング→ぜひ、クリックしてね


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


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


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



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

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

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

詳細は  → こちらのページ

サンプル版 → ダウンロード


購入は  → 楽天フリマ




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






最終更新日  2005年07月15日 17時27分36秒
コメント(18) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.