タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

webdevelop_codingとcssに関するtunacookのブックマーク (2)

  • [CSS]サイズが分からない要素を真ん中に配置するテクニック

    width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t

  • [CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック

    CSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。 How To Get Smoother Rounded Corners デモページ この現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。 上記キャプチャはそのSafari(Mac)のもので、下記はそれを拡大したものです。 角丸の拡大 この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られます。 これを少しでも滑らかにするためのトリックを紹介します。 ビフォー HTML

  • 1