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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームページの新規作成・リニューアルで
お困りの担当者様へ

WordPressの機能を活かして運用しやすいホームページを作成

せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか？

ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。