LIFE is 日々一歩(46)[Web]Dreamweaver 再び(2)〜CSSデザイナーパネルを使って、flexboxレイアウト〜/森 和恵

投稿:  著者:  読了時間:3分(本文:約1,400文字)



こんにちは! 森和恵です。バレンタインも終わりましたね。

お世話になっているお仕事場に、手作りチョコクッキーを持っていったりと充実しておりました。
https://r360studio.goat.me/5OVsFLPs

さてさて。今回も引き続き、Dreamweaverネタでお届けします。

3月11日に東京、5月13日に大阪で開催されるDreamweaverの20周年イベントの詳細は、下記よりご覧いただけます。わたしは、『忘れがち、実は使えていない Dreamweaverの便利機能』というセッションでお話します。

【CSS Nite LP51「Reboot Dreamweaver」】
東京版 http://cssnite.jp/lp/lp51/ ※残席わずか
大阪版 https://www.facebook.com/events/407911899555015/ ※受付開始前

…ということで。今回もDreamweaverの操作を動画で紹介しています。15分ほどなので、お昼休みにでもぜひご覧ください。





【YouTube】Dreamweaver 再び(2)


今回の動画で作成したページはこちらです。
flexboxレイアウトを使って、3つの<div>要素を並べています。
http://r360studio.com/dreamweaver/return/day2/

flexboxレイアウトは、CSS3から登場した新しいレイアウトの手法です。ブラウザの対応状況もよくなってきて、そろそろ本格的に使える頃合いになってきています。

今回のムービーでは、CSS文法的な説明はしていませんので、下記を参考にしてください。

【CSS3 Flexboxの各プロパティの使い方をヴィジュアルで詳しく解説|コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

今回の見どころは、4つあります。

・CSSデザイナーパネルって、CSSを作るのにも便利!
・組んだCSSをすぐ見たい人の強い味方、ライブビュー。
・DOMパネルをちょっとだけ紹介。複雑な入れ子のHTMLもなんのその!
・「ソースフォーマットの適用」って、どこ行ったっけ?>ここですよ〜。

……と今回はここまで。

次回も、また別のDreamweaverのいいところをお届けします。

そろそろ、セッションの内容も決まってきたので、それに合わせた動画もアップしていこうかと思います。YouTubeチャンネルを登録すると、お知らせが届きますので、ぜひぜひ。
https://www.youtube.com/user/r360studio

ではまた、次回お目にかかりましょう!
(^^)


【 森和恵 r360studio 〜 Web系インストラクター 〜 】
site:http://r360studio.com
mail:r360studio@gmail.com
Twitter:http://twitter.com/r360studio

年度内、残る講座は3つあります。お申し込みお待ちしております!
PHPプログラム実践、WordPressのテーマ作成、Jimdo独自テーマ作成です。
http://r360studio.com/seminar/