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という記述になります。

イラレでスライスのずれをなくす

■単位
ファイルメニューから
[ドキュメント設定]で単位をピクセル設定に変更します。

■ガイド
イラストレーターの表示メニューから
1.[ピクセルプレビュー]
2.[スマートガイド]
3.[ピクセルにスナップ]
4.[ポイントにスナップ]
にチェックを入れます。

これを設定するだけでも、スライスのずれを減らし、作業がしやすくなります。

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: “”;に記入するアイコンの種類は書きサイドで調べることができます。

http://fontawesome.io/icon/chevron-right/

フォームを部分的にリセットする

フォームの入力場所を複数作るとき、部分部分でクリアしたいときがあると思います。
そういった場合には,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;
}

これだけで、
テキスト
テキストと改行されるのでスマホサイトの構築で役に立つテクニックです。

css自動計算

cssでの記述でプロパティで計算をしてくれる方法があります。
calc()を使うことで100%の値からpxを差し引いたりできるので、便利なセレクタとなっています。

例えば左に200pxのサイドバーがある場合に、右に背景を100%表示にしたいときは、

.test {
width: 100%;
background-size: calc(100% – 200px);
background-position: 200px center;
}

とすれば左から200px横に画像が100%表示になってくれます。

Fireworksの拡張

Fireworksをまだまだ現役で使用されているwebデザイナーの方も多いかと思われます。

今回は使っておくと便利なFireworksの拡張機能について紹介していきたいと思います。

オブジェクトの大きさが簡単にわかりる「SPECCTR」

スライスした画像の大きさなどコーディングをしていてすぐ知りたいなんて場面も多いと思います。
そんな時、この拡張機能を入れておけば、文字やオブジェクトの数値を自動で書き出してくれます。

クリックするだけでスライスに連番が付けられる「SequenceNumSlice」

クリックした順番に連番を振るので、gnaviなどの連番をよく使うようなスライスに便利ですね。

カンバスカラーすぐ切り替えられるコマンド機能「change_canvas_color 」

カンバスカラーをコマンドひとつで透明・白に切り替えることができます。
最近では透過pngで書き出すことも多くなってきたので、スグに切り替えられるのは便利ですね。

wpで文字数を指定

wpの記事一覧などで文字を省略して表示することが多いと思いますが、
だと表示させたい文字数が決められないと思います。

そこで今回は、ブログなどに使える記事の表示させたい文字数を決定できる、書き方を紹介します。

 

<p id=”blog_text”><?php echo mb_substr(strip_tags($post-> post_content),0,100).’…’; ?></p>

post_content),0,100)のところで文字数を決定できます。

今回は0~100までの文字数を指定しているので100文字表示となります。