box-sizingは要素の算出方法を指定してくれます、
.test {
width:300px;
border: 1px solid #ccc;
box-sizing: border-box;
}

box-sizing: border-box;を指定したことによって、ボーダーを内側に指定できます。
そうすることで、ボーダーの線幅の計算等をする必要がなくなります。

Attribute Selectorというもので、
td[width=”600px”]{}と書けば、tdにclass名をつける必要はありません.

パターンE[hreflang|=”en”]の属性セレクタは、要素の属性の値がハイフン（-）区切りでハイフン（-）の前が完全一致した場合にスタイルが適用されます。
主な用途は、言語のサブコードとの一致です。言語の一致（lang属性）としても同様に扱えます。

前回ご紹介した「MW WP Form」ですが、今回はオプション設定を活用したカスタマイズをご紹介します。

まずは「URL引数を有効にする」オプションにチェックを入れましょう。

こちらを有効にすることで、投稿ページのタイトル等の情報をフォーム内に自動表示させることが可能になります。

投稿の個別ページに「この商品について問い合わせる」というボタンを設置した想定で解説を進めます。

<a href="/contact/?post_id=<?php echo $post->ID; ?>">この商品について問い合わせる</a>

このように、フォームを設置したページのURLにページIDをパラメータとしてくっつけます。

そして、フォーム側の記述は、

<table>
<tr><th>購入お問合せ商品</th><td>[mwform_text name="item" class="text" size="60" value="{post_title}"]</td></tr>
<tr><th>お名前</th><td>[mwform_text name="name" class="text" size="60" maxlength="20"]</td></tr>
<tr><th>メールアドレス</th><td>[mwform_email name="email" class="mail" size="60"]</td></tr>
<tr><th>TEL</th><td>[mwform_tel name="tel" class="number"]</td></tr>
<tr><th>郵便番号</th><td>[mwform_zip name="postal" class="number"]</td></tr>
<tr><th>住所</th><td>[mwform_text name="address" class="address" size="60"]</td></tr>
<tr><th>備考</th><td>[mwform_text name="message" class="message" size="60"]</td></tr>
</table>
[mwform_submitButton name="submit" class="submit" confirm_value="確認画面へ" submit_value="送信する"]

{post_title}で、リンク元のページのタイトルを取得してvalueに設定することで入力欄に自動表示させています。

最近の案件ではこの「MW WP Form」が大活躍しています。是非皆さんも活用してください。

font-kerningのプロパティを使用することによって、web上でカーニングを行うことが出来ます。
他ににletter-spacingがありますが、これはすべての文字を均等に調整出来ますが、font-kerningは 特定の文字の組み合わせの時、調整してくれます。

.kerning {
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
}

display: table-cellを使ってテキストを縦方向の中央に揃えることができます。、
要素の高さ：height、vertical-alignの指定が必要です。

■html

• テキスト
• テキストテキストテキストテキスト
  テキストテキストテキストテキスト

■css
.test li {
height:70px;
display: table-cell;
vertical-align: middle;
}

注意はtable-cellはIE8から対応ということです。

ネガティブマージンを使って要素の重ねます。
■html

■css
.wrap .maru{
width: 150px;
height: 150px;
margin: 0 auto;
background-color: #000000;
border-radius: 40%;
}
.wrap .sankaku{
width: 0;
height: 0;
margin: 0 auto;
border: 10px solid transparent;
border-top: 20px solid #000000;
}

.test {
width: 400px;
border: 2px solid #CCC;
padding: 5px 10px;
margin-bottom: 30px;
_zoom: 1;
overflow: hidden;
}
.test_img{
float: left; margin: 0 10px 5px 0;
}
.test p {
overflow: hidden; _zoom: 1;
}

画像の横幅や高さが変わってもhtmlがそのままで対応出来るので、便利な技です。

割り切れない数字に対して、calcで自動計算出来ます。
width: calc(98% / 3);で残りの98%を3分割します。
両端にマージンを入れたくない時などに使うと便利です。

• てすと
• てすと
• てすと

.test {
list-style: none;
padding: 0;
overflow: hidden;
zoom: 1;
}

.test li {
background: #222;
margin-right: 1%;
height: 30px;
float: left;
width: calc(98% / 3);
}

.test li:last-child {
margin-right: 0;
}

p{
text-align:justify;
text-justify:inter-ideograph;
}

text-alignは文字の表示位置指定するプロパティです。
centerと指定して中央寄せなどに使用します。今回は、文字の両端を均等割付にするために、両端揃えのjustifyを指定します。

text-justifyはtext-align:justify;の時の均等割付の形式を指定します。これを単語間隔と文字間隔を自動調整するinter-ideographを指定します。

なお、Firefoxでは標準仕様で禁則処理に対応しています。