カテゴリー: コーディング

white-spaceプロパティは、半角スペース・タブ・改行の表示の仕方を指定できます。
nowrapというオプションは
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、thの大きさが指定されている場合にも、自動的に改行されません。
■css
th {
white-space:nowrap;
}
widthで横幅を指定しないでも改行を禁止することで改行させないようにできます。

要素の中に何も入っていないときは違うスタイルを当てたいとき:emptyを使用すると便利です。
このスタイルを使用すると、空の要素に対してのみ異なったスタイルを適用することが出来ます。

/* :empty を指定することで、空の場合は非表示にできる。 */
.test:empty {
display: none;
}

スタイルシートの継承は、親から子へプロパティの値が引き継がれることです。
例えば、文字の大きさや色が引き継がれると言った具合です。
■html

■css
body{font-size:100%;}
div.test{font-size:120%;}
div.test p{font-size:80%;}

文字サイズはbodyの文字サイズを基準としたとき96％になります。font-sizeは継承されるので、pの文字サイズはdiv.testの値を基準に算出されます。
なので、pの文字サイズは1×1.2×0.8×100＝96%となります。

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がそのままで対応出来るので、便利な技です。