MUZUMI
Pocket

wordpressでサイトやブログを作っている皆さん。
その中で、「CSS」って聞いたことはある・少しはいじれるけどよくわかんない!と悩んでいる方に向けて記事を書きました。
そもそもパソコンが苦手なんだけど…という方にもばっちり説明いたします!
Let’s CSS初心者脱却!!


【記事を読む前に】
・この記事はwindowsのPCからの閲覧を想定しております。
・あなたはどのブラウザを使っていますか?
 おすすめはfirefox、次にchromeやmicrosoft edgeです。
https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300

※この中に見覚えのあるものがなかったら、お手数おかけしますが、firefoxをダウンロードして、firefoxから改めて記事をご覧ください。


要素の調査を使ってみる。

それではさっそく「要素の調査」というものを使って、HTMLとCSSを覗いてみましょう!


上の画像をクリックしてください。新しいタブで画像が表示されると思います。

新しく開いた画像の上で右クリックして、「要素の調査」なるものを選択してもらいますが、ChromeやEdgeをお使いの方は別のものをクリックしてもらいます。


firefoxの場合
https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300
google chromeの場合

Microsoft Edgeの場合
「要素の調査」をクリック 「検証」をクリック
※初めて開いた方は、下の操作を行ってください。
「要素の検査」をクリック
※「要素の検査」がなければ、下の操作を行ってからもう一度試してください。
 次に進みましょう  新しく表示された部分について、赤い矢印の部分を順番にクリックしてください。  キーボードのF12を押して、新しく表示された部分を右上の×で消す。

※「要素の調査」はブラウザ毎に異なる名称になりますが、この記事では一括して「要素の調査」と表現させていただきます。

 

↑こんな感じの画面になっていると思います。

ピンク色の部分はHTMLで、ミドリ色の部分はCSSです。

 

「要素の調査」を使えば、
ネット上のコンテンツのHTMLやCSSが覗けるんだ!


それだけではありません。この「要素の調査」では、覗きだけでなくHTMLCSSの書き換え練習まで出来ちゃうんです。

早速いじってみましょう!


CSSにふれてみよう

下段にある「出力の絞り込み~」と書いてある部分は必要ないので、ESCキーを押して消してくださいね。

HTMLの4~6行目、<img class~~ と書いてある部分をクリックしてください。紺色がついた(すでについている)と思います。

そのままCSS欄を見て下さい。
←赤矢印部分に background: hsl(0,0%,90%)~ と書いてあります。これは画像の背景の色を表しています。よくわかりませんね。
をクリックしてみましょう。
色を選択する画面がでてきましたね。

好きな色に変えてみてください。

写真では青色を選択してみた例です。
←画像の背景が青色に変わりました!

CSSはこのように、HTMLで用意された文字や画像を装飾する役割をしているんですね。


こんな簡単にCSSをいじれるなんて拍子抜け!要素の調査ってすごーい!

でもちょっと待ってください。

こんなに便利な編集ツールなのに、どうしてあまり耳にしないんだろう…?


実は「要素の調査」って編集ツールじゃないんです。

タブを右クリック⇒タブを再読み込みを選択してみてください。

背景戻ってるやーん!!

保存ボタンはありません。あくまでも「お試し編集画面」なのです。

CSSを変更して保存するには、CSSファイルを書き換えなければならないんですね。

一方CSSの勉強にはすごく役立つツールなので、次回以降も「要素の調査」を使って勉強していきましょう!

必ず、CSSを使いこなせるようになりますよ!


おまけ

CSSをいじるまえに、要素の調査の画面を見やすくしましょう。

要素の調査画面を黒っぽくする

上画像の赤矢印部分にある、歯車をクリックしてください。

中央にある「テーマ」から、「Dark」にチェックを入れてください。
画面が黒っぽくなりました。

サイトは背景が白いものが多いので、黒い編集画面は見やすいと思います。

…見やすくないですか?(‘ω’)

ほかのテーマがいい方はお好みでどうぞ。

要素の調査の文字を大きくする

さらに、要素の調査画面のどこか適当なところをクリックして、《CTRL+「-」》を入力すると調査画面の文字が小さくなります。

逆に《CTRL+「+」》を入力すると文字が大きく…なることになってますが、大きくなりますかね?汗私は大きくなりませんでした。

どうしても文字を大きくしたい!見づらい!という方は、多少度胸がいりますが下記の方法に従ってください。

ブラウザ画面の一番上にある、「+」ボタンで新しいタブを開いてください。

URLを入力する欄で「about:config」と入力して実行してください。

「危険性を承知の上で使用する」をクリックしてくださいね。

上に表示される検索バーにて、「devtools.toolbox.zoomValue」と入力してください。該当する名前を持つ設定が表示されます。

表示された設定をダブルクリックします。すると「文字列を入力してください」といわれるので、1.3ぐらいの数字を入れてOKを押してください。

終わったらabout:configのタブは消してください。
これで要素の調査画面の文字が大きくなりました!まだ小さいと感じたら再びabout:configから調整してくださいね。


その1はここまでとなります。

よくわからなかったCSSも、ちょっとずつ触ってみることで、ぼんやりと特徴をとらえることができるようになります。

いっしょにCSS初心者卒業頑張りましょうb

  • このエントリーをはてなブックマークに追加

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。