はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
Firefoxの便利な機能拡張：Web Developer
2008/11/17
トモ・リーン
ふー！
みんなー、Firefoxは使ってる？
今の最新版はバージョン3よ！！
まだの人は一刻も早く、インストールしましょう。
ケンジ
入れてるぜ！
早速オススメ機能拡張教えてくれよ！
トモ・リーン
まずは黙って、これを入れておけ！！
Web Developer 日本語版

「ミナトラボ」さんのWeb Developerページでダウンロード！
詳しい機能はこちら（ミナトラボさんのWeb Developerの機能一覧ページ）

トモ・リーン
インストールするとこんなツールバーが付くのよ。
キャプチャ：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は機能が満載過ぎて、すべての機能を紹介しきれていません！
そこのモニターの前のあなたも、自分で色々いじって楽しんでみましょう！！
トラックバック(0)
このブログ記事を参照しているブログ一覧：Firefoxの便利な機能拡張：Web Developer
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/108
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4