• 最終更新日
  • CSS

ブラウザ上でデザインを調整する方法と気になるサイトのソースコードの見方

ホームページを作る時ってHTMLとCSSを記述してからブラウザで確認しますよね。CSSでデザインを変更したらその都度ブラウザを更新して変更部分を確認します。

まぁ、おおまかな流れは一緒なんですが、「ブラウザを更新しないと変更したデザインが確認できない。」って思っていませんか?

実はブラウザ上のCSSのプロパティをいじる事によって更新せずとも即座に変更したデザインを確認する事ができるんです。

ソースコードの見方

まずはブラウザで表示しているページのソースコードを見ていきましょう。

「このサイト良い感じ!」とか「これはどうやってるんやろう?」って時に気になるサイトのソースコードを確認する事ができます。

はじめに言っておくと、あくまで参考のために見るだけです。そのままソースコードをコピペするのはご法度なので気を付けてください。

基本的にホームページは制作した方の著作物なのでフリー素材であったり、使って良いよ~と言われているもの以外はコピペしないようにしてください。

チェピレアで紹介しているものはコピペで使ってもらって全然OKです。

ソースコードの見方

どのブラウザでも同じような手順で見る事ができますが、今回はChromeで進めていきます。

まずはページのリンクなどがないスペースで右クリックして「ページのソースを表示」をクリックします。

ソースコードの見方

はい、コレだけでソースコードを見る事ができます。実際にブラウザで試してご確認ください。

さらに「https://chepirare.com/wp-content/themes/Chepirare/style.css」をクリックしてみます。

ソースコードの見方

そうするとCSSも表示されました。HTMLのソースだけじゃなくてCSSファイルやJSファイルも見る事ができるんです。

なので、「このサイトはどうやって作ってるんやろう?」って時にソースコードを見ると凄くタメになります。初心者の方は色んなサイトのソースコードをたくさん見てみてください。

ブラウザ上でデザインを調整する

ソースコードの確認方法を押さえたところで次にブラウザ上でデザインの調整をおこなう方法をご紹介します。

ブラウザ上でデザインを調整する

ソースコードを見る時と同じ要領でブラウザに表示されているページ上で右クリックして「検証」をクリックします。

ブラウザ上でデザインを調整する

するとページの下部にHTMLやCSSのコードが表示されます。これを「デベロッパーツール」と言います。

ではCSSのプロパティを変更してみます。「初心者の方でも~」のテキストを表示している「strong」タグをクリックします。

実際におこなって頂くとわかりますが、表示されているHTMLのタグにマウスを重ねるとその部分がページ上ではハイライトされます。今は「strong」タグにホバーしていますのでこの部分がハイライトされている状態です。

ブラウザ上でデザインを調整する

「strong」を選択するとこのタグに設定されているプロパティが右側に表示されます。

そしてCSSが指定されているひとつ上の行に新たに「color: #f2577e;」を記述すると文字がピンク色に変更されます。

追加した「color: #f2577e;」が適応されるともともと指定していたプロパティに「color: #21c69c;」というふうに打消し線が引かれます。

ブラウザ上でデザインを調整する

変更できるのはCSSのプロパティだけではありません。HTMLも変更できます。次はHTMLで表示しているテキストを変更してみます。

「strong」タグ上で右クリックをして「Edit as HTML」をクリックします。

ブラウザ上でデザインを調整する

そうすると選択したタグを編集できるボックスが現れるので枠内の文字を変更します。変更が終われば編集ボックスの枠外をクリックすると編集ボックスが閉じます。

ブラウザ上でデザインを調整する

確認すると変更したテキストに変わっていますね。

変更したHTMLやCSSは今見ているブラウザでのみ変更されていますので、大元のファイルが変更されたわけではありません。

デザインの調整をする時はこのデベロッパーツールが大活躍です。まずはおおまかにHTMLとCSSでデザインを固めた後はブラウザでチェックしながら微調整をおこなっていきます。

デベロッパーツールを使うか使わないかで作業スピードも変わってきます。何より表示を確認しながら調整できるのでぜひコーディングの際はこの方法を取り入れてみてください。

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。