BLOG2015.09.29CSSのみで作る!簡単な吹き出しの作り方(レスポンシブ対応)お風呂あがりは、エッセンシャルオイルをキャリアオイルで希釈して、身体をマッサージしているデザイナーの嶋津です。今回は真面目に、画像などを使用せず、CSSのみで作れる簡単な吹き出しの作り方(レスポンシブ対応)をわかりやすく紹介したいと思います。右の吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し左の吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出しHTMLの記述は簡単ですね。<p>タグを<div>タグで囲み、適当なクラス名を2つ付けただけです。ポイントは共通と固有のclass名を付けることです。auto;}左右共通のclass名「fukidashi」に「width」と「relative」と「margin」を指定し、吹き出しの幅や位置を調節します。-15px;}CSSはちょっと複雑そうに見えますが、意外とシンプルです。個別のクラス名を指定した<p>タグに「border」と「padding」を記述し、吹き出しの線と内側の余白を指定します。<p>タグの擬似クラス「:after」と「:before」に「content」と「absolute」と「border」を記述し、吹き出しの位置と形を指定します。<p>タグの擬似クラス「:before」だけ、吹き出しに応じた「border」の色と位置を指定します。これでCSSの記述は完了です。「border」と「potision」の記述の詳細を知りたい方は、下記の記事を見ていただければ、こういうことか!とよく理解できると思います。auto;}}吹き出しを可変させたいという方には、CSSにさらに上記のコードを記述します。レスポンシブ対応に便利なメディアクエリという技術です。これで、スマートフォンやタブレットのウィンドウ幅にも対応できます。ここで注意点があります。それは、メディアクエリはIE8以下には対応していないことです。