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

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

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

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

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

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

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を記述することができます。

:-webkit-any() {
　　color: #0060e6;
}
:-moz-any() {
　　color: #0060e6;
}

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

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

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

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

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

HTML

<div id="box"></div>

jQuery

$("#box").addClass("test");

背景画像を表示させ、擬似要素を追加し
プロパティ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%);
}

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

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

｢検索｣・・・

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

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

dreamweaberを使用してコーディングするときに便利なタグ系のショートカットを紹介します。
改行タグや見出しなど、よく使うものまで知っておくと時間短縮にもなるので知っておくと便利だと思います。

タグ系ショートカット

改行
Shift ＋ Enter
強調 Ctrl + N
斜体 Ctrl + I
段落