タグ

LINEとcssに関するropparaのブックマーク (2)

  • ウェブ組版は行間が基準なのではという話 - note

    以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 > remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて文ができている。文字の頭(仮想ボディの上)から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基のウェブ(CSS)では、この line-gap のくっつき方が純粋な日語組版とは異なっ

    ウェブ組版は行間が基準なのではという話 - note
  • (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デザイナーのための技術系メモサイト
  • 1