はぴまむ子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。CSStwitterfacebookhatenabookmarklineCSS初心者の一番の悩み。それは、どの記述がどこに影響しているのかがわからない!せっかくカスタマイズを頑張ろうとstyle.cssを開いてみても、何がなんだかわからずそっと閉じてしまう。初心者でも簡単なWordpressですが、カスタマイズしようとするとちょっと敷居が高いんですよね。そんなCSS初心者でも簡単にサイトのCSSをカスタマイズできる方法が要素の検証です。この方法を使えば他の人が作った素敵なサイトを覗いてさわっていじくりたおしながらお勉強できるんです。まとめ自分好みのサイトを発見!どんなCSSなのか見てみたい!おぉ!美しい!なんて綺麗なサイトだ!ソースを見たい。どんなCSSでできているんだ。右クリックしてソースの表示で見るかな?なるほどなるほど。見るだけならそれでも十分かもしれませんね。実は、ソースの表示以外にもサイトの記述を見る方法があるんです。それが「要素を検証」です。え?要素を検証?そんな文字見当たらない。実はこの「要素を検証」というものはブラウザによって名前が違うので、見当たらない場合でも無問題!ネットを見るために必要なブラウザは何種類も!今あなたがこの記事を読んでいる、ということは必ずなにかのブラウザを使っているということになります。ブラウザというのは、ネット上の情報を見るためには必要不可欠なものなんです。そのブラウザには実はいくつも種類があります。上記のマークの中に見覚えのあるマークがありますよね?これがブラウザというもので、いろんな会社がブラウザの開発をおこなっています。それぞれ少しずつ規格が違ったりするので、ブラウザによってちょっとずつサイトの見え方が違ったりもするんですよ。要素を検証?要素の検査?ブラウザごとの名称ブラウザの中でもまだまだシェアが多く一般的なIEでは要素の検査GoogleChromeでは要素を検証Macユーザーの方なら要素の詳細を表示Firefoxでは要素を調査などなど。見ていただくとわかるとおり、だいたい似たような名前なんですね。今回はこの中のGoogleChromeというブラウザの要素を検証を使ってCSSを簡単にカスタマイズしていきたいと思います。他のブラウザでももちろん同じようにカスタマイズできますが、ちょっとずつ名称や使い方が違う可能性がありますので参考程度にしてみてください。GoogleChrome「要素を検証」を使ってCSSの記述を確認するまずは覗き見たいサイトを開いて右クリック→要素を検証でどんなCSSがかかれているのかを確認してみましょう。今回は例として、このサイトはぴまむを使って説明します。サイト内のCSSを見てみたい気になる箇所で右クリック→要素を検証をクリックしてみます。私はタイトルの記述を見てみたいので、タイトルの部分にカーソルを合わせて右クリックして、要素の検証をクリック!すると。なんということでしょう!左側にはHTMLの記述、右側にはCSSが記述されたものが出てきました。左側のHTMLの部分でクリックして選択している(青色)部分に使っているCSSが右側に出てきています。このように見たい要素ごとのCSSがまとめて右側に出てくるので、今現在反映されているCSSを探すのも簡単です。どこにどんなCSSが記述してあってどのCSSが反映されているのかがよくわかりますね。style.cssを普通に開くと、なんだか英語の記述が膨大すぎて思考回路はショート寸前だったって人でも、変更したい要素に使用しているCSSが見やすいので探す手間も省け、勉強に割く時間も多く取れるので効率もアップ!GoogleChrome「要素を検証」を使ってCSSの記述を変更するまた、このブラウザ上でCSSを変更してみることもできます。試しに文字の大きさを指定している「font-size」をなくしてみましょう。反映されているCSSを外すのは、左側のチェックボックスをクリックしてチェックを外すだけ!ポチっとな、とチェックを外すと。あらビックリ!文字がちっちゃくなっちゃった!戻したい場合は、さっきクリックしたチェックボックスをもう1度クリックして、チェックをつければOKです。次に文字の大きさを変えてみましょう。文字の大きさを変えるのは「font-size」を指定している数字を好きな大きさに変更するだけ。数字部分をクリックして、今回は例で3にしてみましょう。1.5emとなっている部分をクリックして、3emに変更してみました。あら不思議!文字がでっかくなっちゃった!要素の検証で微調整して出来上がったCSSをコピペ!CSSを変更した変化を見ながら調整できて便利な要素の検証ですが、今の状態はただのプレビューと同じ。大元のCSSの記述が変更されているわけではないので、ページの更新をすると元に戻ってしまいますし、自分以外の人のブラウザからはいじった状態は見えません。自分のブラウザ上でだけ変更したという状態なので、大元から変えるには今変更した記述を自分のテーマのstyle.cssに上書きしてあげる必要があるんです。要素の検証の右部分、CSSの記述の上にリンクがあるのでそこをクリック。すると、style.cssだけを表示しているSourcesに移動できます。さっき変更した場所のCSS記述部分に飛ぶので、必要な記述だけを抜き出してWordpress管理画面の「外観→テーマの編集」にコピペ。要素の検証では何行目の記述を変更したのかまで確認できるので、変更箇所も探しやすいです。CSSのとこに飛んできたはいいけどどこ変更したかわからない。いうか、さっきいろいろいじりすぎてどことどこをコピペすればいいかわからないー。そんな方は、Sourcesページ全部を「外観→テーマの編集」に上書きコピペすればOK。まとめGoogleChromeの要素の検証を使ったCSSのカスタマイズ方法は初心者でも簡単なのでとってもおすすめ。CSSの変更ってちょっと敷居が高いな。どこをどう変えていいかわかんないしこのままでいいや。要素の検証なら変化をリアルタイムで見られるので、CSSの名前を知らなくてもOK!簡単にサイトのCSSが変更できるので、ぜひ要素の検証で遊びながらCSSに触れてみてください。linkシェアするtwitterfacebookhatenabookmarkline書いている人ゆいくり30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。[詳細]フォローするtwitterfacebookfeedコメントこんばんは。この「初心者でも簡単!ブラウザを使ってCSSをカスタマイズする方法」すごく参考になりました。インターネットで調べながら、HTMLとCSSを少しづつではありますが勉強しはじめてちょっとだけカスタマイズが判ってきました。どこを直せばいいのか?記述箇所がわからなかったのですがブラウザと要素の検証、検査を使う。これって誰も教えてくれないテクニックですよね。いやぁ、検索ユーザー120%以上満足しちゃう素晴らしい記事です。ゆいくりさんが女神様に見えてきました。ありがとうございます。linkフォローするtwitterfacebookfeedはぴまむの中の人ゆいくり30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。Reserved.arrowuphome。