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


■コメント

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


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


Re:文章を回り込ませる(06/10)  
*みあな*  さん
こんにちはヾ(@⌒▽⌒@)ノ
トドさん・あのね・・バーニャン3号君、初めから取ろうと思うとどうしたらいいですか?
(2005年06月11日 18時23分24秒)

Re:文章を回り込ませる(06/10)  
絢音ママ  さん
なるほど!!
コレって、誰でも1度は悩む場所ですよね(^^)
写真と文の並びが悪いと、読んでいて(作ってても)
イライラするし。
ありがとうございます♪
日記更新に、利用させていただきます♪
やっぱりトドさんだわぁ♪
痒いところに手が届く・・・と言うか、
初心者の悩みに鼻が利く・・・と言うか(^^)
あ!!こんな事書いても、
『なにぃ!?(~~+)』なんて、怒らないで下さいね(^^;)
ワタシなりの、感謝の念、というか、そう言うつもりで書いているので…
ボキャブラリーが貧困なモノで・・・
もし気に障る書き方になってたらすみません(^^;) (2005年06月11日 18時41分53秒)

Re:文章を回り込ませる(06/10)  
MIE@VP  さん
そういうタグがあるのは知ってましたが、実際使うときに出てこないんですよね(-_-;)
身に付いてないというか。
結局テーブルでやっつけてしまうことが多いみたい。
使い分けが必要だとは思うんだけどなかなか・・・ (2005年06月11日 19時00分55秒)

*みあな*さんへ  
海獣トド  さん
>バーニャン3号君、初めから取ろうと思うとどうしたらいいですか?

最初の日記から、全部取るのですね?
バーニャン3号を立ち上げたら、開始ボタンをクリックする。
これだけです。
わざわざ指定しない限りは、全部取ってくれます。

あ、回線は、ちゃんとネットに繋いでおいてい下さいね。
たまに、ケーブルを抜いたまま、忘れている人がいます(笑)

(2005年06月11日 19時02分26秒)

絢音ママさんへ  
海獣トド  さん
>コレって、誰でも1度は悩む場所ですよね(^^)

そうにゃんです(笑)

知っていれば、簡単なことなんですけどね。
それほど、ややこしくもないし。

(2005年06月11日 19時04分25秒)

MIE@VPさんへ  
海獣トド  さん
>そういうタグがあるのは知ってましたが、実際使うときに出てこないんですよね(-_-;)

にゃはは! それは私も同じですよん♪

>結局テーブルでやっつけてしまうことが多いみたい。
>使い分けが必要だとは思うんだけどなかなか・・・

使いこなせる人は、それでもいいんですが、
テーブルって、けっこう複雑になりやすくて、
面倒くさいのが、欠点なんですよね~。

(2005年06月11日 19時06分49秒)

Re:文章を回り込ませる(06/10)  
sshijimisan  さん
tableが苦手なので、こんな簡単な呪文で済めば
楽ですね。でも技を使おうとするときいつも使えず
落ち込むですが、これなら大丈夫かな?? (2005年06月11日 19時11分07秒)

sshijimisanさんへ  
海獣トド  さん
>tableが苦手なので、こんな簡単な呪文で済めば
>楽ですね。でも技を使おうとするときいつも使えず
>落ち込むですが、これなら大丈夫かな??

よく使うタグを集めて一覧表にし、印刷しておいてはいかがですか?
印刷してPCの前に置いておくと、便利かも。

(2005年06月11日 19時23分21秒)

Re:文章を回り込ませる(06/10)  
虎太郎0818  さん
本日も大変、勉強になりました♪

それから・・・
ジャガイモで下痢した方は知りません。
中まで真っ黒なジャガイモも食したのですか?
ならばそのチャレンジャ-な精神に乾杯♪

普通、食べませんから。。。(笑)
(2005年06月11日 20時58分33秒)

Re:文章を回り込ませる(06/10)  
バーニャン3号を紹介したら、すぐに買われて、いいものを紹介いただいたってお礼が来てました。
とりあえず報告まで。 (2005年06月11日 21時36分59秒)

Re:文章を回り込ませる(06/10)  
体調は大丈夫ですか?
故郷から届く父母の思いは、いくつになっても嬉しくありがたいですね。
でも、いただくときは「食材」として、いちおう五感でチェックしたほうがよいかと。

タグ講座、ためになりました。
しばらく新しいことにチャレンジしていないから、そろそろ新しいタグも勉強しようかな。
せっかく「トド師匠」のわかりやすい解説があるのだからね。 (2005年06月11日 21時41分36秒)

虎太郎0818さんへ  
海獣トド  さん
>ジャガイモで下痢した方は知りません。
>中まで真っ黒なジャガイモも食したのですか?
>ならばそのチャレンジャ-な精神に乾杯♪

やっぱ、食べすぎたかな...?

>普通、食べませんから。。。(笑)

中まで真っ黒なのは、いくら私でも食べませんってば(笑)

(2005年06月11日 21時52分53秒)

ぽんぽこおぐらさんへ  
海獣トド  さん
>バーニャン3号を紹介したら、すぐに買われて、いいものを紹介いただいたってお礼が来てました。
>とりあえず報告まで。

ぽんぽこさんのご紹介の場合は、流れがとても速いです。
そして、たいへん喜ばれるので、作者冥利につきます。
いつも、ありがとうございます。

(2005年06月11日 21時55分49秒)

☆えみりー☆さんへ  
海獣トド  さん
>故郷から届く父母の思いは、いくつになっても嬉しくありがたいですね。

そうですね。 胸がじーんとします。

>でも、いただくときは「食材」として、いちおう五感でチェックしたほうがよいかと。

にゃはは!
ちょっと色が濃いかな、くらいだったんです。
でも腹痛もなく、下痢3回で止まりました。
薬もなし、体力低下もなしでした。

>しばらく新しいことにチャレンジしていないから、そろそろ新しいタグも勉強しようかな。

がんばれ~!

(2005年06月11日 22時08分40秒)

Re:文章を回り込ませる(06/10)  
そうか!そうやるんだ!!
写真の横に文が書けるといいな~って思ってたんです。

トドさん、もう一つわからないのですが、
写真を真ん中にもってくるのも呪文も、教えてもらえますか?
自分でも見よう見まねでやってみたものの、出来ませんでした(^^;
(2005年06月11日 22時14分11秒)

ねこの肉球☆さんへ  
海獣トド  さん
>そうか!そうやるんだ!!
>写真の横に文が書けるといいな~って思ってたんです。

にゃはは! ピッタシ、ツボにはまりましたね、今日のは。

>トドさん、もう一つわからないのですが、
>写真を真ん中にもってくるのも呪文も、教えてもらえますか?

文字を入れなくて良いのなら、真ん中に持ってくるのは簡単です。
センタータグで挟むだけです。
<center><img src="URL"></center>
これだけで、真ん中に持ってくることが出来ます。
センタータグで挟んだ物が、長かろうが、ほかのタグが入っていようが、かまいません。
このタグは、一気にセンタリングしてしまいます。

(2005年06月11日 22時25分06秒)

Re:文章を回り込ませる(06/10)  
トドさん。出来ました\(~o~)/
今日の講座で習ったのとは違いますけど、写真を真ん中にしてみました。

でも、トドさんが書いてくれたのを、そのままコピーして、写真のURLのところだけ、
入れ替えただけなんだけど・・・

これって、ダメ?
(2005年06月11日 23時16分14秒)

Re:*みあな*さんへ(06/10)  
*みあな*  さん
海獣トドさん
警告バックアップフォルダにファイルが残ってます。フォルダ内を空にしてください・・・
?CD-RWとかに入ってないの?この空にするって?ちょっとわからなくて・・・すみません(*_*) (2005年06月11日 23時38分29秒)

Re:文章を回り込ませる(06/10)  
チャマウ  さん
すごいタメになるお話でした~。
いつかやってみたいと思います。

腐ったじゃが芋、大変ですね~。
凄く安い店で大量に買うと、中には腐った物が
結構入ってるんですね~。
せっかく買ったのに腐ってるとムキーってなりますね~。玉ねぎも同じです・・・( -_-)
お大事に・・・!! (2005年06月11日 23時44分26秒)

Re:文章を回り込ませる(06/10)  
今日のはタメになりましたです~。
前に本を見ながら、やったことあるけど、
ぜんぜん覚えられなくて、
最近は本見るのもちょっと面倒で。。。(^^ゞ
…で、しっかりコピーをとらせていただきました~。

トド教授、ジャガイモ6個は、炭水化物の捕り過ぎですよ(*_*)
それにご飯もいっしょに・・・ なんて、食べてないでしょーねぇ。。。


(2005年06月12日 00時14分43秒)

海獣トドさんへ  
もぐらのこ  さん
トドさんジャガイモの芽は熱に弱いので多分食べすぎかも・・・
でもジャガイモでポテトサラダが作りたくなってきた・・・
ん~食パンに挟んで食べたい(>_<) (2005年06月12日 00時16分01秒)

ねこの肉球☆さんへ  
海獣トド  さん
>今日の講座で習ったのとは違いますけど、写真を真ん中にしてみました。

ソース確認しました。 OKですよ♪

ちょっと改行が、いいかげんな気もするけど(笑)
まあ、問題ありません。

(2005年06月12日 00時28分33秒)

*みあな*さんへ  
海獣トド  さん
>警告バックアップフォルダにファイルが残ってます。フォルダ内を空にしてください・・・

それは、間違って上書きしないための安全装置が、働いたためです。
Cドライブに、Rakubackというダウンロードしたファイルを入れておくフォルダがあるはずです。
これは前回、ダウンロードしたファイルが入っていますから、その中身をどこかへ移動してください。
または、Rakubackフォルダ丸ごと移動してもかまいません。
ダウンロード用のRakubackフォルダは、無ければ、また新しく作られます。
このフォルダに、今回ダウンロードするファイルが保存されるようになっています。
前回のものが残っていると、事故防止のため、
バーニャン3号は作動しないようになっています。

>?CD-RWとかに入ってないの?

CD-RやCD-RWへは、Rakubackの中身を、ご自分でコピーしてくださいね。
バカネコ講座にも、WindowsXPの例ですが、CD-Rへの
バックアップの仕方が出ています。
あっけないくらい、簡単ですよ。

(2005年06月12日 00時39分10秒)

チャマウさんへ  
海獣トド  さん
>すごいタメになるお話でした~。

ありがとうございます。

>凄く安い店で大量に買うと、中には腐った物が
>結構入ってるんですね~。
>せっかく買ったのに腐ってるとムキーってなりますね~。玉ねぎも同じです・・・( -_-)

たまねぎ...これは腐っているとすぐ分かりますね。
ものすごい臭いがしますから!

(2005年06月12日 00時41分03秒)

ひまわり7272さんへ  
海獣トド  さん
>今日のはタメになりましたです~。

今日のは? 今日のは? 今日のは? 今日のは? 
ですか...(笑)

>トド教授、ジャガイモ6個は、炭水化物の捕り過ぎですよ(*_*)
>それにご飯もいっしょに・・・ なんて、食べてないでしょーねぇ。。。

さすがに、ご飯は食べてません。
というか、食べられませんでしたぁ!

(2005年06月12日 00時42分58秒)

もぐらのこさんへ  
海獣トド  さん
>トドさんジャガイモの芽は熱に弱いので多分食べすぎかも・・・

かもね~、やっぱし!

>でもジャガイモでポテトサラダが作りたくなってきた・・・
>ん~食パンに挟んで食べたい(>_<)

ん~、それ、いいかも!
作ろっかな!

(2005年06月12日 00時44分04秒)

Re:*みあな*さんへ(06/10)  
*みあな*  さん
海獣トドさん
何回もすみません((+_+))

あのぉ・・仮にの話なんですが・・
このRakubackなんですが、これ・・ゴミ箱に入れてしまったとしたら・困りますか?これがあかんのかな?って思って、削除してしまったとしたら・・・あはははっ(笑)
何度見ても画像が、やっぱりCD-RWには入ってないようなぁ?
きゃトドさん怒らないでね
♪((O(〃⌒∇⌒〃)O))♪ドキドキ
全部削除して、始めっからとか出来ますか?
えへっ・・・仮にですけど(●⌒∇⌒●) ニッコリ
こんな呆れる質問すみません (2005年06月12日 01時19分41秒)

*みあな*さんへ  
海獣トド  さん
>このRakubackなんですが、これ・・ゴミ箱に入れてしまったとしたら・困りますか?これがあかんのかな?って思って、削除してしまったとしたら・・・

かまいません。 その場合はバーニャン3号を使うと、ダウンロードする時に、Rakubackフォルダは自動的にまた作られます。
そしてその中に、ダウンロードしたファイルが保存されます。

>何度見ても画像が、やっぱりCD-RWには入ってないようなぁ?

ひょっとして、CDにコピーする時に操作を間違っていませんか?

CD-R/RWに保存する時は、Rakubackをフォルダごと
コピーした方が簡単です。
画像が入っていないとすれば、htmlファイルだけをコピーしている場合ですが...
WindowsXPなら、画像フォルダも一緒にコピーされるハズなんですけどね。
XPじゃなくても、Rakubackフォルダごとコピーしてしまえば問題ありません。

ほかの可能性としては、インターネットオプションの設定が画像非表示になっている場合です。
それなら、画像はダウンロードされないので見られなくて当然ですが、
普通、そんなことをする人はいませんしね。
インターネットエクスプローラで、日記の画像が見えているなら、
その心配はありません。


>全部削除して、始めっからとか出来ますか?

私はいつもそうしています。
前回のファイルはRakubackフォルダごと全部、よそに移動して、全部最初から取り直しています。
ただし、古いバックアップファイルを消すのは、
新しいバックアップが、きちんと取れたことを
確認してからですけどね。

(2005年06月12日 01時37分01秒)

Re:*みあな*さんへ(06/10)  
*みあな*  さん
海獣トドさん
おはようございます
♪((O(〃⌒∇⌒〃)O))♪ドキドキ
あっりがとうございます♪
やってみます
去年購入したWindowsXPのdynabookです
こんなに簡単なないよ!っていわれてんけどね・・・(*_*)えへへっ (2005年06月12日 07時44分02秒)

Re:文章を回り込ませる(06/10)  
トド様・・早速・・使ってみます。

少しづつですが。

勉強しても・・忘れる・・?
配線・・チェックしてママの頭の中も・・!!!
(2005年06月12日 09時11分06秒)

Re:文章を回り込ませる(06/10)  
ははぁ~m(_ _)m・・・トド先生いつも・いつもありがとうございます。丁度ままねこにゃ「文章を回り込ませる」件で悩んでおりましたです・・・
前から喉からでが出る程欲しかった『バーニャン3号』・・・現在金欠のためお給料が入るのを待ている次第です・・・(-_-;)
(2005年06月13日 16時36分17秒)

*みあな*さんへ  
海獣トド  さん
>♪((O(〃⌒∇⌒〃)O))♪ドキドキ
>あっりがとうございます♪
>やってみます

にゃはは、そんなに難しくないでしょ?

(2005年06月13日 17時14分17秒)

ルナのママ2329さんへ  
海獣トド  さん
>トド様・・早速・・使ってみます。
>少しづつですが。

やってみれば、意外に簡単ですよ。

>勉強しても・・忘れる・・?
>配線・・チェックしてママの頭の中も・・!!!

キーボードはどこにあるんでしょう(笑)

(2005年06月13日 17時15分46秒)

ままねこにゃさんへ  
海獣トド  さん
>丁度ままねこにゃ「文章を回り込ませる」件で悩んでおりましたです・・・

グッド・タイミングでしたね!

>前から喉からでが出る程欲しかった『バーニャン3号』・・・現在金欠のためお給料が入るのを待ている次第です・・・(-_-;)

にゃはは。 そんなに高価なものでもないですよ?


(2005年06月13日 17時17分36秒)

お邪魔します。  
chiibou888  さん
こんにちは。
お邪魔して、早速、トドさんのお知恵を拝借しました。
これからも、よろすくお願いします。
(2005年08月20日 17時41分06秒)

chiibou888さんへ  
海獣トド  さん
>お邪魔して、早速、トドさんのお知恵を拝借しました。
>これからも、よろすくお願いします。

こちらこそ、よろすく(笑)

(2005年08月20日 22時40分57秒)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

バックナンバー

2025年11月
2025年10月
2025年09月
2025年08月
2025年07月

プロフィール

海獣トド

海獣トド

コメント新着

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

© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: