画像に回り込んで文章表示(左側に文章)

 画像  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<img class=”imgltext” src=”testthm.jpg” alt=”木々”/><p>画像の左側に文章が来るようにしてみました。<br/>
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
</p>

CSSソース

.imgltext {
float:right;
}

サンプル表示

木々

画像の左側に文章が来るようにしてみました。
画像と文章を並べて表示したい時に使ってみると良いかもしれません。

解説

HTMLソース

左側に文章を回り込ませて表示させたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class=”imgltext”/>としています。

CSSソース

float:right;
float:right;には右から左へと順番に並べて表示するという意味があります。
なので、画像(img)の左側にテキスト(p)が横並びに表示されます。

画像に回り込んで文章表示(右側に文章)

 画像  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<img class=”imgrtext” src=”testthm.jpg” alt=”木々”/><p>画像の右側に文章が来るようにしてみました。<br/>
画像と文章を並べて表示したい時に使ってみると良いかもしれません。
</p>

CSSソース

.imgrtext {
float:left;
}

サンプル表示

木々

画像の右側に文章が来るようにしてみました。
画像と文章を並べて表示したい時に使ってみると良いかもしれません。

解説

HTMLソース

右側に文章を回り込ませて表示させたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class=”imgrtext”/>としています。

CSSソース

float:left;
float:left;には左から右へと順番に並べて表示するという意味があります。
なので、画像(img)の右側にテキスト(p)が横並びに表示されます。

画像にカーソルを合わせた時に画像の説明文を表示する

 画像  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<img src=”link.gif” alt=”link” title=”リンク”/><br/>
<img src=”bbs.gif” alt=”bbs” title=”掲示板”/><br/>

サンプル表示

link
bbs

上のボタン風画像にマウスカーソルを合わせると、その画像の説明が表示されます。
写真の簡易説明をしたり、英語表記の画像の日本語訳を表示したりするのに使うとよいかと思います。

解説

HTMLソース

画像にカーソルを合わせた時に画像の説明文を表示したい画像にtitle属性を記述します。
ここでは、<img alt=”link” title=”リンク”/>としています。
title=”～”の～部分の文字がカーソルを合わせたときに表示されます。
写真の簡易説明をしたり、英語表記の画像の日本語訳を表示したりするのに使うとよいかと思います。
なお、altは代替テキストというもので、画像が何らかの事情で表示されなかった際に代わりに表示される文字です。
titleはカーソルが合わさったときに表示される文字ですので、上手に使い分けてみて下さい。
詳細はHTMLタグリファレンス 画像表示をお読み下さい。

画像を半透明にする

 画像  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<img class=”mozimg” src=”testthm.jpg” alt=”木々”/>

CSSソース

CSSソース
.mozimg {
filter:Alpha(opacity=20);/* IE用 */
opacity:0.2;/* FireFox、Chrome、Opera、Safari用 */
}

サンプル表示

木々

[参考]半透明にしていない、元の画像。

木々

解説

HTMLソース

半透明にしたい画像にのみ適用させる為、画像にclassを指定します。
ここでは、<img class=”mozimg”/>としています。

CSSソース

半透明にするのに、ブラウザによって書き方がまだ統一されていません。
その為、ブラウザ毎(現時点では、IEとそれ以外の2種類)で別の記述をしなければなりません。
filter:Alpha(opacity=20);
ブラウザ「InternetExplorer」用の指定方法。opacity=20の20部分の数字によって透明度が変わります。
0～100の数字が指定でき、0なら完全に透明(見えない)、100ならくっきりと表示されます。

opacity:0.2;
ブラウザ「FireFox」「Chrome」「Opera」「Safari」用の指定方法。opacity:0.2;の0.2部分の少数の数字によって透明度が変わります。
0.0～1.0の数字が指定でき、0.0なら完全に透明(見えない)、1.0ならくっきりと表示されます。

将来的には書き方が統一されることを願うばかりですが、まだ暫くはこの2つを並べて書いておく必要がありそうです。

ちなみに、上の画像部分を文字に変えれば半透明な文字が出来上がります。
可読性(読みやすいか)を考えた上で、デザイン上必要なら使ってみるとよいでしょう。

リンク付画像のリンク枠線を表示しない

 画像  No Responses »
10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<a href=”test.html”><img src=”test.jpg” alt=”画像代替テキスト”/></a>

CSSソース

CSSソース
a img {
border-style:none;
}

サンプル表示

木々

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通に画像に対してリンクを張ればOKです。

CSSソース

CSSソース
a img {・・・}
このaの後にスペースを空けてimgと書く指定方法は、aタグの中にあるimgタグにのみ・・・を適用するという意味です。
つまり、リンク(a)を張られた画像(img)にのみ適用されるということです。

border-style:none;
これは、枠線を表示しない(none)という意味です。
上の説明と合わせると、リンクを張られた画像の枠線を表示しないという指定をしていることになります。