脱・Web初心者!Google Chromeを使ってみよう!




%e3%83%96%e3%83%ad%e3%82%b0_03

こんにちは!プロクラスの森です。

・初心者だけど、ホームページを作ることになった。

・初心者だけど、会社のホームページを運用を任された。

・初心者だけど、ホームページ作成の勉強をしたい。

こういった皆さまから簡単ホームページ作成!はじめてのWordPressに、たくさんのお申し込みを頂いております。ありがとうございます!

やっぱり…分からないことは講師に直接質問するのが一番早いので、ぜひプロクラスの授業にお越し頂ければと思います!


WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちらです!

…なのですが、今回はWeb初心者を脱する為に、他にはどうやって勉強すれば良いのかをちょっとだけ紹介します。

とりあえずGoogle Chromeを使ってみよう

アルファベットのe(イー)の形の青いやつ
Internet explorer(略してIE)
Microsoft Edge

%e3%83%96%e3%83%ad%e3%82%b0_03

こういった、インターネットを見るソフトの事をブラウザと言います。
Google Chromeもブラウザの一つです。

脱・Web初心者!のためにはとりあえず、下記のリンクからGoogle Chromeブラウザをダウンロードして、PCにインストールしましょう。
https://www.google.com/intl/ja/chrome/

Chromeには超便利な機能がある

Chromeにはデベロッパー・ツールという超便利な機能があります。

出し方はここ!
%e3%83%96%e3%83%ad%e3%82%b0_03
※もしくは調べたい辺りを右クリックして出てくるメニューの一番下「検証」からでも出せます。

Web制作会社の人間はほぼ例外なく、この機能をフル活用しています。
そして皆、参考になりそうなサイトがどうやって作ってあるのかをめちゃめちゃ見ています。(もう目が痛くなるくらいに…)

好きなサイト、お手本にしたいサイトをChromeで開いて、とりあえずデベロッパー・ツールでいろいろ見てみましょう。

まあ…正直なところ最初はソースコードを見てもよく分からないですよね…
しかし!それでも得られる情報はたくさんありますよ!

使われている画像のサイズを見てみよう

機能はいっぱいあるのですが、よく使うのは「Elements」というところです。

1

サイトのソースコードを細かく見ていく事ができます。
例えば、使われている画像のサイズなどは参考になりそうですね!

文字の大きさや色を見てみよう

2
ちなみにこのパネル上の数値は書き換える事もできます。
なので、ここの文字サイズをもう少し大きくしたらどんな見え方になるかな?… みたいなちょっとしたことがすぐ試せるんですよね。

スマートフォンの時はどんな見え方になるかを見てみよう

「Elements」の横にあるのがデバイス(端末)切り替えのボタン。

3

これを使うと、いろんな端末での表示をシミュレートできます。
(iPhone X以外に、iPadやiPad Proなども選べます。)
iPhoneやiPadを持っていなくても、これで確認できますね。

お手本にしたいサイトを真似よう

Chromeデベロッパー・ツールを使って、お気に入りのサイトの細かいところがどうなっているのかを参考にしてみましょう。

お手本になりそうなサイトを見つけ、とりあえず調べてみる。
これは初心者限定というわけではなく、実際のWeb制作作業でも基本的には同じです。

でもやっぱり、分からない事はやはり講師に直接質問するのが一番早いので、ぜひプロクラスの授業にも来てくださいね!

最後に…
このデベロッパー(開発者)ツール、実はInternet explorerやMicrosoft Edgeにもあります。
ただ、ブラウザ自体の使いやすさや、デベロッパーツールが実装された時期に一日の長ありという事で、Chromeのデベロッパーツールをおすすめしておきます。