border-radiusで角の丸いボックスを配置する

CSS3のborder-radiusで角の丸いボックスを簡単に配置できる。

下のように、4つの値を指定した場合は、左上から時計回りに指定した値が適用される。

#box {
  border-radius: 40px 160px 80px 120px;
}

表示例

CSS3でフェードインとフェードアウト

CSS3のtransition-durationを使うと、jQueryなどを使わずに簡単に要素のフェードインやフェードアウトを行うことができる。

例

transition-durationに2sを設定しているので、2秒かけて要素の状態が徐々に変化していく。
removeでは、要素を徐々に透明にしつつ高さを0にする。
showでは、徐々に要素の高さと透明の設定も元にもどしている。

div.remove {
  opacity: 0;
  height: 0;
  transition-duration: 2s;
}

div.show {
  opacity: 1;
  height: 200px;
  transition-duration: 2s;
}

フェードイン、フェードアウト対象の要素の定義とJavaScriptの内容。
JavaScriptでは、ボタンのクリックイベントで対象要素のクラスを切り替えてフェードイン、フェードアウトを実行している。

<div id="target">
  要素
</div>

<button type="button" id="remove">削除</button>
<button type="button" id="add">表示</button>

<script>
  var removeBtn = document.getElementById('remove');
  var addBtn = document.getElementById('add');
  var div = document.getElementById('target');

  removeBtn.addEventListener("click", function() {
    div.className = 'remove';
  });
  addBtn.addEventListener("click", function() {
    div.style.display = '';
    div.className = 'show';
  });
</script>

実行例

要素

[CSS3]box-sizingプロパティでボックス幅の計算方法を指定する

CSS3のbox-sizingプロパティを使うと、ボックスの幅や高さの計算方法を指定することができるようになる。

指定できる値

content-box

paddingやborderはbox幅や高さに含まれない

border-box

paddingとborderはbox幅や高さに含まれる

例

この例の場合、oneとtwoのボックスサイズは同じ大きさとなる。
twoは、paddingとborderがボックスサイズに含まれるので、幅と高さをその分大きく設定している。

  <!-- スタイル定義 -->
  <style>
    #one {
        box-sizing: content-box;
        width: 200px;
        height: 200px;
        border: 10px solid black;
    }

    #two {
        box-sizing: border-box;
        width: 220px;
        height: 220px;
        border: 10px solid black;
    }
  </style>

  <!-- html -->
  <div id="one"></div>
  <div id="two"></div>

[CSS3]attribute selector

attribute selectorは属性値を使って要素を選択できるセレクター。

使い方は、簡単で[]内にattribute selectorを定義する。

[attribute selector] {
}

例

/* attributeという属性を持つ要素を選択 */
[attribute] {
}

/*
class="hogs"を持つ要素を選択
class="hogs fuga"はマッチしないので選択されない
*/
[class="hogs"] {
}

/* class属性の値がhogeから始まる要素を選択 */
[class^="hoge"] {
}

/* class属性の値がfugaで終わる要素を選択 */
[class$="fuga"] {
}

/*
class属性の値の中で、スペースで区切られた値「hoge」がある要素を選択

class="hogs fuga"やclass="hoge"が選択される
*/
[class~="hoge"] {
}

html5の必須入力欄のスタイル定義

cssを使用してhtml5で追加された必須入力欄(required属性が設定されいる項目)のスタイルを定義する方法

例

required擬似クラスに対してスタイル定義をすることで、required属性が設定された入力欄のスタイルを変更出来る。

    input:required {
      background-color: lightcoral;
    }

CSSでテーブルの行の背景色を交互に変更する方法

CSSの定義のみで、テーブルの行の背景色を交互に変更する方法

IE8ではこの方法を使えないので、IE8をサポートする場合にはjQueryなどを使って回避する必要があります。
[jQuery]テーブルの行の背景色を交互に変更する方法

CSSのみでの背景色の変更は、nth-child擬似クラスを使用して行います。
下の例のように、trの何番目の子要素に対して背景色を適用するかみたいな使い方をします。
テーブルの場合、タイトル行をthで定義したりするので、tdのみに背景色を適用するようにセレクタを定義しています。

    /* 偶数行の背景色を変更 */
    tr:nth-child(even) td {
      background-color: #eee;
    }

    /* 奇数行の背景色を変更 */
    tr:nth-child(odd) td {
      background-color: #eee;
    }

    /* 任意の行数毎に背景色を変更(この例だと4nと指定しているので4行ごと) */
    tr:nth-child(4n) td {
      background-color: #eee;
    }

css3のinvalidとvalid

invalid、validを使用すると、入力要素の形式が無効か有効かによってスタイルを簡単に切り替えることができる。

例

// 入力要素が不正な場合は背景色を変える。
:invalid {
  background-color: #FFD4D4;
  border: 1px solid maroon;
}

// 入力要素が有効な場合は、スタイルを適用しない
:valid {
}

必須項目で値が入力されていない場合・・・

必須項目で値が入力されている場合・・・