バカネコ日記

フリーページ

2005年06月10日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
ひさしぶりに、HTMLの解説をやってみよう。
今日のバカネコ講座は、テキストの回り込みについて。

ホームページに、写真や画像を載せることは多いのだが、
文字(テキスト)も、当然、書き込むわけだから、その配置に悩むことがある。

画像には当然、高さというものがあるわけだが、ふつうは、文字の高さより大きい。

ところが、画像に続けて、テキストによる解説を書こうとすると
下の方に、1行しか書けない。
これは、画像も、同じ行の中の、1文字として並んでしまうためだ。

 例:この文章をもっと上から、複数行書きたい。

短いタイトルならこれでもいいが、文字数が多いと、見てくれが悪い。

画像の横に、複数の行を書こうと思えば、テーブルタグを使って
画像と文章を、左右に振り分けて配置する方法もある。
枠線の太さをゼロにして、表の枠は見えなくするのだ。
タグが分からなくて、ホームページビルダーなどを
使っている方は、その方が楽かもしれない。

だが、楽天日記などでは、かえって面倒だ。
HTMLを直接書くなら、もっとスマートな方法がある。
画像に align 属性を指定してやればよい。

画像を表示する基本形は
<img src="画像のURL">
であるが、画像を左に配置したければ、ここに align="left"
という呪文を放り込んでやればよい。 

すなわち、
<img align="left" src="画像のURL">

こうすると、画像は左に配置され、後に続くテキストは、
すべてこの画像の右側に、張り付くように、回り込んでくれる。
実際にやってみよう。

右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く

上記の例では、実際に書くタグは、以下の通りである
ただし、widthだの、heightだのは省略した。

<img align="left" src="画像のURL">右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く右に説明を書く





逆に、画像を右に置いて、テキストを左側で書きたければ、
<img align="right" src="画像のURL"> と書く。

左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く左に解説を書く

<img> タグに align="left" align="right" を指定すると、
画像の周りをテキストが囲むように張り付く。
これを、テキストの回り込み、というのだが、align属性の指定だけで
可能なのだから、テーブルを組むよりも楽である。

ただ、途中で解除したいこともあるから、解除方法も覚えねばなるまい。
これは、解除したい位置に、<br clear="all">を置けばよろしい。
単に、<br>タグに、呪文を仕込んだものだ。

これを置けばその次の文字からは、規定通りの位置から表示されるようになる。

all の代わりに、left とか、right とか、自分で指定した属性を指定して
解除することも出来るが、覚えるのが面倒なので、allで覚えておけばよい。
よほど複雑なことをしていて、ひとつひとつ個別に解除したいのなら、
やってもかまわないが。


【本日のポイント】
1.画像の横には、1行しか書けない。
2.imgタグにalign属性を指定して、テキストを回り込ませると
  表を使わなくても、複数行のテキストを書くことが出来る。
3.解除するには、<br clear="all">


【トド短信】
田舎から、ジャガイモだの、タマネギだのがゴッソリ届いた。
作った本人は、完全無農薬野菜だと、えらく自慢の作物だ。
さっそく、1ダースほど茹でて、食べることにした。
半分食べたその夜は、気分が悪くて早寝したが、翌日は下痢。
そういえば、皮をむいた時、1個だけ、中まで色が悪かった。
今思うと、腐っていたのだろうか。
それとも、1度にジャガイモ6個も食べたので、単なる食べ過ぎなのか。
ちなみに、ジャガイモの芽に含まれるソラニンは、かなり危険なことで有名だ。
今後は、芽だけでなく、中身の色にも注意することにしよう。


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

 1日1票!→おもしろかったらクリックしてね



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



ネコでもわかるPC講座はこちら → バカネコ講座
秋葉原にもない楽天専用ツール  → バカネコソフト



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


HTMLオンチでもOK! いきなり使える



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







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

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.