本日、新しいMuseがリリースされました。

マウスドラッグだけでレスポンシブWebデザインのページを作成するツールなど、今までなかったのですから、Museも完璧ではありません。

開発チームは、今回のバージョンでユーザーの反応を見ながら、要望を聞きながら、ブラッシュアップしていきます。
「ここが使えない!」「機能が足りない!」など、感じたことをAdobe公式のフォーラムに書き込んでください。



こちらが、Museの画面です。
ウィンドウの上部には、Dreamweaverと同じ「ビジュアルメディアクエリバー」、右上には「スクラバー」が搭載されています。



HTMLやCSSのコードは、一切「見ることができない」「触ることができない」仕様になっていますので、マウスドラッグで組み上げていく作業になります。

直感的に進められるのがMuseの最大の利点ですが、同時に「自由度の高さ」が混乱を招きます。


先週のカンファレンスでは、新しいMuseを完全習得するための「8メソッド」について解説しましたが、1例を紹介したいと思います。



正方形を描き、垂直方向に並べて、ページの中央に配置します。
すでに、3つのブレークポイントが設定されています。




スクラバーをドラッグして、ウィンドウを狭めていくと、図形が伸縮したり、ブレークポイントが切り替わると、位置がずれてしまいますが、これは仕様です。




伸縮させないためには、要素を選択して、右クリックし、メニューから[サイズ変更]→[なし]を選びます。デフォルトでは[レスポンシブな幅]になっています。




要素のサイズや位置については、メニューの[サイズと位置のコピー先]→[すべてのブレークポイント]を必要に応じて設定します。
※要素を動かすと(要素の位置が変わると)、この設定はリセットされます。




例えば、下図のようにウィンドウの両端に要素を固定したい場合はどうすればよいのか。




要素を固定したいときは、アプリケーションバーの[固定]でウィンドウ内の位置を選択します(クリックするだけです)。下図のように設定すると、ウィンドウの右上に固定されます。




固定した後は、右クリックして、メニューの[サイズと位置のコピー先]→[すべてのブレークポイント]を選択しておきます。




要素をページの中央に固定する手順を見ていきましょう。
まず、要素を選択します。




アプリケーションバーの[固定]でページ内の位置を選択します(クリックします)。




固定した要素を右クリックして、メニューの[サイズと位置のコピー先]→[すべてのブレークポイント]を選択します。




スクラバーをドラッグして確認します。
設定されている全てのブレークポイントに、要素のサイズと位置がコピーされましたので、伸縮せず、位置も固定されています。




新しいMuseでは、何も設定しないと「可変幅」になり、配置されている要素はすべて「伸縮」します。

デフォルトでは、全ての要素がレスポンシブになっていることを理解してください。

伸縮させたくない、固定したい、という場合は、個別の設定が必要です。



新しいMuseを完全習得するための8メソッドは、必須の基礎知識です。

可変幅で、複数のレイアウトを共存させる複雑かつ高度なWebページを「マウスドラッグだけ」でつくるには、どうしてもルールが必要です。

「自由度が高すぎて混乱を招いてしまうデメリット」を「レイアウト作業に没頭できるメリット」に変えるための重要な知識になります。




8メソッドについては、テキストキャスティングで解説していきますので、完全習得して仕事や趣味に役立ててください。


第1回「 新しいMuseって、ウェブページのカンプ作成で使う「Photoshop」と「Dreamweaverのライブビュー」が合体したイメージなんだ!」/中学生のためのレスポンシブWebデザイン[Muse編]




Dreamweaver のテキストキャスティングは次が、第23回目になります。

第22回「マルチカラムレイアウトの指定を続けるよ! 今回はカラムの間隔と区切り線を指定して読みやすい段組みにしましょう! 」/中学生のためのレスポンシブWebデザイン



シンクゼロマガジンとは?

筆者:
Creative Edge School Books