CSSで作る吹き出しボックス
吹き出し風のボックスです。
borderプロパティを使います。
容量1GB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。
さくらのレンタルサーバ。
サンプルソース
<html>
<head>
<title> CSSで作る吹き出しボックス,サンプル</title>
<style type="text/css">
<!--
.fukidasi {
padding: 5px; /* 内側の余白 */
width: 220px; /* ボックスの幅 */
font-weight: bold; /* 文字の太さ */
color: white; /* 文字色 */
background-color: blue; /* 背景色 */
border-top: white solid 10px; /* 上ボーダー */
border-left: blue solid 10px; /* 左ボーダー */
}
-->
</style>
</head>
<body>
<p class="fukidasi">吹き出し風のボックスです。borderプロパティを使います。</p>
</body>
</html>
このサンプルは過日 borderプロパティをいじくっているうちに思いつきました。
borderの全方向で幅を10px 、色はfuchsiaです。
borderの全方向で幅を10px 、色はfuchsiaです。
borderプロパティ
吹き出しボックス
吹き出しボックス
つぎにborderの上と下の色を変えてみます。
borderプロパティ
吹き出しボックス
吹き出しボックス
各borderが斜めになって接しています。これを利用して
左上に突起を作ります。
左上に突起を作ります。
まず右と下のボーダーを '0' にします。
borderプロパティ
吹き出しボックス
吹き出しボックス
これで姿が見えてきました。上ボーダーの色を背景色(この場合はページ)と同じに
左ボーダーの色をボックスの背景色と同じにすればできあがりです。
border-top: white solid 10px; // 上ボーダー 白 実線 太さborder-left: blue solid 10px; // 左ボーダー 青 実線 太さborderプロパティ
吹き出しボックス
吹き出しボックス
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシート CSS
リスト要素を使ったナビゲーションメニュー
スタイルシート css を使った横並びリストメニュー
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
タグ：borderプロパティ 吹き出し
