動的に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%);
}
Dreamweaverの検索置換の小技
検索置換(command?＋F)ウインドウを開きます。
次に赤枠｢検索｣｢置換｣のなかにそれぞれのコードを入力します。
｢検索｣・・・
｢置換｣・・・
【(.*)】は文字列のグループ化で、【$1】へ中の文字列を挿入してくれます。
チェックボックスの｢正規表現を使用｣にチェックを入れた後、
すべて置き換え｣のボタンでで一括置換で完了となります。
dreamweaberのタグ系ショートカット
dreamweaberを使用してコーディングするときに便利なタグ系のショートカットを紹介します。
改行タグや見出しなど、よく使うものまで知っておくと時間短縮にもなるので知っておくと便利だと思います。
タグ系ショートカット
改行
Shift ＋ Enter
強調 Ctrl + N
斜体 Ctrl + I
段落
Ctrl + Shift + P
表の挿入 Ctrl + Alt + T
行の挿入 Ctrl + M
行の削除 Ctrl + Shift + M
列の挿入 Ctrl + Shift + A
列の削除 Ctrl + Shift + –
検索/置換 Ctrl + F
クイックタグ編集 Ctrl + T
見出し h1～6 Ctrl + 1～6
段落・見出し解除 Ctrl + 0
画像の挿入 Ctrl + Alt + I
アンカーポイントの挿入 Ctrl + Alt + A
リンクの作成 Ctrl + L
リンクの削除 Ctrl + Shift + L
半角スペースを挿入 Shift + Space
区切りなしスペースを挿入 Ctrl + Shift + Space C
BEM
BEMとは、Block、Element、Modifierの略です。
HTMLを明確にすることを念頭ににおり、要素をBlock、Element、Modifierの3つに分けた命名規則でクラス名を決めていきます。
単語の繋ぎを「__」「_」「-」を用い、使い分けることでBlock、Element、Modifierそれぞれを定義します。
■Block=かたまり
ヘッダー、フッター、などをひとつのまとまりとします。
Blockはどこでも配置すること可能ですが、CSSではBlockの中でBlockと定義することができず、Blockは単体で存在し機能することが条件となります。
■Element=要素
Block中の一つ一つの要素となります。
ナビゲーションをBlockにするなら、その中のリストなどはElementとなります。
■Modifier=修飾子
BlockやElementの見た目を決定する場合に利用します。.redなどです。「__」で接続し、.btn__redという記述になります。
イラレでスライスのずれをなくす
■単位
ファイルメニューから
[ドキュメント設定]で単位をピクセル設定に変更します。
■ガイド
イラストレーターの表示メニューから
１．[ピクセルプレビュー]
２．[スマートガイド]
３．[ピクセルにスナップ]
４．[ポイントにスナップ]
にチェックを入れます。
これを設定するだけでも、スライスのずれを減らし、作業がしやすくなります。
cssで円形マスク
最近css3を使用して画像を切り取らなくても、マスクで画像を切り抜いたりなど、できるようになって来ました。
スマホサイトなどcss3に対応したブラウザなら切り抜くことが可能なので、横並びのレイアウトにアクセントをつけたいとき便利です。
<div class=”en”><img src=”test.jpg” /></div>
.en {
width:256px;
height:256px;
}
.en img {
width:256px;
height:256px;
border-radius: 256px;
-webkit-border-radius: 256px;
-moz-border-radius: 256px;
}
画像を使わずにアイコンを表示
WEBアイコンフォントが使えるFontAwesomeというものがあります。
種類が豊富なので、色々なサイトの用途に使用できます。
■FontAwesomeの使い方
HTMLソース中にア表示用のcssを追加する必要があります、
疑似要素:beforeを利用して特定のタグやクラスに対してアイコンを表示することが可能です。
.fa-home:before {
content: “\f015”;
}
例えばホームアイコンを表示させたい場合は上記を記入します。
content: “”;に記入するアイコンの種類は書きサイドで調べることができます。
フォームを部分的にリセットする
フォームの入力場所を複数作るとき、部分部分でクリアしたいときがあると思います。
そういった場合には,jqueryを利用してフォームを部分的にクリアすることができます。
今回はその方法を紹介します。
■html
<tr id=”form_area”>
<th class=”form_01″>1</th>
<td class=”form_02″>[input type=”text” name=”お名前” size=”60″]</td>
<td class=”form_03″><input type=”radio” name=”example” value=”選択肢1″></td>
<td class=”form_04″><input type=”radio” name=”example” value=”選択肢1″></td>
<td class=”form_05″ ><button type=”button” id=”clear”>クリア</button></td>
</tr>
■JS
$(function () {
$(“#clear”).click( function() {
$(‘#form_area’)
.find(“textarea, :text, select, radio, checkbox”).val(“”).end().find(“:checked”).prop(“checked”, false);
});
});
brを使わずに改行
<br>は改行するのに便利ですが、レスポンシブサイトを構築するのには不向きかもしれません
今回はを使用して改行するテクニックを紹介したいと思います。
■html
<p><span>テキスト<span>テキスト</p>
■css
span{
display:block;
}
これだけで、
テキスト
テキストと改行されるのでスマホサイトの構築で役に立つテクニックです。