タグ

web制作と実装テクに関するihokのブックマーク (2)

  • CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法

    2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト! @supports とは? 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね

    CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
  • CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld

    CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目(レイアウト)を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"(青い背景色の領域)を可変、div class="side"(赤い背景色の領域)を固定にそれぞれする方法で、固

    CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
  • 1