Wめ

HTMLでよく使う角丸の枠ソースCSS3非対応（コピペ用） – jsdo.it – share JavaScript, HTML5 and CSS

HTMLでよく使うfloatソース（コピペ用） – jsdo.it – share JavaScript, HTML5 and CSS

使い方

http://www.webcreatorbox.com/tech/recommended-wordpress-plugin/

jQueryでのアコーディオンです。
色々と言ってますが、現在2種のみです・・・

思いついたら、また載せていきます。
CSSでdtとdt.selectedのbackgroundを指定するとアイコン設定も可能です。

jQueryでアコーディオン色々 – jsdo.it – share JavaScript, HTML5 and CSS

GoogleAPIを使ってQRコードを生成する方法です。
URLの最後のchl=から適当な文字列を書くとQRコードが生成されます。

携帯のWEBページを作った時にさっと確認できて便利。

http://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=

勉強がてら、タブ切り替えのよく使いそうなものが出来たのでメモ。
上下にタブボタンがあるバージョンで、いらない場合はどちらかを消すだけで1つにすることも可能です。

アニメーションは入れてません。

forked: jQueryアニメーションのお題 – jsdo.it – share JavaScript, HTML5 and CSS

下記でIE6でもmin系が効きました。
うーん知らんかった。

■min-widthの場合
.hoge{
min-width: 100px;
width: auto !important;
width: 100px;
}

■min-heightの場合
.hoge{
min-height: 100px;
height: auto !important;
height: 100px;
}

詳細は下記から
IE6のmin-width、min-heightハックに関して

min-widthは効かないかもしれないと書いてあり、検証をしてません。今回はmin-heightの方が必要だったので、
また機会があれば検証してみます。

今更ながら、Zen Codingを導入してみたメモです。
評判が良いと聞いてはいたのですが、Dreamweaver用が無いものだと勝手に思い込んでいたので、探しもしませんでしたが
なんでか別の調べ物をしてる時に見つけてしまって、導入してみました。

設定などのメモを下記に記します。

1.Zen Coding for Dreamweaverダウンロードする。

Zen Coding for Dreamweaver v.0.7.2

今のところ最新版が0.7.2（2011/04/07現在）です。
インストールは簡単で、落としたファイルから解凍し、Zen Coding v.0.7.2.mxpのファイルをクリックして指示に従えば簡単に終わります。

2.使い方

コードビューで下記コードを書いて［ctrl+,］で展開すると・・・

ul>li*10

↓

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

なものができちゃうわけです。
今回はリストを展開しただけですが、この中にaタグなども入れることもできます。
1行で多くのコードが展開できるので、コーダーにとってはとても助かりそうなものだと思います。

色々な使い方は、下記リンクを参考にしてみてください。
Zen-Codingでできるあんなことこんなこと

3.ショートカット
zen-codingにはショートカットも用意されています。英語のままですみませんが・・・

Shortcuts:
Expand Abbreviation — Ctrl+,
Wrap with Abbreviation — Ctrl+H

Balance Tag Outward — Alt+[
Balance Tag Inward — Alt+]
Next Edit Point — Ctrl+Alt+Right
Previous Edit Point — Ctrl+Alt+Left
Go to Matching Pair — Alt+/

Insert Formatted Newline — Ctrl+Return
Select Line — Ctrl+K
Merge Lines — Ctrl+
Toggle Comment — Ctrl+/
Split/Join Tag — Ctrl+Shift+
Rename Tag — Ctrl+Shift+B
Remove Tag — Alt+-
Evaluate Math Expression — Alt+=

Increment number by 1 — Ctrl+Up
Decrement number by 1 — Ctrl+Down
Increment number by 10 — Ctrl+Alt+Up
Decrement number by 10 — Ctrl+Alt+Down
Increment number by 0.1 — Alt+Up
Decrement number by 0.1 — Alt+Down

色々できるみたいですが、Dreamweaverのショートカットと被ってしまうこともあるようなので、いらないものは削除してしまったほうがよいかもしれません。

実際に僕の場合は、タブインデントをよく使うのですが、zen-codingと当たっているようで、まとめてソースをインデントしようとすると、消えてしまい使いづらい部分があったので、設定を変更しました。
（tabボタンはzen-codingで言うctrl+,と同じ機能を持っています。）

これが邪魔邪魔でしょうがなかったので、
C:Documents and Settings＜ユーザー名＞Application DataAdobeDreamweaver 9ConfigurationMenusMenus.xmlから、114行目あたりにある、

<shortcut key="Tab" command="dw.runCommand('ZenCoding.html', 'expand_abbreviation_with_tab')" name="Expand Abbreviation with Zen Coding" id="DWMenu_Shortcut_ZenCoding_expandAbbreviationWithTab" />

をコメントアウトをする事によって解決できました。
コメントアウトをしたら、Dreamweaverの再起動は忘れずに・・・

色々楽しそうなZen Codingですが、慣れが結構必要なので根気よく使って行くことが必要です。

CSS3では、影を付ける事ができます。これを使うことによって簡単に影を入れることができるので、
レイアウトの幅も広がるかもしれません。

■ボックスに影をいれる場合の基本記述
.shadow_box{
-webkit-box-shadow: 3px 3px 5px 0px #ccc; /* Safari, Chrome用 */
-moz-box-shadow: 3px 3px 5px 0px #ccc; /* Firefox用 */
box-shadow: 3px 3px 5px 0px #ccc; /* CSS3 */
}

* 1つ目の値：x軸オフセット
* 2つ目の値：y軸オフセット
* 3つ目の値：ぼかしの大きさ
* 4つ目の値：シャドウの広がり
* 5つ目の値：カラー

■ボックスの中に影をいれる場合の基本記述
.shadow_box{
-webkit-box-shadow: inset 3px 3px 5px 0px #ccc; /* Safari, Chrome用 */
-moz-box-shadow: inset 3px 3px 5px 0px #ccc; /* Firefox用 */
box-shadow: inset 3px 3px 5px 0px #ccc; /* CSS3 */
}

inset という記述を加えることによって、ボックスの中に影を入れる事ができます。

■ボックスに複数の影を指定する記述
.shadow_box{
-webkit-box-shadow: 3px 3px 5px 0px #ccc, inset 0px 0px 10px 0px #fff; /* Safari, Chrome用 */
-moz-box-shadow: 3px 3px 5px 0px #ccc, inset 0px 0px 10px 0px #fff; /* Firefox用 */
box-shadow: 3px 3px 5px 0px #ccc, inset 0px 0px 10px 0px #fff; /* CSS3 */
}

カンマで区切ることによって複数の記述を増やせます。

<MTSwitch value="[MTCategoryLabel]"><MTSwCase value="contact">%C/%b.php</MTSwCase><MTSwDefault>%-c/%-f.html</MTSwDefault></MTSwitch>

アーカイブマッピングで、カテゴリ事に拡張子をHTMLとPHPで条件分岐したい時の方法です。
方法としては、MTSwitchプラグインを使います。
上記例は、contactのカテゴリを拡張子phpにし、その他のカテゴリは拡張子htmlにする例です。

MTSwitchプラグインの入手はこちらから