みなさんこんにちは。

株式会社エイト、HTMLコーダー兼、デザイナーのMiyaです。

今回は私がレスポンシブデザインで使用する、最強のツールについて解説したいと思います。

 

 

 

◆デベロッパーツールとは?

 

皆さんは、どのブラウザでWeb制作していますか?

私は基本的にはGoogle Chrome中心で制作活動を行っているので、今回はGoogle Chromeのデベロッパーツールについて、説明させて頂きます。

◇Google Chrome デベロッパーツールの出し方

Mac・・・・・・・・・ alt + command + i

Windows・・・・ Ctrl + alt + i ※訂正 F12

 

 

 

 

・・・・・右にポンと出てきましたか?
多分デベロッパーツールという便利な機能だと知らない方は、「なんかヤバそうなのが出てきたわ」と思うでしょうが、みなさんはもう大丈夫。

 

 

 

Elements,Stylesなどの項目があるのが確認出来ますでしょうか?

・ElementsはHTMLファイルやPHPファイルに書いてあるタグが出てきます。

・StylesはHTMLファイルやPHPファイルに適用されているCSSのプロパティが出現します。

 

 

 

 

面白いのが、ElementsやStylesは、みなさんがそれぞれ編集出来るんです!

実際に右に出ているデベロッパーツールのタグやプロパティを触ってみて、HTMLやCSSを変更してみて下さい。

このページの元になっているファイルに影響は全くありませんので、自由に変更して大丈夫です。

デベロッパーツールとレスポンシブ化

前回のブログでご紹介した通り、レスポンシブの最大のデメリットは、”時間がかかりすぎる事”と、”CSSの記述が多くなりすぎる事”の二つです。

 

このデベロッパーツールでは、上の見出しの内容の通り、HTMLやCSSを編集出来ます。

 

 

ここでCSSをいじってみて、上手くいったらCSSファイルに書き換えるという方法を取れば、
いちいちCSSファイルを書き換えて、ブラウザ更新して、書き換えて、ブラウザ更新して、という手間が大幅に削減出来ます。

 

 

つまり、レスポンシブデザインをするコーダー・デザイナーに取っては、最強の味方となってくれる訳です!

 

 

今回はここで終わりますが、レスポンシブデザインに限らず、コーディングに関わる方ならば誰でも使えるツールであるはずなので、
是非Web制作に導入してみて下さいね!

 

 

 

Miya