バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2005年06月10日

ひさしぶりに、HTMLの解説をやってみよう。
今日のバカネコ講座は、テキストの回り込みについて。

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

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

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

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

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

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

だが、楽天日記などでは、かえって面倒だ。
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で覚えておけばよい。
よほど複雑なことをしていて、ひとつひとつ個別に解除したいのなら、
やってもかまわないが。

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

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

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

１日１票！→

　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。

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

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

HTMLオンチでもＯＫ！　いきなり使える