Google Chromeの「要素を検証」機能を使うと、Webデザインがずいぶん楽になります。

Google Chrome 「要素を検証」でリアルタイムCSS編集

Google Chromeで適当な文章を選択します。
そして右クリックして出てくるポップアップメニューで「要素を検証」を選びましょう。

Google Chrome 要素を検証

すると、その選択した文章に関するHTMLおよびCSSが下部に表示されます。

ここのCSS部分が編集できるんですよね (スクリーンショットの赤枠で囲んだ部分)。
そして、編集するなり画面に反映されるので、リアルタイムにCSS編集→画面確認という作業ができます!

これがWebデザインをするときにめちゃくちゃ便利!

文章だけだとわかりづらいと思いますので、この操作を動画で解説しました。

動画を観ていただくと、どういうことかわかりましたかね。

HTMLやCSSの学習にも使える

もちろん、HTMLやCSSの知識が前提になってきますが、このようにしてリアルタイムに編集→画面確認ができるので、HTMLやCSSの学習にも使えます。

ぜひお手元にHTMLやCSSのリファレンスを用意して、いろいろいじくってみてください。

編集したら、サーバに反映すること

なお、Google Chromeで編集しているのは、ローカルにダウンロードしてきたデータになります。

なので、CSSを編集して満足したら、その編集結果をサーバのCSSファイルに反映しなければなりません。

WordPressで言えば、テーマによりますが、おそらくstyle.cssというファイルを編集することになります。

どのCSSファイルを編集しているかは、「要素を検証」で出てきた右下の部分 (上のスクリーンショットの赤枠で囲んだ部分)に表示されていますので、そちらを参考にしてください。

ここでは、具体的にどこのどのファイルのどの部分を編集すればよい、という説明ができないので、適宜実施してくださいね。

おわりに

これまでサイトの見栄えを編集する作業をするときは、

CSSファイルを編集 → ファイルを保存 → ブラウザでページの更新

といった作業をしていました。

これがブログになると結構厄介で、ローカルに構築したブログ環境をいじるか、本番環境をいきなりいじるかという感じだったんですよね。

私の場合は使っているサーバのキャッシュ機能の影響もあり、CSSの編集は一層手間でした。

このGoogle Chromeの「要素を検証」機能を使えば、その辺の作業が、ローカルでお試し感覚でできます
しかもCSSを編集するとリアルタイムに画面表示も変わるので、とても作業が楽ちんです。

めちゃくちゃ便利ですね。

あなたのブログやホームページのデザインを編集する際、ぜひこの機能を使ってみてください。

[米国NLP協会認定 NLPトレーナー、NLPコーチングトレーナー]
長野と東京の2拠点生活をしながら、より自由で豊かな人生を模索しています。
フリーランスシステムエンジニアとして、企業様向けにはプロジェクトマネージャや新入社員研修の講師 (Javaプログラミング研修など)を行っています。
また、個人の方向けにはコーチングやカウンセリングを行っており、本ブログやメルマガの執筆、ラジオ出演、セミナーなどを通じて、「すべての人がより自由で豊かな人生を」送るサポートをしています。
・コーチングのお申し込みはこちら
・メルマガの登録はこちら
・詳しいプロフィール、お問い合わせはこちら

無料メールセミナー

無料メールセミナー「ファーストキャッシュコーチング」

「自分の知識、経験、スキルを活かしたオリジナルセミナーを開催し、ファーストキャッシュを得る」無料メールセミナー (全9回)をお送りしています。

ご登録はこちらから

Feedlyに登録

こちらの記事があなたの役に立ちましたら、ぜひFeedlyに登録して、ブログの更新をチェックしてください。

follow us in feedly

メルマガ好評配信中!

メルマガ「ワンダフルライフ」

読んだあなたが「まず、やってみる」気持ちになるメルマガ。

あなたが「ちょっと前向きになる」よう「そっと背中を後押し」します。

メルマガの登録はこちらからどうぞ。

Facebookページ

Facebookページもあります!下の画像をクリックして登録してください!