「HTML/CSS」カテゴリーアーカイブ

HTMLおよびCSSに関するカテゴリーです。

CSS Selector

CSS Selectorに関するTIPS

子要素が1つだけの場合に適用。
:first-child:last-childと書くこともできます。

サンプル

ul li:only-child {
  color: red;
}

最初以外の要素に適用。

サンプル

p:not(:first-child) {
  background-color: #fff;
}

Retinaディスプレイ対応をする際、どういう方法を採用するのがよいかいつも悩んでしまいますが、<img>についてはsrcset属性を使うのが良さそうな感じです。

使い方は以下のようにします。

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

こうすることで、対応していないブラウザではimage-src.pngの画像が表示され、対応しているブラウザではデバイスピクセル比に応じた画像が使われるようになります。

ブラウザの対応状況については以下のリンクで紹介されています。

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/

HTML5で<script>の属性にdeferとasyncが追加されました。

<script "sample.js" defer></script>

ページの解析が終了した後にスクリプトを実行

<script "sample.js" async></script>

ダウンロードの完了後にスクリプトを実行

<script "sample.js" defer async></script>

async属性を優先し、defer属性を無視