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