スポンサーサイト

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

スタイルシートで簡単写真レイアウト

 ブログで写真を掲載すると、ブログサイトの決められたとおりに写真を配置するのに飽きたら今度はいろいろな配置を実験したくなる。

 ほとんどのブログ投稿のテクニックではテーブルを使った配置が紹介されているが、これも最初からテーブルのコードを記述するのも大変な上に、なかなかきっちりとテーブルの枠の中に入ってくれないから大変だ。

 ここで、写真や画像をきれいにスタイルシートでブログに左右に掲載する方法を紹介する。これはWEBメールでも使える技だ。

この記述でも、左右に画像を配置してみる。この方法だと、あまり配置のことを気にせずに本文をかきすすめていける。

 割り箸をやめてMy箸を持とうという画像は文の先頭に記述し右に配置した。そしてimgタグの中に style="float:right;margin:0px;" というスタイルシートを挿入した。
 次に、この記述でもという行の先頭に、私のそっくりサンを配置した。かなりよく似ているが、すこし実物のほうが最近はふけているのはいたしかたない。この画像のimgタグの中には style="float:left;margin:15px;" というインラインスタイルシートをタグの内部に書き込むだけで画像が右左に文章をよけて配置できる。

 すぐにでも簡単にできる機能なので、ぜひお試しください。

まとめ
右寄せ:<img src="画像URL" style="float:right;margin:10px;"/>
左寄せ:<img src="画像URL" style="float:left;margin:10px;"/>

      marginは画像と文字との間隔で10ピクセルに設定しています。

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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