バカネコ日記

フリーページ

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) | コメントを書く


■コメント

お名前
タイトル
メッセージ
画像認証
別の画像を表示
上の画像で表示されている数字を入力して下さい。


利用規約に同意してコメントを
※コメントに関するよくある質問は、こちらをご確認ください。


 勤務中・・・   てっちゃわん さん
入力ばかりで目が疲れたので
癒されたいとお邪魔しましたが
気を引くネタだったので帰宅後,
またじっくりお邪魔します。

暑いので夏バテと夏風邪にはお気をつけて!
私はお先に夏バテして4日間も休んでしまった・・・
おかげで3週間は休みなし!
皆勤が惜しくなければ休んでも良いんだけど
2万はイタタッ・・・ (2005年07月15日 14時55分33秒)

 わあぁ!   pyichi さん
これ!!これ!!どうやればいいのか困ってたのっ!
ほんとにっ!
こないだ「写真の横にコメントつけたいんだけどなぁ」っておもって!
「改行しなけりゃいいのか?」なんてやって失敗して挫折してました!
あーりがとぉーーー! (2005年07月15日 15時04分41秒)

 Re:レイアウト方法 1(07/14)   MIE@VP さん
テーブルで見栄えを整えるのは一番使うやりかたです(^▽^)
テーブルも簡単なのなら全然問題ないんだけど、
ブチ抜きにしたり入れ子にしたらもうお手上げ(T-T)
理屈がわかってても使いこなせないってのは・・・頭が悪いとしか・・・OTL (2005年07月15日 15時20分42秒)

 分かり易いですね   TAXI-DRIVER さん
頭で分かっていても、人に説明するのは骨が折れます。

トドさんは噛み砕くのが上手ですよね。
(2005年07月15日 15時24分51秒)

 てっちゃわんさんへ   海獣トド さん
>暑いので夏バテと夏風邪にはお気をつけて!

ありがとうございます。

>皆勤が惜しくなければ休んでも良いんだけど
>2万はイタタッ・・・

うーむ。 痛し痒しですにゃ。
皆勤賞は、労基法では、アカンということになってるはずにゃんだけど...。

(2005年07月15日 15時45分14秒)

 pyichiさんへ   海獣トド さん
>これ!!これ!!どうやればいいのか困ってたのっ!
>ほんとにっ!

にゃはは!
グッド・タイミングでしたね。

(2005年07月15日 15時46分01秒)

 MIE@VPさんへ   海獣トド さん
>ブチ抜きにしたり入れ子にしたらもうお手上げ(T-T)
>理屈がわかってても使いこなせないってのは・・・頭が悪いとしか・・・OTL

にゃはは!
ブチ抜きや、入れ子はやらない方がいいです。
最悪、ブラウザが解釈を間違えます。

HTMLを手打ちする場合は、相当、明晰な記憶力を要求されますし。

(2005年07月15日 15時48分37秒)

 TAXI-DRIVERさんへ   海獣トド さん
>頭で分かっていても、人に説明するのは骨が折れます。

そうにゃんです。
いつも苦労してますよ~(笑)

(2005年07月15日 15時49分12秒)

 こんにちわ ヾ(*^▽^*)ゞ   keikoaroma さん
早速やってみました。

私のようなシロウトでも
出来るなんて感激です!!

ありがとうございました。 (2005年07月15日 17時11分27秒)

 keikoaromaさんへ   海獣トド さん
>早速やってみました。
>私のようなシロウトでも
>出来るなんて感激です!!

にゃはは! おめでとうございます。
よかったですね。

(2005年07月15日 17時31分23秒)

 Re:レイアウトの方法 1(07/14)   bashiまま さん
私もできましたぁ!
ありがとうございました。
でも一つ教えていただきたいのですが、文字の最後の列を写真の下のラインにそろえるにはどのようにすればいいのですか? (2005年07月15日 20時18分19秒)

 bashiままさんへ   海獣トド さん
>私もできましたぁ!

よっしゃあ!

>でも一つ教えていただきたいのですが、文字の最後の列を写真の下のラインにそろえるにはどのようにすればいいのですか?

あせらない、あせらない。
一気にやると。アタマが混乱しますよ?

(2005年07月15日 21時06分52秒)

 Re:レイアウトの方法 1(07/14)   mametmk さん
いつか勉強したいと思いながら、
のばしのばしになっていた テーブルさん。
こうなっていたのねー 感動。。
これで、私のへぼい楽天フリマのページも
少し読みやすく出来るかも、です。
嬉しいわん☆

トドさん、ありがとう~~!!
(2005年07月16日 17時20分54秒)

 mametmkさんへ   海獣トド さん
>いつか勉強したいと思いながら、
>のばしのばしになっていた テーブルさん。
>こうなっていたのねー 感動。。

にゃはは!
構造がわかると、カンタンでしょ?
といいつつ、私も最初は何が何だか、分かりませんでしたぁ~(笑)
それが今では、解説する側ですから、面白いモンですね。

(2005年07月16日 19時14分05秒)

 Re:レイアウトの方法 1(07/14)   コタンコロクル さん
>レイアウトなど、見栄えに関するものは、中身の情報とは関係ないから、
>CSSでやってくれ、というわけだ。
>( CSSというのは、見てくれを決める規格のこと )
文字と写真の位置がずれないようにテーブルを使ってるんですが、またも知らない言葉が。
CSSって、どうやるんだろう?
大体テーブルがレイアウトじゃないって、誰が決めたんだーッ
私はそれしか知らんわぃ(^^;

(2005年07月17日 09時39分29秒)

 コタンコロクルさんへ   海獣トド さん
>文字と写真の位置がずれないようにテーブルを使ってるんですが、またも知らない言葉が。
>CSSって、どうやるんだろう?

CSSというのは、カスケ-ディング・スタイル・シートの略です。
スタイルシートと同じと思っていただいてかまいません。
厳密には違うそうですが...。

>大体テーブルがレイアウトじゃないって、誰が決めたんだーッ

W3C(World Wide Web Consortium)という団体のお偉方です。

>私はそれしか知らんわぃ(^^;

にゃはは! プロになるワケじゃないですから
テーブルレイアウトでも間に合うでしょう。

(2005年07月17日 12時41分31秒)

 Re:コタンコロクルさんへ(07/14)   コタンコロクル さん
>>私はそれしか知らんわぃ(^^;

>にゃはは! プロになるワケじゃないですから
>テーブルレイアウトでも間に合うでしょう。
-----
いつもありがとうございます。

大体、テーブルということも楽天を始めてだいぶ立ってから知ったわけですから。
最初は手当たりしだい入れて、空白と改行でやってました。(笑)

おかげさまでだいぶ見られるようになったと、自分では思ってるんですけどね。(^^;

(2005年07月17日 18時29分26秒)

 コタンコロクルさんへ   海獣トド さん
>大体、テーブルということも楽天を始めてだいぶ立ってから知ったわけですから。
>最初は手当たりしだい入れて、空白と改行でやってました。(笑)

私も初めはそうでしたよ(笑)

(2005年07月17日 18時31分24秒)

PR

X

バックナンバー

2021年04月
2021年03月
2021年02月
2021年01月
2020年12月

プロフィール


海獣トド

コメント新着

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

© Rakuten Group, Inc.