b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

スタイルシートを使って画像(img)の位置を設定する方法

2015-04-10

cssで画像の位置を設定するには、ブロック要素で下記のようにクラス(クラス名は任意です)を設定し、html の imgタグに埋め込みます。
displayは、ブロックレベル・インライン等の要素の表示形式を指定するプロパティです。
imgはそれ自身がインラインブロック要素なので、何も指定しないと画像は横に並んでいきます。block要素は縦に積み上げられる表示方法で前後に改行が入ります。

????????

スタイルシートの書き方

スタイルシートで画像を右寄せ

img.alignright {
        display: block;
        margin: 0 0 0 auto;
}

スタイルシートで画像を左寄せ

img.alignleft {
        display: block;
        margin: 0 auto 0 0;
}

スタイルシートで画像を中央(センタリング)

img.aligncenter {
        display: block;
        margin: 0 auto;
}

imgタグにclass属性を指定する
htmlは、imgタグにクラス属性を指定して画像を表示します。

/* 右寄せ */
<img src="画像のアドレス" class="alignright" />

43

/* 左寄せ */
<img src="画像のアドレス" class="alignleft" />

43

/* 中央 */
<img src="画像のアドレス" class="aligncenter" />

43
 


????????


 

-css・html
-

関連記事

ホームページで文字の背景に色をつける

背景色を指定するプロパティです。 background-color: 文字を強調したい場合や、単調な黒文字の文章にアクセントをつけたい場合など、文字の背景に色をつけるとサイトが見栄えよくなります。 サ …

XHTML宣言文(DTD)

HTML4.01では、下記のようにDOCTYPE 宣言を記述しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona …

ホームページで点線や実線を表示させる

HTMLでは、 <hr>と記述するだけで水平線を表示させることができます。 この<hr>のスタイルを点線にしたり、太線にしたり、色を変えたり、変更することができます。 やり方で …

画像を表示させるタグ

基本-画像を表示させるタグ <img src=”画像のアドレス”> 上記は画像を表示させる基本的なタグです。何も設定していない状態では、画像は左寄せに表示されます。 …

画像を横に並べる方法

画像を横に並べて表示する方法 画像を横に並べる方法は何種類かあります。 一番簡単な方法ですが、改行を入れずにタグを下記のように記述します。 この場合、画像と画像の間に半角スペースができます。 < …

スポンサーリンク

スポンサーリンク