初心者向け!デベロッパーツールで文字の大きさを変更してみよう

おはようございます、ゆうそうとの松田です。
ホームページやブログを見て、ふとこんなことを思うことありませんか?

  • ホームページの色を一部変えてみたらどうなるんだろう?
  • 見出しだけ明朝体にしたらどうなるんだろう?
  • 記事の文字を大きくして見たらどうなるんだろう?

ちょっと変えたいけどどうなってるのかよくわからない、そんな時にブラウザに搭載されているデベロッパーツールという便利機能を使ってみましょう!

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

デベロッパーツールでは、自分のホームページのHTMLやCSSを書き換えて、見え方を確認することができます。

デベロッパーツールで変更した内容はそのとき自分だけに見えて他の人には見られないので自由に試してみることができます。

また、ホームページならどのホームページでも試すことができます。

デベロッパーツールを開く

今回はGoogle Chrome(クローム)の場合の方法です。

ホームページの画面の上で右クリックし、その中にある「検証」をクリックします。

下に表示されたものがデベロッパーツールです。

デベロッパーツールで文字の大きさを変えてみる

とりあえずどんなことができるのか、文字の大きさを変えてみようと思います。

たとえばこの日付の文字を「もうちょっと小さくするとどうなるかな?」ということを試します。

画面の上で右クリックして検証をクリック

デベロッパーツールの左上にある矢印をクリックします。

矢印の色が水色に変わります。

そのまま、文字の大きさを変えたい日付のあたりにカーソルを持って行くと、このように背景色がつくので、そこでクリック

すると、デベロッパーツールに今クリックした日付のところのHTML日付のところのCSSが表示されます。

文字の大きさはCSSで指定しています。

CSSで文字の大きさが14pxとなっています。ここをクリックすると変更できるようになるので、

10pxにしてみます。表示を確認すると、

このように文字が小さくなったことがわかります。この日付の部分はCSSのclassで指定していたので、同じclassを使っているもう一つの日付も小さくなっています。

このように一時的に文字の大きさを変えてみたりすることができるのがデベロッパーツールです。

デベロッパーツールで変えたところは読み直せば元に戻る

デベロッパーツールは、開発用のツールなのでこのように文字の大きさを変更して「見てみる」ことができます。また、一時的にそうなっているだけなので、ブラウザを再読込すれば

元に戻っていることがわかります。

デベロッパーツールはGoogle Chrome(クローム)以外にもFireFox、IEやSafariなどほとんどのブラウザに搭載されている機能です。面白くて便利ですので一度使ってみてください。

お問い合わせください!

ゆうそうとは八王子で小規模事業者・個人事業主、あるいは個人の方向けにWordPressでのホームページ制作、ITに関する相談、トレーニングのサービスを行っています。

ホームページは作ってからが始まりです。お客様が育てることでホームページはどんどんよくなっていきます。ゆうそうとと一緒に効果的なホームページを育てていきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA