開発者ツールで変えた内容は保存されるの？

されません。開発者ツールでの変更はブラウザ上の一時的なもので、ページを再読み込みすると元に戻ります。気に入った変更は自分のCSSファイルに書き写しましょう。

表示を日本語にできる？

できます。開発者ツールの設定（歯車アイコン）のLanguageで日本語を選べます。ただ、解説記事の多くは英語表示を前提にしているので、英語のままにしておくのも手です。

開発者ツール左上のスマホとタブレットのアイコン（デバイスツールバー）を押すと、画面幅をスマホサイズに切り替えて表示を確認できます。

ページの上で右クリック→「検証」。出てきたごちゃごちゃした画面をそっと閉じたこと、ありませんか？あれは開発者ツール（デベロッパーツール）——Webページの中身をのぞいて、その場でいじれる、Web制作最強の相棒です。機能は山ほどありますが、最初に覚えるのは3つだけでいいです。

閉じるときは右上の「×」か、同じキーをもう一度押します。

開いてすぐ見えているのがElementsパネル。いま表示しているページのHTMLの中身が木のように表示され、行をクリックすると、ページ側の対応する場所が光って教えてくれます。

下半分のStylesには、選んだ場所に効いているCSSが全部並びます。ここがすごいところで——

いくらいじっても、再読み込みすれば元どおり。壊れる心配のない砂場なので、遠慮なくいじりましょう。気に入った数字が見つかったら、自分のstyle.cssに書き写せば完成です。

Consoleは、ページからの「お知らせ窓口」です。JavaScriptのエラー、console.logで書いたメッセージ、読み込みに失敗したファイル——ぜんぶここに届きます。

「ボタンを押しても動かない」「画像が出ない」——困ったとき最初に見る場所はここです。赤い文字が出ていたら、それが原因のヒント。

左上のスマホとタブレットが重なったアイコン（Mac：⌘+shift+M）を押すと、ページがスマホの画面幅で表示されます。機種を選んだり、幅を自由にドラッグしたりできるので、「スマホで見ると崩れてないかな？」の確認が、スマホを取り出さずにできます。

好きなサイトを「検証」で分解することです。きれいだなと思ったボタンの上で右クリック→検証。どんな色？余白は何px？角丸は？——プロの技が、ぜんぶ数字で見えます。眺めて、いじって、まねる。開発者ツールは、無料で無限に読める「Webの教科書」です。

「検証」を怖がらなくなった日から、Web制作の上達は一気に加速します。