Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
Web Design and Web Development : Dreamweaverで高速かつ快適な作業のために、やっておきたい5つのこと | mnemoniqs’log.
仕事で使ってるDreamweaver環境設定や、効率を上げる方法を下記にまとめておきます。 目次 サイトの定義と管理を必ずやる ソースコードを見やすくカスタマイズ 便利なショートカットキーをつかう CSSコードヒントのカスタマイズ スニペットを追加してみる サイトの定義と管理を必ずやる 作業用のフォルダを決めて、まずサイトの定義をすることからDreamweaverのコーディングは始まります。 コレをしないで進めると、階層の全体像や相対パスがぼんやりしたままになり、とても危険。 超簡単な作業なので、やらない手はありません。 ローカルにあるフォルダを定義 [サイト] → [新規サイト] → [ローカル情報] 「サイト名」にプロジェクト名、「ローカルルートフォルダ」に作業用フォルダのパスを指定するだけでサイト定義は完了です。 設定したサイトは、[サイト] → [サイトの管理]の一覧から選択
Dreamweaverで始めるWordPressサイト構築の基礎知識
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。 そもそもDreamweaverとは、なぜDreamweaverを使うのか DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエデ
最近のDreamweaver イケてるところ・イケてないところ 〜だけど貴方は生き抜いて〜 - MGAスタッフブログ
インフォメーションアーキテクトという肩書きですが、結構地味目のコーディング作業も淡々とこなしている時期もある宮内です。手応えがゼロ・グラビティって感じの毎日ですがいかがお過ごしでしょうか。（アレ、凄かったですね……！） さて、最近コーダー界隈というか実装に携わっている方が使っているエディタといえば、Dreamweaver……………ではなくてSublime TextとかCoda 2とかになりつつあるんでしょうか。少なくとも自分の観測範囲ではDreamweaverの話題はめっきり出なくなってきて、むしろ前述の様なエディタへ移行している瞬間を何度か目撃しています。 そういえば、弊社の実装を担当している人間も、自分以外はCoda 2・Vim、と脱Dreamweaverを果たしており、使い続けているのは自分ただ1人（※デザイナーはDreamweaverがメインのようです）。 そんな、逆風吹き荒れる中
DWとWPを連携させて効率よくテーマデザインを作ろう
Web制作者なら誰もが思うこと それは、ファイルを保存していちいちページ更新して確認するのは意外とめんどくさい。 微妙に時間がかかる・・・ ではないでしょうか？ Dreamweaverとwordpressを連携させるとワンクリックで表示を確認することが出来ます。 ７ヶ月前、設定方法をライトニングトークでお話しさせて頂きました。 ただ、当時はWordpressのこともphpが環境構築しないとローカルで動かないこともDreamweaverのこともろくに知らない状態で、知らないづくしで発表したので作成したスライドは何が言いたいのか分からないものになってしまっています。 今回、設定部分に焦点を当てて簡単にまとめてみます。 ★使用環境：Windows・Dreamweaver5.5 ＜目次＞ 1.XAMPPインストール 2.WordPressインストール 3.Dreamweaverの設定 4.Drea
WordPressとDreamWeaverを連携させる
DreamWeaverは、HP作成ツールでプロも仕事で使っている方の多い定番製品です。 DreamWeaverCS５以上のバージョンからは、WordPressなどのCMSツールとの連携をサポートするようになりました。 しかし連携をサポートしたといっても、ややこしい設定を行なわなければならず、少しめんどくさかったりします。 ココでは、WordPressとDreamweaverの連携の仕方や実際にどのように運用していくことになるのか簡単に説明していこうと思います。 はじめに WordPressとDreamweaverの連携のといっても、実際に出来ることは限られていますので あまり期待しないようにしましょう。基本的には、ローカルにテストサーバーを構築して、テーマやCSSを作成、編集して保存。そしてそれをFTPソフトなどでネットにあげて更新するという作業で運営していくことになります。 Dreamw
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインビューと上手にお付き合いする方法（Dreamweaver Town Meeting in Tokyo）
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog