CSSで吹き出しを作っちゃうよ
CSSだけで吹き出しを作るメリット 画像を使用せず、CSSだけで吹き出しを作るメリットとして以下のようなものが挙げられます。 吹き出し内部のテキスト量に応じて、吹き出しのサイズが自動的に調整される 後から吹き出しのデザインを変更したくなった場合にCSSの指定で容易に変更可能 画像を使用しない分だけファイルサイズを節約できる iPhoneやAndroidでも表示できる 吹き出しをCSSで作る場合の考え方 吹き出しの外枠のボックスを用意してあげて、擬似要素である「:before」や「:after」といった要素を使って表現します。 自分で一から作ろうとすると、border要素を使って三角形を作ったり…、そして吹き出しに枠線を付ける場合は三角形を二枚重ねて微妙にずらしてとか…、ああ、めっちゃ複雑…！ 吹き出しを簡単に作ることができるWebサービスを使ってラクをしちゃいましょう。 CSS ARROW
(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト
以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・） CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
