擬似要素:nth-child()をIE8で使用する

「:nth-child()」使い方として
リストなど連続している要素のn番目に対して、cssで処理を加えられる便利なものですが、

残念ながらIE8での使用はできません。
まだまだ、IE8対応のサイトもあると思うので、擬似的に:nth-child(n)が使用する方法を、
jqueryを使用して紹介します。

■html

■js
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘#test_list ul li:nth-child(3)’).each(function(){
$(this).css({color: ‘blue’});
})
});
</script>

上付き文字の調整

注釈などの上付き文字タグのcssでの調整を紹介します。

テーブルなど注釈は使う機会が多いと思うので、覚えておくと便利です。

■html

■css

「px」などの絶対値ではなく「em」「%」などの相対値で指定しないと、ブラウザ間での相違があるので注意です。

ホバー時の動作を指定する

グローバルナビゲーションのホバー時に、サブナビゲーションを表示させたりなど、

便利な方法を紹介します。
この方法を使えば、指定した場所にホバーすると、特定の要素を表示させることができます。
<ul id=”sub_nav”>
    <li>ナビ1</li>
    <li>ナビ2</li>
    <li>ナビ3</li>
</ul>
$(function() {
  $(‘sub_nav’).hover(function() {
    ホバー時の動作
    $(this).css(‘display’, ‘block’);
  }, function() {
    ホバー解除の動作
    $(this).css(‘display’, ‘none’);
  });
});

左揃えのまま中央寄せ

文章を左揃えのまま中央にセンタリングしたい場合があります。

そんな時には、inline-blockを使用します。

inline-blockはtext-alignの指定を受けるので、
親要素にtext-align:centerを指定して中央寄せにすることが出来ます。

WordPressにAI・PSデータをアップロードする方法

WordPressでは、アップロードが可能なファイル形式が決まっています。
ファイル形式が許可に設定されていないと、ファイルをアップロードした時にエラーになります。
今回はアップロードが許可されていない拡張子のファイルのアップロードができる方法を紹介します。
■AIデータのアップロードを許可
function allow_mime_type( $mimes ) {
$mimes['ai'] = 'application/postscript';
return $mimes;
}
add_filter( 'upload_mimes', 'allow_mime_type' );
上記は、aiファイルをアップロード可能にするための内容です。
この方法を使えば、AIファイルだけでなく動画ファイルなど、アップロードできなかったファイルをアップロードができるようになるので便利です。

Browser CSS-Selector-Test

「Browser CSS-Selector-Test」はブラウザがCSSセレクタをサポートしているかの有無を確認できます。
CSS3のなど場合、現状で使用できるかを確認する時に便利だと思います。

使用方法は、
確認するブラウザでサイトにアクセスした後、中央にある「Start test!」のボタンをクリックするだけです。

対応状況は
CSS1~CSS4までのサポート状況を確認することができます。

具体的に調べたい場合は、下部に表示されるリストで確認することができます。

緑色で表示されているのは対応しているセレクタで、赤色がが未対応のセレクタとなっています。

便利な CSSセレクタ

nth-childのような~何番目を指定できる便利なセレクタがたくさんありますが、
それ以外にも便利なセレクタが存在します。

1. :matches()

■css
box_01 h1,
box_01 h2,
box_02 h1,
box_02 h2,

:matches(box_01, box_02) :matches(h1, h2){}
:matches()を使えば、シンプルにcssを記述することができます。

 

:matches()はSafariのみ対応していますが、
Firefox・Chromeなどでは:any()擬似クラスを使うことになっています。

動的に要素にclassを付与する

動的にclassを追加することで、見た目を切り替えたりすることが可能です。

.addClass()を使用することで、要素にclassを追加することができます。

addClass()は、指定した要素にclassを追加することができるメソッドです。

以下の例では、#mainにtestというclassが追加されます。

HTML

jQuery

画像を斜めにくり抜く

背景画像を表示させ、擬似要素を追加し
プロパティskew()で傾けます、そしてtranslateで移動させます。
そうすることで、斜めのボックスを作ることができます。

<div class="test"></div>

.test {
background-image: url(image/background.jpg);
overflow: hidden;
background-size: cover;
height: 300px;
}

.test:after {
content: “”;
display: block;
height: 100%;
background: #green;
transform: skew(0,170deg) translate(0,20%);
}

.test:before {
content: “”;
display: block;
height: 50%;
background: #green;
transform: skew(0,170deg) translate(0,-20%);
}

Dreamweaverの検索置換の小技

検索置換(command?+F)ウインドウを開きます。

次に赤枠「検索」「置換」のなかにそれぞれのコードを入力します。

「検索」・・・

商品(.*)個
「置換」・・・

商品一覧$1カテゴリ

【(.*)】は文字列のグループ化で、【$1】へ中の文字列を挿入してくれます。

チェックボックスの「正規表現を使用」にチェックを入れた後、
すべて置き換え」のボタンでで一括置換で完了となります。