【サイトを直接変えてみよう】F12キーで出来る一時的なサイト編集

webプログラミングを勉強するのは良いとして、

勉強すると何が分かるようになるんだろう？

もちろん習熟具合にもよりますが、

誰もが今すぐ、下記のようなことが可能です。

・難しい勉強や準備をしなくてもサイト編集ができる

・サイトの色や文字サイズを一時的に変えて検証できる

何から手を付けていいのかわからない方も、

「このサイトのメニューを変えるにはどこを編集すれば良いのかな？」

「このブログのタイトル部分、2行になってしまったら

表示はどうなるんだろう？」

などと実戦的な編集スキルや感覚を養うことが出来ます。

では具体的なやり方を見ていきましょう。

１．F12キーを押す

２．inspectボタンで要素をピックアップ

ここまでは前回と同じなので、簡単に書きます。

もし分からなければ前回の記事をお読みください。

３．編集する

実はこのF12キーを押した後の状態で、

ページを直接編集することができます。

具体例として、以下3パターンを試してみましょう。

３－１．書いてある文字を変えてみる

Inspectボタンが押され選択された部分を、

以下のように直接編集してみてください。

※選択された部分をダブルクリックすると

編集可能になります。

※文字を変えたらEnterキーを押すと確定されます。

３－２．フォントサイズを変えてみる

今度は以下のように、選択したあとに右側にある

"element.style"という部分に、以下の赤文字をコピペしてみましょう。

font-size:x-large;

※これもEnterキーで確定です。

※文字のサイズが変わらない場合は「font-size:x-small;」などに

してみてください。

３－３．文字間の余白を広げてみる

次は選択した部分の上側に余白を入れてみましょう。

以下をコピペで追加してみてください。

margin-top:40px;

いかがでしたでしょうか？

実は今やった3パターンの編集が、

すでにhtml/cssの編集をしたことになります。

html/cssでデザインするというのは、

上記の「margin-top:40px;」のような指定を

複数記述していくことになります。

具体的にどう指定すればどうなるか

などはまた別途解説します。

まとめ

・サイトの文字を変えてみよう

・文字の大きさを変えてみよう

・余白を広げてみよう