テキストが領域を超えた時「…」を表示

省略したことを表す「…」をCSSだけで表示可能です。

CSSを使うと幅を指定してその領域よりもはみでた場合に省略記号「…」を表示することができます。

ext-overflow: ellipsis;
テキストが表示域をこえた時に省略記号「…」を表示

text-overflow: clip;
省略記号は表示しない

テーブルのセル内で改行させない

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

要素の中身が空の場合、非表示

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

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

CSSの%継承

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

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

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

CSSの[]

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

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

MW WP Form URL引数を有効にする

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

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

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

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

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

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

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

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

CSSでのカーニング

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;
}