htmlライブコーディングイベントでしゃべったことまとめ。
Top > スクールコラム > htmlライブコーディングイベントでしゃべったことまとめ。
2012年12月11日
htmlライブコーディングイベントでしゃべったことまとめ。
12/8に開催した、講師久保がガチでコーディングをするイベント「htmlライブコーディング」。生徒さん、卒業生のみならず、同業のプロからも「勉強になったよ！」とちらほらお喜びの声をいただいており、感謝感激です。
教室での実演とUstreamによるライブ中継だけだったので、都合悪く見られなかった人の為に、しおり先生がまとめてくれました！
—
Photoshopでのトリミング - ショートカット登録しておくと楽！
「イメージ」メニューのトリミング機能の事ですね。画像を無駄無く切り取ってくれるwebクリエイター必須の機能です。初期状態ではショートカットが無いので、僕はショートカットをカスタマイズして使っています。
HTML5+CSS3でのPNG画像 - 透過PNG使えて便利〜
特に背景色が一色じゃない場合などに役立ちます。
複数の背景画像の設定（CSS3）- 先に記述してある物が上に表示される、さらにrepeatなどの設定もそれぞれ設定できる
こんな感じです↓
background-image:
url(../img/index/back-water.png),
url(../img/index/back.png);
この場合、先に書いた”back-water.png”が上のレイヤーとして表示されます。CSS3新機能です。
Dreamweaverでのソースコード表示の文字サイズ - 設定で変えられる（大きくできる）
「環境設定」「フォント」から変更可能です。
ZEN cordingを使うと、DIVのレイアウト構造作る時すごく速い
Zen Cordingはコードに慣れて来たら必須ですね。
グロバールナビゲーションは箇条書き（ul/li）を使用 - 文書の構造が最優先
授業では口酸っぱく言っている事ですね。デザイン（見た目）よりも構造を優先させて、後で飾り付けします。
ドリで「px」と入力する時 - スニペットで登録しとくと激速い！
よく入力する”px;”や”#fff”なんかはスニペットに登録すると早い上に入力ミスも減ってお得です。ショートカットも適用できます。
本文部分のHTML構造分け（HTML5） - 記事全体がarticle、その中にsectionを複数作る
html5ではdivの代わりにheader/article/section/aside/nav/footerなども利用出来る様になりました。
「箱」にも意味が出来た。と言うことですね。
ドリのショートカット - command+1でh1、command+2でh2！
よく使いますし、覚えやすいですね！ちなみにpはctrl(cmd)+shift+P！
1pxの線を薄めに表示したい - 背景色と線の色の中間色にしてあげると◎
テクニックと言うよりhtmlコーディングするときの心構えですね。
デザインの意図をくむ事と、ユーザーの使い勝手を考える「攻め」のコーディングを心がけましょう！
DIVの最小限の高さを指定しておきたい場合 - min-heightを指定
webでは高さが変わる可能性の方が多いので、heightよりもmin-heightの方が多用されるかもしれません。
min-widthなんてのもありますが、こちらはほぼ使用しません。
幅小さめのボックスがfloatで並ぶ時 - 2つずつクラス分けると、後の管理が面倒になる場合あり 共通にするのが◎
できるだけclassは作らずに、まとめられる物はまとめる！整理するのがあらゆる面で吉！
生徒さんにはおなじみの、いつも授業で言っている事ですね！
—
とまあ、よーしゃべったなと言う感じですね。こうして改めて見てみると…。
未経験の方からすると、難しく、敷居が高く聞こえるかもしれませんが、一段一段階段を上って行くと、ちゃーんと分かってきますので、ご安心を。
それではまた！
（久保）
