chromeの「要素の検証」でカスタムがスムーズに

      2014/08/21

                  

                              

 

 

ウェブ担当とは名ばかりから少し脱却しそうなミツロックです。こんにちは。

僕は、chromeを使っているんですが、モバイル版をカスタムしていて「要素の検証」の素晴らしさにうっとりしています。こんな便利なモノがあったなんて!

もしカスタマイズを楽しんでいる人で、僕みたいに何も分からないけどググってコピペでポン!っていうとこからスタートしてる人にはこの機能を使って欲しいです。

phpのコードとかはまた別物ですけど、レイアウトのことなどはこれでほぼ分かるようになります。
この「要素の検証」を使いながらやると
ほほ~!はは~!そういうことか~!
ってなります。何でレイアウトが崩れるのか・・・とか分かることが多くなりました。いやぁ、素晴らしい機能です。

これを使いこなせるとどこまで便利なのやら・・・。ドラえもんクラスですよきっと。

僕がモバイル版をカスタムしている時に使っていたのは2つだけ・・・です。

基本画面「Elements」

画面上で右クリックをすると窓が出てくるので「要素を検証」を選択。
下からにょきっと出てきた時に出ている画面(のはず)です。左上に「Elements」ってありますよね。
英語だらけで思わず目をそらしたくなる・・・けど見てみましょう。どこか見慣れた単語があるはずです。

「<div id="container">や<div id="header">」

などありますよね。そしてその横にある▼が横を向いてるならクリックしてみてください。▼となり、下に中のものが出てくるはずです。
そしてそのコードの中でカーソルを動かしていると表示されている画面が青くなったりします。そのカーソルが乗った時に色が変わる部分がそのコードの場所というわけです。
ちょっと伝わりにくいですけど、実際にやってみてもらえばわかります(笑)
これで、仕組みなどが分かってくると思います。
そして何よりも便利だと思ったのが、この画面の右側にある「Styles」。
そこにでている情報がいい!
例えば、背景色のコードだったり文字の大きさはもちろん、僕が作業が楽になったというのはここに出ている
「#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in」などのこれ!

 

1:これをクリックすると反転するのでそのままコピー。

 

2:スタイルシートで「Ctrl+F」で貼り付け。

 

 

これでいちいち探す手間が省けます。

これをみれば、スタイルシートにこの部分を指示するものがないから作ろう。とか、チェックボックスを使ってこれを消すとどう変わるかとか。
いろんなことが分かってきます。
 
※指示がない場合は「*」がでています。

PCでスマホ表示画面の確認「Emulation」

これはググればすぐに出てくる機能ですね。
人によってバージョンが違うのかいろんな画面での解説があります。やり方(セット方法やボタンの配置位置の違いなど)は様々。少し困ります(笑)
僕の場合は

 

1:画面上で右クリック⇒一番下の「要素の検証」をクリック。

2:下からにょきっと出てきたヤツの下にある「Emulation」を選択してお好きな機種に設定して「Emulate」ボタンをクリックすれば画面が変わります。

もし変わらなかったら更新ボタンを押してみてください。
戻したい場合は、「Reset」押せば戻ります。

その画面は実際とはすこーしだけ違いますけど、基本的にはこれをみながらやれば問題ありません。

お疲れ様でした

とりあえず、この2つがあればグーグル先生との共同作業でレイアウトなどはできると思います。というか、できました。
もちろん、無駄なコードとかありまくると思うので、正しいやり方を勉強した方がいいと思いますが。

僕は実践型トレーニングということでやってきましたが、思うことは!できれば形(機能)が変わるのでそれでいいんじゃないかと思ってるんですね。
変わらなければ「何か」が違うと。それにより人様に迷惑かけるわけでもないですから(笑)

答えは教えてくれませんが、何よりの先生じゃないですか?
 
先生って言うより親方ですね。
 

それでは皆さん、よいカスタムライフを!

バックアップは忘れずに!!

担当 : ウェブ担当他

趣味 : モノ作り・競馬

LDS designs


「名ばかりの」ウェブ担当ミツロックでございます。

アロマンシェスをご利用してくださるお客様が笑顔でいてくれればなぁと思います。

もちろん、スタッフもセラピストもです。


趣味以上、仕事未満であるアクセサリーも宣伝させてもらいます(笑)

アロマンシェスともども宜しくお願いします。

 - CUSTOM, ミツロック