トラックドライバーをやりながらWEBデザインの仕事もしているtakeです。
いやー最近忙しい。なかなかブログ書く暇がないです。
まぁブログが義務になっちゃうと本末転倒なので、時間があるときにちょいちょい書いていければよいかなと思っております。
さて、今回はデバッグモードのお話です。デベロッパーツールとも言いますかね。
ご存知ですか？
WEB制作に携わる方にとっては基本中の基本だと思いますが、一般の方は『いや、知らんし』という感じだと思います。
ホームページ上で右クリック→【検証（検査）】とかで表示出来たかと思いますが、画面半分に記号やアルファベットがわちゃわちゃ表示されてるアレです。
このデバッグモード、便利なんです。ホントに便利すぎて、自分はこれがないと業務に支障が出るレベルです。
今日はそんなデバッグモードについて少しお話をしてみたいと思います。WEB制作をこれから学ぶ人は、絶対に役に立つのでご覧になってください。
それではいってみましょう！
デバッグモードって何が出来るの？
一言で言うと『ホームページの制作における様々な検証が出来るモード』といった感じでしょうか。
主な機能を挙げると……
- ホームページの構成を調べる
- ホームページの仮変更ができる
- スマホやタブレット時の見え方を表示できる
他にもJavaScriptの構文エラーを調べたりと色々な機能があるのですが、私が主に使うのはこのあたりかと思います。
ちょっと掘り下げます。
ホームページの構成を調べる
これはですね、自分が制作しているホームページで使用するというより他人のホームページで使う事の方が多いです。
他人のホームページの中身を見て、こうなってるのかーと勉強するモードです。
まぁ、やってる事はただの覗きです（笑）
しかし他人のホームページの構成を知る事という行為はスキルアップに欠かせません。何事も真似事から始める。これは大事だと思います。（コピーはダメです。）
ホームページの仮変更が出来る
ホームページの仮変更を行えます。どういう事かと言うと、自分が見ているパソコン上だけ変更が行えるという感じです。
しかもリアルタイムに実際のホームページを見ながら変更が出来るため大変便利です。
例えば特定の箇所の色を変えたいとき、周りの色と比較しながらボタン1つで様々な色を試せます。
ホームページ内のカラーやサイズなど装飾部分を扱うCSSを操作します。
スマホやタブレット時の見え方を表示できる
パソコンの画面からスマホやタブレット時の表示を確認出来ます。しかもどんなサイズでも表示出来るため、メーカーやバージョンの違いなどによる細かいサイズの違いもカバー出来ます。
私は主にこの3種類の機能を使っていますが、他にも色々出来るようでして正直使いこなせていません（笑）
とにかく便利だということは間違いないです。
予測変換も便利
最近のテキストエディタは予測変換がほとんど標準装備となっているためコードの入力の時短を後押ししてくれます。
もちろんデバッグモードでも1〜2文字入力するだけで、候補となるCSSのセレクタなどの文字列が表示されます。
自分、よく忘れるので助かります（汗）
テキストエディタで思い出しました。ちょっと話は逸れますが、ホームページはパソコン（Windows）の標準装備の『メモ帳』で作れます。
まぁ色々と不便ですからメモ帳なんかで作りませんが、その気になれば1ページくらいは作れます。
ちなみに私が最初に勉強した時はメモ帳を使っていました。そんな標準装備のテキストエディタでホームページが作れるの!?って驚いた記憶があります。
話を戻します。予測変換が便利ってとこです。
本来はコード入力の時短に用いられるべきなんでしょうけど、私みたいなド忘れさんには予測変換は大活躍です。
ちょっと例をあげてみます。
例えば文字の大きさを変えるCSSのコードは『 font-size:10px; 』と、こんな感じで書くわけです。
まぁ基本的なコードなのでこれを忘れたりはしないのですが、色々をコードを入力しているとたまにド忘れだってします。
そんなときに最初のfontさえ入力出来れば、sizeだったりcolorだったりが候補して挙がってきます。あとはそこから探すだけです。
そしてホームページを確認しながら10pxの数字を変化させていけば、文字の大きさを変えられるというわけです。
デバッグモードに頼りすぎ
文字の大きさや色の変更・特定箇所のサイズの幅や高さの変更など基本的なコードは忘れたりはしませんが、使用頻度が低いコードは忘れがちです。
更に私は忘れっぽいのでこの機能にホント助けられてます。
最近はデバッグモードがあることを頼りに『なんとなく覚えておけばいっかw』みたいなところがあります（汗）
なので新しい知識は『覚えるのではなくブックマークしておく』に変わっていってます。もしくは、最初の文字だけ覚えておくとか。
良いか悪いか別として……それで作業効率が上がれば良しと考えています。
まとめ
今回はデバッグモードについて書いてみました。
便利なものに頼るというのは、WEBデザイナーの仕事に限らず様々な場面で当てはまる問題かと思います。
何事もそうですが基本さえしっかり抑えておけば、便利なものは積極的に使うべきだと思います。
とは言え、便利なツールを頼り過ぎることによって色々と覚えることを疎かにしては本末転倒。
大事なのは基本をきちんと勉強しているか。そこさえおさえておけば多少忘れても一定のレベルをキープできると思います。
デバッグモードはWEBデザイナーの仕事の一部が垣間見れるかもしれません。
まだ使ったことのない方は、是非試してみてください。
以上となります、ありがとうございました！
コメント