東京のWeb制作会社LIGLIGならできるおもしろいこと。楽してコーディング!Dreamweaverのテクニックいろいろ2013.02.18楽してコーディング!Dreamweaverのテクニックいろいろハルエ2013.02.18Web制作シェアこんにちは、デザイナーのハルエです。以前のブログで、Dreamweaverのオススメ拡張機能についていくつか紹介させていただいたのですが、今回はDreamweaverに標準搭載されている隠れた便利機能に付いてご紹介させていただきます。CS6から導入されてまだまだ浸透されていない機能や、搭載歴は長いのにあまり知られないまま謙虚に過ごしている機能がたくさんあると思うんです。CS6のCSSトランジションを使用すると、CSS3によるtransition効果がコードを記述することなく簡単に設定できます。ベンダープレフィックス(-webkit-など)も自動で生成してくれます。使用手順1.[ウィンドウ]→[CSSトランジション]パネルを開き、追加ボタン[+]をクリックします。(htmlファイルを選択した状態にしておかないと、選択できません。)2.[新規トランジション]ダイアログボックスが開くので、[ターゲットルール]のプルダウンメニューから対象となる要素を選択し、「トランジションを有効にする」でhoverやactiveなどを選択。3.[デュレーション](変化にかかる時間)を「入力」。4.[プロパティ]に変化させるプロパティを[+]から選択し、[終了値]を入力。5.「トランジションを作成」をクリックして完了。するとこんな感じでCSS内に書き出されます。簡単ですね!作成後もCSSトランジションパネルからの修正が可能です。更新日の自動更新Dreamweaverには「日付」オブジェクトがあり、フォーマット(時刻付きまたは時刻なし)を指定して現在の日付を挿入できるだけでなく、ファイルが保存されるたびに日時を自動的に更新する機能があります。使用手順1.[挿入]→[日付]を選択。2.[日付の挿入]ダイアログボックスで、曜日のフォーマット、日付のフォーマット、および時刻のフォーマットを選択。3.ドキュメントを保存するたびに日時を更新する場合は、「保存時に自動的に更新」をオンにする。4.「OK」をクリックして日時を挿入。選択したフォーマットがソースコードに反映されます。CS6ではコードを書かなくてもWebフォントが利用できるようになりました。使用手順1.[修正]→[Webフォント]を選択。2.[Webフォントの追加]ダイアログボックスが開くので、入手したWebフォントの種類に応じて指定。(事前に、入手したWebフォントの使用ライセンスは必ず確認してください。)Webフォントを指定すると、サイト定義内に専用のフォルダを作成して選択したフォントを読み込み、同時にWebフォント用のスタイルシートが生成されます。これによって通常のフォントと同様にWebフォントを適用することができます。私これ・・知らずにずっとCSSに書いてたー・・。ダミー画像の挿入Webサイトを制作している時、なかなかお客さんから画像がもらえない時ってありますよね?Dreamweaverにはそんな時に使えるとても便利な機能があります。使用手順1.画像を挿入したい場所で、[イメージ]→[イメージオブジェクト]→[イメージのプレースホルダー]をクリック。2.[イメージプレースホルダー]ダイアログボックスが開くので、[幅]、[高さ]の値を入れて、[OK]ボタンをクリック。すると、、よ!いかにも!そこで作成した画像を選択した状態で[プロパティ]パネルの[ソース]に「http://placekitten.com/300/250」と入力します。猫ちゃん登場!!ちなみにモノクロにしたい場合は「http://placekitten.com/g/300/250」みたいに「/g/」を挟んで記述します。可愛いんや!!そして犬好きの方はこちらを記述!「http://placedog.com/300/250」!!きゃ〜!!これはあかん!!にやけた!!!!そんな感じで、味気ないダミー画像もとっても可愛い画像に変えてくれる「placekitten」と「PlaceDog」っていうサービスがあったんです。猫・犬好きにはたまりませんね。まとめDreamweaverって本当に機能が多すぎて複雑なんですよね。