タグ

ブックマーク / webkcampus.com (1)

  • (K)CSSで作った対談(会話)式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト

    以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします(頼まれてもいませんが・・・) CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて%表示に治す必要があります。【HTML】はほとんど変更なしです。<img>に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>

    (K)CSSで作った対談(会話)式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト
    kamatamadai
    kamatamadai 2014/12/28
    とにかくLINE風の吹き出しみたいにして下さいと言われたときに
  • 1