スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.11 画像IMGタグを極める その3 画像を左右に配置する

 画像のタグと、そのタグの中に記述するスタイルで、画像の大きさ、枠の設定の仕方をいままで書いてきましたが、今回は、画像を表示する位置について説明します。
 
 何もスタイルをしていないタグでは、画像は一つの文字と同じ表示の仕方をします。マイクロソフト オフィッスのワードで、「行内」と同じです。
 しかし、小さな画像をその状態で表示すると、行が間延びしたり、画像の右横に不必要な空白ができたりします。できたら、新聞のようにテキストが画像を避けて表示できれば、もっとブログの表現が豊かになるはず。
 
 この機能を実現するのが、スタイルのfloatだ。
 たとえば画像タグ内に、style="float : right;" と書いてやれば、画像が右側に表示され、テキストがその画像をよけて流れる。style="float : left;" と書いてやれば、逆に右側に画像が表示され、左側にテキストが流れる。ただ、画像とテキストの間がくっついて恰好が悪いので、一緒に画像とテキストの余白を作るマージンスタイルを指定して、style="float : right; margin : 10px;" としてやれば、テキストと画像の間に余白が作られて見やすくなり。たったこれだけスタイルを記述するだけだから、ぜひ試してください。
 下の例では、最初にスタイルなし、次に、左配置、右配置を、テキストの余白10pxとして配置しました。タグとスタイルの記述はそれぞれ以下です。

 スタイルなし <img src="http://goo.gl/kdvB" />
 左配置    <img src="http://goo.gl/kdvB" style="float:left; margin:10px;" />
 右配置    <img src="http://goo.gl/kdvB" style="float:right; margin:10px;" />
 
 



 日本の春といえば桜。我が家の周りでも、いくらか散り始めたとはいえ桜がいまは盛り。私が小学校に入学したとき、入学式のときのかすかな記憶の中でも、私の手をひく母の柔らかい手のぬくもりと校庭に咲いていた満開の桜の記憶は今でも鮮明に残っているから不思議だ。

 しかし、入学式といえば4月の10日前後だったから、満開の時期が当時とくらべて10日ほど速くなっていることは確かだ。
 しかし変わらないのは、3月末に暖かくなってストーブなどの暖房設備を片づけたあとから、花曇りという天気が続き、時にはしとしとと雨が降って、今までの温かさがウソのような天気が戻ってきては、また暖房をつけたりする。この北九州でも10度すこしくらいの気温に、朝起きるのをきょうもためらった。

 昨日は久しぶりに、その桜満開の雨上がりの公園で草取りをした。まだ土が柔らかくて長靴にべっとりと土がからみつく。ときどき、さわやかな風が、言葉通りの花吹雪を撒き散らし、ピンクの模様を緑色の地面に描いてくれる。散歩をする犬の背にも、飼い主の頭にも、淡いさくら色の花びらがのっていた。

 桜散る公園の、雨の後の地面は柔らかく、しばらく手入れをしていない草むらの草を刈っていると、ミミズがでてくる。小鳥たちはこのミミズたちをねらって、草むらにたむろしているのだろう。私はミミズにまったく恨みはないから、そっと脇にミミズを逃がして草取りを続けた。

 
   花吹雪 緑にまいちる 公園で
      みみず よけつつ きょうも草刈る



 無心に草を刈っているといいこともある。今まで聞いたことのない公園の音が次第に聞こえてくる。小鳥のさえずり、子どもたちの遊び声、草がそよぎ、花びらが散る音まで本当に聞こえてくるような気がする。それもここちよく聞こえてくる。
 
 大切なものは見えないといわれるが、草を刈りながら、ときどき眼を閉じて深い呼吸をすると、今まで見えない世界が、見えない音が聞こえてくる。
 そして、花見に訪れたご近所の老人会の方たちの「おはようございます」のあいさつにわれに戻っても、またさわやかさだ。

 カルスト台地の平尾台のケービングでもぐった鍾乳洞窟の中で、みんなでヘッドランプを消して、暗闇のなかでじっと耳を澄ましたときにも、今まで聞こえなかった音が目の前に聞こえてくる。それと同じような気がする。

 草刈を終えて、公園の入り口の年長者大学の方たちが去年「ケナフ」を栽培した畝のうえに、菜の花が一本だけ咲いていた。写真はその菜の花だ。

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。