CSSで画像を切り抜きサムネイル

a.tumb {
width: 150px;
height: 150px;
overflow: hidden;
display: block;
padding: 7px ;
background: url(img/example.jpg) center center;
background-size: cover;
background-repeat: no-repeat;
}

_notesフォルダの全削除

サイトの管理から
[デザインノート]→[デザインノートのクリーンアップ]

これで関連付けのされてないデザインノートデータは一括で削除できます。

Dreamweaverでの正規表現

Dreamweaverでの正規表現一覧です。
転載元：http://www.adobe.com/jp/newsletters/edge/january2010/articles/article4/

文字	意味
+	直前の文字の1回以上の繰り返し
.	改行以外のすべての単一文字
()	グループ化し保存
$n	()で保存したパターンを参照 ※nは任意の数字
\n	改行(改行コード：LF)
\r	キャリッジリターン(改行コード：CR)
\r\n	キャリッジリターン＋改行(改行コード：CR LF)
\t	タブ1つ
\d [0-9]	数字1文字
\D [^0-9]	数字以外(スペースや改行含む)1文字
\w [A-Za-z0-9_]	アンダースコアを含む英数字1文字
\W [^A-Za-z0-9_]	アンダースコアを含む英数字以外(スペースや改行含む)1文字

ついでに下記も転載です。

【Dreamweaver の正式な読みは何ですか？】

「Dreamweaver」は、夢の「Dream」と、糸を紡ぐ人や織工という言葉の「Weaver」を合わせたものです。

Webサイトという夢を編み出すという意味や、クモの糸と表現される Web サイトを紡ぐという意味、海外のフォークソングをヒントにした･･･など、社内でもいくつかの説があるようですが、この件につきましては現在確認中です。

よく呼ばれる「どりーむうぇーばー」は、残念ながら正式な呼び方ではありません。店頭でお買い求め頂く際やお仲間内でお話される場合は、声高に「ドリームウィーバー」と呼んで頂ければ幸いです。

色んな機能をまとめて実装できるプラグイン

色んなjqueryのプラグインをいっぺんに実装できる、便利なやつらです。
詳細はリンク先にて。

① simplelib
② jKit
③ yuga.js
④ meca.js
⑤ Laquu.js

自分はまだ試行錯誤してる所ですが、simplelibがいい感じです。

accordion	シンプルなアコーディオンナビゲーション
button	マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える
checkAll	チェックボックスの一括選択
fixHeight	要素の高さを揃える
gaEventTracker	Google Analyticsでローディング時間、スクロール量、バナーに対するアクションを取得
ie6Png2Gif	Internet Explorer 6で、PNGをGIFに置換する
ie6PngFix	Internet Explorer 6でも透過PNGを使えるようにする
ie6PositionFixed	Internet Explorer 6でもCSSの position:fixed を使えるようにする
imgSwap	a要素をクリックして、既存のimg要素の画像を切り替える
lightBox	jQuery lightBoxプラグインを読み込む
overlayOthers	指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指定できる半透明の要素をかぶせる
scroll	スムーススクロール
tab	シンプルなタブナビゲーション
textHint	未入力で非選択時のテキストボックスにヒントを表示する
trimmedScroll	img要素を含むa要素にマウスオーバーすると別の画像をそのimg要素のサイズにトリミングしてスクロールしながら表示する
zoomView	img要素にマウスオーバーすると拡大画像を表示する

メジャーなのはyuga.jsな気がするんですが、昔コーディングの案件でとっても痛い目を見たので、敬遠してます（まぁ私の知識不足が原因なんですが…）。

jQuery カレンダープラグイン FullCalendar を使用してかっこいいカレンダーを作る方法

高機能なのでgoogleカレンダーに便りがちですが、見た目がgoogleでどうにも微妙です。
でもデザインのカスタムは非常に難しいし。。。

ということでカレンダーの中身だけを取得して、あとはjQueryでやっちゃう方法があったんで備忘のために記載。

【FullCalendar】

※自社ブログに転載しました。

http://www.hanano-ya.jp/web/881

Dreamweaverのプレビューが重い

コーディングをDreamweaverで作業する人は経験あると思うんですが、たまに以上にDreamweaverがおもくなる時があります。

これの主な原因は大体この３点かと思います。


１、cssのid,class名が-(ハイフン)を使ったチェインケースでの命名方式。

最初調べた時にこれが出てきた時は驚いたんですが、どうやらハイフンをマイナス要素とチェックするからだとか。。。

まじか。。。

そもそも自分はハイフンをあんまり好きでないので関係ないですが。
一応参考までに世界三大命名方式は下記。

【スネークケース】 company_info
【チェインケース】 company-info
【キャメルケース】 conpanyInfo


２、背景にPNG画像を繰り返している。

これが一番ヤバいくらい重いです。
ちょっとのプレビューで1秒〜３秒（体感）固まります。

対象法としては一度要素をオフしておくか、Dreamweaverのデザインタイムスタイルシート機能を使うかです。。

デザインタイムスタイルシート機能：
http://help.adobe.com/ja_JP/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html


３、facebookやtwitterをiframeで表示している。

体感としてはそこまでなんだけど、ちょっと重くなる感じです。
代替の埋め込み方法があるし、iframeよりもxfbmlの方がいろいろと都合が良いです。


そもそもDreamweaver自体が重くて嫌だと言う人もいますが、Dreamweaverの機能に比べたら、自分はまったく気にならないです。
テンプレートとライブラリ機能がなければ生きていけない。

スムーズスクロール

HTML

Source Code:

1	<a href="#bottom">下へスムース！</a>

なにも工夫しなくて良いです。
ただ＃をつけてアンカーポイントへリンクを貼るだけです。

Javascript

jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。

Source Code:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

その後に以下のスクリプトを書きます。

Source Code:

01 02 03 04 05 06 07 08 09 10 11 12

<script type="text/javascript"> $(function(){     $('a[href^=#]').click(function() {         var speed = 500;         var href= $(this).attr("href");         var target = $(href == "#" || href == "" ? 'html' : href);         var position = target.offset().top;         $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');         return false;     }); }); </script>

これで、ページ内リンクであれば勝手にスムーススクロール処理をしてくれます。