はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

Firefoxの便利な機能拡張:Web Developer

トモ・リーン
ふー!
みんなー、Firefoxは使ってる?
今の最新版はバージョン3よ!!
まだの人は一刻も早く、インストールしましょう。
ケンジ
入れてるぜ!
早速オススメ機能拡張教えてくれよ!
トモ・リーン
まずは黙って、これを入れておけ!!
トモ・リーン
インストールするとこんなツールバーが付くのよ。
キャプチャ:Web Developerツールバー
機能は盛りだくさんだけど、私がよく使ってるオススメ機能を紹介するわ。
個人的に面白いと思っているところは画像に赤色でマークを入れているので、機能を試すときに参考にしてみてね!
ケンジ
ふむ、ふむ!
トモ・リーン
まずは「無効化」ね。
無効化のオススメ:キャッシュを無効にする/JavaScriptを無効にする
キャッシュとJavaScriptを無効に出来るから実際にサーバに上がったときの確認に便利よ。
キャッシュとは、ブラウザが快適にwebページを表示できるようにある程度データをためておくことです。
そうすることで、何度も見るページをデータの再読込無しに表示するので非常に早く表示することが出来ますが、ページ制作時のチェックの場合など頻繁にデータの更新が有る場合、修正後のデータを読まずにキャッシュされたデータを表示するので、チェックに困ります。このような場合、通常はブラウザメニューの奥の方にある「キャッシュの消去」をします。
※Firefoxの場合は「ツール>プライバシー情報の消去>キャッシュにチェックをいれて」今すぐ消去ボタンを押します。
トモ・リーン
つぎは「CSS」ね。
CSSのオススメ:CSSを無効にする/メディアタイプ指定のCSSを表示する
トモ・リーン
CSSの表示を切り替えるのだけど、色々出来ていいわよ。
CSSのオススメ:CSSを無効にするメニューのさらに下層メニューの紹介
ケンジ
file8. 情報の意味を考えながらHTMLコーディングでもこの機能の話しをしていたよね!
気になるサイトがあったらこの機能でお手軽にCSSをオフにしてどんな感じで組んでいるのか見てみるのもいいんだよね。
トモ・リーン
そうね。こんな感じにみえるのよ。
通常の場合
キャプチャ:通常の螺旋デザインのページ
「CSSを無効にする>すべてのCSS」でCSSを切った場合
キャプチャ:CSSを切った螺旋デザインのページ
ケンジ
おもしろいね〜!!
トモ・リーン
画像の方を色々見れらて楽しいのはコレ!
画像のオススメ:画像を無効化する/alt属性値を表示する/画像の幅と高さを表示する/画像を枠で囲う/画像をalt属性値で置き換える
altを表示したりして、サイトを作った人が何を読み取って欲しいのかが分かって楽しいわよ。
アクセシビリティなどの勉強をしている人もいいかもね!
トモ・リーン
その他・情報の解説は飛ばすけど、なかなか面白いので試してみてね!
次は枠表示ね。
枠表示のオススメ:h要素を枠で囲う/ブロックレベル要素を枠で囲う
h要素の使い方はCSSでも大事なのよね。
あと、CSSの調整に一番使うのが「ブロック要素を枠で囲う」ね。
DWでも同じような機能があるけどDWのデザインビューの再現性がイマイチなので今のところ余り使えないのよね〜。
DW CS4バージョンではデザインビューのレンダリングにSafariやGoogle Chromeに採用されている「WebKit」を使うらしいからいいかもね!
ブロック要素を枠で囲うを使ってみた状態
キャプチャ:「ブロック要素を枠で囲う」を適応した螺旋デザインのページ
ケンジ
これはCSSの組み方がおかしなところが発見しやすくなりそうだね!!
トモ・リーン
他にも面白機能が盛りだくさんよ!
超おすすめなので、ぜひFirefoxにいれてね。
今回のポイント!
Web Developerは機能が満載過ぎて、すべての機能を紹介しきれていません!
そこのモニターの前のあなたも、自分で色々いじって楽しんでみましょう!!