Dreamweaver スマフォサイト

Dreamweaverでスマートフォンサイト作成7

投稿日:

Dreamweaverの超便利機能『コードナビゲータ』

それでは、今日はDreamweaverの『コードナビゲータ』を使用して、実際に『jQuery Mobile』のCSSを変更してみることにしましょう。

コードナビゲータとは、DreamweaverのCS4から導入されたとても便利な機能です。コードナビゲータには、ページ上で選択した特定範囲に関連するコードソースのリストが表示されます。ここから、 CSS ルール、サーバーサイドインクルード、外部 JavaScript ファイル、他関連ファイルへ一発で移動できます。

今回は、フッターを変更したいと思います。ライブビューモードにして、フッター部分をクリックします。しばらくすると表示されるコードインジケーターをクリックします。

コードインジケーターが表示されない場合は、コードインジケーターを無効にしてある可能性があります。そのときは、『Alt』キーを押しながら、フッターをクリックしてください。

コードナビゲータのダイアログボックスが表示されます。このままでは関連ファイルが多すぎてどれをいじればいいのかわかりません。

セレクタをマウスオーバーすると実際のプロパティと値が表示されるので、ある程度見当がつくと思います。フッターのデザインは『ui-bar-a』が関係していそうです。それでは、『ui-bar-a』のセレクタをクリックしてみます。

編集方法は実際のソースコードを書き換える方法、プロパティをクリックして編集する方法、鉛筆アイコンをクリックして、CSS定義ルールのダイアログボックス内で編集する方法があります。

実際にCSSを書き換えて後で元に戻すのは大変です。そこで『DreamweaverCS5』からの新機能『CSSプロパティの無効化』ボタンを利用してみることにします。これは、CSSプロパティの有効無効をワンクリックで変更できる機能です。ライブビューの表示が変わりますので、実際にどのように変化するのか簡単に調べることが出来ます。

『background-image』を無効化して、『background-color』を『#00F』に変更してみます。するとすべてのheaderとfooterの背景色が変更されました。

Webkit先行実装プロパティ

ただこのままでは、背景を単色にしただけで、面白みがありません。そこで、『background-image』の『Webkit』の『先行実装プロパティ』もいじってみましょう。

CSS3は現在策定中の企画であり、正式な勧告までまだ時間がかかります。そこで、Webブラウザの開発ベンダーは、CSS3のプロパティ名に特定のプレフィックス(先頭文字列)を付加することで、独自のプロパティとし、CSS3の機能を一部先行実装しています。こうしたプロパティは『先行実装プロパティ』と呼ばれ、iphoneやAndroidで採用されているレンダリングエンジンの『Webkit』では、『-webkit』というプレフィックスでCSS3の機能を利用できるようにしています。

それでは、『-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111))』を解読してみましょう。『-webkit-gradient』とは、背景色を画像を使わずにグラデーション化するWebkit先行実装プロパティです。

構文は『-webkit-gradient(グラデーションの方向、開始位置、終了位置、開始色、終了色)』です。私が調べた書籍によると開始色はfrom(色コード)、終了色はto(色コード)となっていましたので、『color-stop(0,#3c3c3c),color-stop(1,#111)』は解読不能です。

よって以下のように変更します。『-webkit-gradient(linear,left top,left bottom,from(#66ccff),to(#000099))』。これでWinRoad徒然草のロゴカラーに近いグレデーションカラーになりました。

それでは、いつものようにDevice Centralで表示してみます。

尚、『background-image』の変更は、コードを直接変更してください。プロパティ画面から変更すると、Webkitコードがurl(......)で挟まれ、実際にレイアウトを変更することが出来ません。これもバグでしょうか。そのような仕様なのでしょうか。不明です。

今回『Webkit先行実装プロパティ』の内容でお世話になった書籍が下の書籍です。スマートフォンサイトの制作を分かりやすく解説しています。この本を熟読すれば、『Dreamweaver CS5.5』がなくても、きれいなスマートフォンサイトが作成できそうです。興味のある方はどうぞ。

iPhone Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

新品価格
¥2,499から
(2011/6/11 15:36時点)

-Dreamweaver, スマフォサイト
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.