スポンサーサイト

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

画像表示(IMG)をタグ属性からスタイルシートへ

 お盆で東京から息子が帰ってきていまして昨日また上京しましたが、あれやこれやでいそがしく投稿をお休みしていました。


 HTMLソースの新しいトレンドでは、画像の指定はソースで、表示の仕方はスタイルシートで記述して、ブログのようにテンプレート(スタイルシートのファイル)を変えるだけで簡単に模様替えできるようにしているようです。
 私はブログの小技のなかではできるだけ旧来の属性を記述するのを避けて、スタイルシートを使うようにしています。そのほうが、表示をまとまって編集できますし、スタイルの勉強にもなるからです。

 現在はまだ過渡期で、いろいろなソースを拝見しても、混在しているようです。


 ということで、以下画像の属性をスタイルシートでどう記述するかをまとめてみました。詳しくはスタイルについてそれぞれネットで学習してください。

width=n height=n
 画像の大きさを指定します

スタイルではたとえば400×300ピクセルで表示するには width : 400px; height : 300px; と記述します。pxを省略しても動作するシステムもありますが、誤動作する場合もありますので必ず単位は付けてください。


align=align
表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。回り込みを解除するには <br clear=all> を用います。

スタイルでは float : right; float : left; clear : both; clear : left; clear : right; などとスタイル内で記述します

border=n
画像の周りの枠線をピクセルで指定します。画像を <a href="...">?</a>で囲むと自動的に枠線が表示されますが、border=0 とすればこれを消すことができます。

スタイルでは border : solid 1px; などと記述します。border-style、border-width で個別に指定できます。



hspace=n
画像の周りの横方向の余白をピクセル単位で指定します。
vspace=n
画像の周りの縦方向の余白をピクセル単位で指定します。

スタイルでは、border : 10px; padding : 10px; などのように記述します。個別に、 border-left, border-right, border-top, border-bottom と指定することもできます。paddingも同様です。borderは画像の外側の余白、paddingは画像の内側の余白です。違いは背景が設定してあるとわかります。

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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