吹き出し 説明文 ポップアップ
リンク文字,画像にマウスを乗せてください。
■幼児・子供に最適なサイズ
「通常サイズのマスクでは隙間ができる」
「ゴムが長すぎて顔にうまくフィットしない」
通常サイズのマスクでは、お子様には隙間ができてしまい
ウイルスを効果的に遮断できません。
このマスクは、プリーツ構造で自由に伸び縮みするプリーツ構造で快適な着け心地を実現しています。1日中着けていても、息苦しくなったり耳が痛くなったりしづらい作りになっています。 普通のマスクよりも小さめに設計された
幼児・子供用のマスクなので、顔が小さい方でもジャストフィット。
幼児や学校に通うお子様にぴったりです。
■新型インフルエンザ新型インフルエンザとは？
動物のインフルエンザウイルスが変化して人に感染したものが『新型インフルエンザ』です。容易に人から人へ感染して広がり、急速な世界的大流行（パンデミック）を起こす危険性があります。対策の3層型高性能マスク 外側と内側には不織布、
真ん中にBFE95規格フィルターを採用した3層構造でウイルスを防ぎます。
2層目にはBFE95素材が使われているため、
新型インフルエンザ対策としても最適です。
サンプルソース
<html>
<head>
<title>吹き出しポップアップ CSSサンプル</title>
<style type="text/css">
<!--
.pop a:hover{ /*マウスが乗ったら*/
position: relative;
top: 0px; left: 0px;
}
.fukidasipop { /*吹き出し本体*/
position: absolute;
top:17px; left:20px;
display: none; /*何も表示しない*/
padding: 5px; /*内側の余白*/
width: 300px; /*ブロックの幅
font-weight: bold; /*文字の太さ*/
text-decoration: none; /*文字飾り*/
color: #ffffff; /*文字色*/
background-color: #b22222; /*背景色*/
border-top:white solid 10px;
border-left:#b22222 solid 10px;
}
a:hover .fukidasipop {
display: block; /*ブロック要素で表示*/
}
-->
</style>
</head>
<body>
<p class="pop">このマスクは、
<a href="javascript:void(0);">
プリーツ構造<span class="fukidasipop">
吹き出しポップアップ</span></a>です。
<a href="javascript:void(0);">
新型インフルエンザ
<span class="fukidasipop">吹き出しポップアップ
</span></a>対策
<br>
<br>
吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する
<br>Opacityプロパティを使って半透明を実現しています。
</p>
</body>
</html>
position:relative; top:0px; left:0px;
[相対的配置] 本来表示されるべき位置から、
配置の設定分 top: *px; left: *px 移動した位置に表示されます。
※このサンプルの場合は .pop a:hover に position:relative; を
設定しているので top:0px; left:0px; 以外を設定するとリンク文字に
マウスが乗った時その位置に移動するので表示が乱れます。
position:absolute; top:*px; left:*px;
[絶対的配置] ブロックの性質をもつ親要素から、
配置の設定分移動した位置 top: *px; left: *px に表示されます。
position:relative;
top:0px; left:0px;親要素position:absolute;
top:35px; left:150px;
上記の図では親要素に対して上から35px,左から150px 移動した位置に
青色のボックスが配置されています。
border-top:white solid 10px;
border-left:#b22222 solid 10px;
borderプロパティを使って吹き出しの出っ張りを作ります。
CSSで作る吹き出しボックス
吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する
Opacityプロパティを使って半透明を実現しています。
値：IE // 1（透明）〜100（不透明）
Firefox・Netscape・Opera・Safari //0.0（透明）〜1.0（不透明）
CSSで作る吹き出しボックス,サンプル
display プロパティ
JavaScriptとCSSで指定した要素の表示/非表示
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
画像にマウスを乗せると説明文を表示します。
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
| 
| 
