スポンサーサイト

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

No.9 画像IMGタグを極める その1画像の大きさを指定する

 ブログでタグ入力する上で一番知っておきたいのが画像の取り扱いだ。画像の表示には img タグを使う。その画像の表示をコントロールするためにXHTMLで推奨されているのがスタイルです。タグの中に style="ここにスタイルを記述" と記述するのが、カスタムテンプレート以外でGooのブログでスタイルをユーザーが指定できる唯一の方法だ。

 それでは一つずつブログで使えそうなスタイルの利用例を説明します。

 ここではURLが http://goo.gl/2VgG の600ピクセル×400ピクセルの下のスズランの画像を例にして、さまざまなスタイルの指定例を学んでいきます。



<img src="http://goo.gl/2VgG" />

 これが上の写真表示のタグです。


1.画像の幅を指定する


 一般的には、画像の実際のサイズより大きく表示すると画像が汚く表示されますので、実サイズを縮小して表示します。ここでは実際600ピクセルある画像を横幅200ピクセルで表示します。表示には幅と高さが指定できますが、どちらか一方を指定した場合はもう一方は縦横比が保たれて縮小されます。指定の方法は width:200px; とします。



<img src="http://goo.gl/2VgG" style="width:200px;" />




2.画像の高さだけ指定する。



 この場合もたての高さの縮小率に比例して幅も小さくなります。ここでは210ピクセルの高さに表示してみます。指定は height=210px; と指定します。



<img src="http://goo.gl/2VgG" style="height:210px;" />



3.幅と高さを同時に指定する



 この場合は幅と高さが任意のサイズで指定できますので、画像を比率を変えて変形して表示することができます。ここでは幅300ピクセル、高さ300ピクセルとして表示してみます。画像の比率が変わりました。



<img src="http://goo.gl/2VgG" style="width:300px; height:300px;" />




 このように、スタイルを使えば画像の大きさを自由に変更して表示することができます。従来のHTMLでは、画像の大きさはタグの属性を使って width=300 height=300 などとしていましたが、私のこの「ブログであそぼ」シリーズでは新しいXHTMLが推奨するスタイルで指定しますので、ご理解ください。

お詫び:4月1日投降した時点で、数字がでたらめだとのご指摘を受け訂正いたしました。もうしわけありませんでした。

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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