タグ

Web制作とCSSに関するasa_ca3のブックマーク (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

  • Androidにおけるコンテンツフィットと「overflow:hidden」

    Androidにおけるコンテンツフィットと「overflow:hidden」 ネタ元:スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhoneAndroid・WEB・音楽制作|Kaleidoscope ネタ元ではスマートフォン向けに「overflow:hidden」を指定して横スクロールが表示されないようにするテクニックが紹介されています。しかし、「Androidの場合は完全じゃありません。」の一言が!これはおそらくAndroidのコンテンツフィット機能に関する問題だと思うのでそこらえへんを詳しく解説してみたいと思います。 次のようなHTMLAndroidiPhoneで表示したとします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横スクロール</title> <style> #cona

    Androidにおけるコンテンツフィットと「overflow:hidden」
  • 1