このblogのついったを表示させてる部分はフキダシ風になってるけど
とても簡単なcssで出来てます。
([追記]
:before 擬似要素 / :after 擬似要素でつくる画像を使わないふきだしの作り方はこちら
こことか
こことか
以下その説明。
まず仕組みから
こうゆうイメージで作るとして
トンガリ部分は透過gifで作成しておく。
トンガリ部分をどの要素に持ってくるかが問題になると思うけど、今回は下の部分（青いエリア）の背景に配置した。
html的を色分けするとこんな風に。
例えば下の文章をふきだしにする場合
1 | にんげんだもの-320 |
「にんげんだもの」が赤エリアで「320」が青エリア。
htmlはこんな風にdlでマークアップした。
1 2 3 4 | <dl> <dd><p>にんげんだもの</p></dd> <dt>320</dt> </dl> |
cssで必要な記述はこんな感じ？
用意しておいた尖がり部分の画像を「320」の背景にして、positionを使ってマイナス方向にずらす。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | *{ padding:0; margin:0; } dd{ background:#d8d8d8;/*背景色*/ border:2pxsolid#808080;/*線の色*/ } dt{ position:relative; top:-2px;/*ddのborder分、今回は線幅2で作ったので-2px上へ*/ background:url(トンガリ画像.gif)no-repeat; padding-top:1em; } |
