「9th Knock!」 第9回Knock! Knock! 勉強会（2012年10月12日、B-nest静岡市産学交流センターにて） http://knock3.hamnaly.com/vol09/

1. HTMLコーデ ングの効率化
ィ とか最近の傾向とか
前編 : コードを書く う と、
とい こ Dreamweaver以外の選択肢
2012年10月12日
第9回 Knock! Knock!勉強会
矢部靖人

2. 本日のお題
・ コードを書く、 う と
とい こ
・ Dreamweaver以外の選択肢
・ CSSプリプロセッサー
・ 画像軽量化とデザイ ンデータからのCSS3生成

3. 自己紹介

4. 名 前：ゃべ ゃすひと
年 齢：三十路のなかば
住 所：長泉町 （静岡県の東部）
職 業：兼業主夫 → 一児の父ちゃん
個人事業主 リーランス）
（フ
Web制作全般、 制作の下請け
広告デザ ン全般
イ

5. Webデザ イナー
↓
Web/DTPデザイナー、 リーペーパーの編集
フ
↓
Webデ レク
ィ ター / プランニング / 営業
↓
フリーラン のWeb制作者
ス

6. フ レット飼 っ
ェ てます

7. よろしく 願いし
お ます

8. １）コードを書く、 う と
とい こ

13. １）コードを書く、 う と
とい こ
アプリが及ぼす市場インパクト
金額 アッパー市場
1,000,000円
主要顧客
ミドル市場
hpb 100,000円
みん ズ
ビ ローワー市場
BiND
市場

14. １）コードを書く、 う と
とい こ
コードを書かな てもWebサ トは作れる
く イ
コードを書く とで、
こ
それ以上にでき こ
る とがある

15. １）コードを書く、 う と
とい こ
ク ブラウザ対応とか
ロス
7 8 9 10

16. １）コードを書く、 う と
とい こ
アプリにのってない要望対応とか

17. １）コードを書く、 う と
とい こ
Webサ トにおいて
イ
コード
（HTML・CSS）は最終納品物

18. 2）Dreamweaver以外の選択肢

19. 2）Dreamweaver以外の選択肢
Dreamweaver って重くないですか？
Dreamweaverを高速化する方法
→ 速いマシンを買う
CSS Nite in OKAYAMA, Vol.3 にて

20. 2）Dreamweaver以外の選択肢
Dreamweaverはたしかに便利
・ サイト管理と ンクの再設定
リ
・ テンプレート / ライブラリ機能
・ デザイ ュー
ンビ （特にテーブル ！）
・ 入力補助 / ソースフォーマットの適用

21. 2）Dreamweaver以外の選択肢
しかし普段使いには如何せん重い
それなら…
「エデ タ
ィ を使い分ける」 う方法論
とい

22. 2）Dreamweaver以外の選択肢
普段のコーデ ング → 別の ィ
ィ エデ タ
DWでしかできないこ → DWで
と

24. 2）Dreamweaver以外の選択肢
Coda 2という選択肢
・ DWは専らコードビ ューとい 人にオススメ
う
・ 何よ り軽快
・ FTPも使え （サイ
ます ト機能）
・ データベース （MySQL） アにも クセス可能
・ コードシンタ ス / 入力補助
ック （サジェスト）
・ Git / Subversionのクライ ト機能
アン

25. サイ ごとに管理でき
ト ます

26. Coda内でFTPが使え ます
（Transmitなみの高機能）

27. コード入力時には
入力補助機能が便利

28. 画面分割もできます

29. プレビューでは
Safariが動いてます

30. 2）Dreamweaver以外の選択肢
詳しくはCSS Nite in Ginza, Vol.65を
（ http://cssnite.jp/ginza/vol65/ ）

31. 2）Dreamweaver以外の選択肢
Coda 2は、Mac専用です、 残念ながら。
WinならSublime Textがいいらしいです

32. 後編に続く

33. 本日はあ がと ございま
り う した
ご連絡 ご質問など下記までお願いし
・ ます
E-mail : info@hamnaly.com
Facebook / Twitter : yabecchy