タグ

remに関するalice_rのブックマーク (2)

  • CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ

    CSSの相対的な単位(em, rem)を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ

    CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ
  • あなたはどれにする?CSSの文字サイズ指定「px、em、%」 - デザインメモ

    CSS(スタイルシート)でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。 ですが、pxで指定しないとなると、今度はemと%が出てきて、どれがいいんだ?といつもよくわからないまま使っていました。 なので、どれがいいのか?そもそもこの単位たちは何なのか?復習も兼ねて調べてみました! 目次 ・なぜ「px」で指定しない方がいいと言われているの? ・font-sizeにおけるpx、em、%の簡単な用語説明 ※一部修正・削除(2016年12月11日) ・px、em、%の違いは、絶対?相対? ・IEライクなfont-sizeの指定方法 ・古いIEを気にしない、スマホサイトは「rem」がおすすめ ※追記(2014年10月1日) なぜ「px」で指定しない方がいいと言われているの? むかしむかし「IE」で文字の拡大ができない問題 ブラウザには今見ているWebサイトを拡大できる

    あなたはどれにする?CSSの文字サイズ指定「px、em、%」 - デザインメモ
  • 1