たまろぐ

CSSを作成するための基礎知識を身に着ける! / WordPressのテーマ自作する

2019年9月27日 00:20 カテゴリー: Wordpress

この記事ではCSSを解説する前の基本的なCSSの知識を身に着けてもらえるように解説していきます。この記事を読むと今後のCSSの解説を理解しやすくなります。

各CSSの記事をより深く理解して、自分でカスタマイズできるように、まずはこのCSSの基礎知識をお勉強しましょう!

そんなに難しくないので大丈夫ですよ!

CSSの基本

CSSは超簡単に言うと「どこに」「なにを」「どのくらい」を指定しています。

CSSは以下の様な構成でできています。

どこに{
       なにを: どのくらい;
       なにを: どのくらい;
}

さて一つずつ解説していきましょうか。

どこに

これを説明するために今回の記事を書きました。そしてとても重要です。

これは「CSSを反映させたい場所をここで指定しておく」という意味です。

例えば見出しの h1にCSSを反映させたい場合、

h1{
    なにを: どのくらい;
}

こんな感じに設定します。

これなら簡単なんですが、これ、もっと複雑な事が出来るんです。

同じHTMLの片方だけにCSSを反映させる。

例えば、

<body>
<h2>あっちゃん</h2>
<article>
<h2>たま</h2>
たまブログ書くって言ってたのに、全然書いてくれないなぁ。。。
</article>
</body>

こんな感じのHTMLがあったとします。

articleの中のh2だけにCSSを反映させたいとします。その時に「どこに」の場所にh2と入力してしまうと両方のh2に反映されてしまいます。そこで以下の様にします。

article h2{
      なにを: どのくらい;
}

こうするとarticleの中のh2に反映されるわけです。

名前を付けたHTMLにCSSを反映させる

これ超重要です。HTMLは自由に名前を付けられます。この名前を使って個別に「どこに」を指定していきます。例えば

<div class="abc">
僕はabcだよ!
</div>

こんなHTMLを書きます。class=で名前を付けます。この時必ず”と”で囲います。今回はabcという名前を付けました。

CSSで名前を指定するためには「.」を頭につけて以下の様にCSSを記載します。

.abc{
      なにを: どのくらい;
}

もう一つidという名前の付け方がありますが、正直必要ないです。基本はclassでいいです。

複数のどこをを指定する

複数の場所を一括で設定したい事があります。そういう時には「,」を使って下記の例文の様に指定します。

h1,h2,h3{
       なにを: どのくらい;
}

また、全ての要素に設定したい場合は下記のようにしてみてください。

*, *:before, *:after {
      なにを: どのくらい;
}

これですべての要素に同じ設定を共有できます。

・・・これは使わないと思うでしょ?

結構使うんですよ?w

なにを

なにをは、「色」や、「余白」、「枠」、「段組み」等の様々な要素を選択します。

これはただ覚える、または必要に応じて検索すれば大丈夫です。

どのくらい

どのくらいは、「なにを」の要素をどんな値にするかを指定します。

これはただ覚える、または必要に応じて検索すれば大丈夫です。

あれどこかでみたような?デジャヴ?

まとめ!

本当は次の記事、「HTMLの構成を確認する」も同じ記事で書こうと思っていましたが思っているより長くなってしまったので、分けることにしました。

これでも必要最低限の解説で終わらせています。idとか解説してないですし。ここで解説していないことはよほどCSSのエキスパートにならないと使いません。すくなくとも、たまろぐでやっている「世界で一番シンプルなWordpressのテーマを作る!」講座では使いません!安心して切り捨ててください!w

ただし、CSSの基本的な知識の解説では、他サイトと比べてかなり分かりやすくできたと思います。

序盤で「理解しましょう!」的な事を書きましたが、一通り読んでさえいれば、後の講座で何記事になるか分かりませんが、何度も解説されるはずなので頭の片隅程度で問題ありません。

正直今後の記事を書きやすくするために、今回の記事を書いただけです。(サーセンw)

次の記事

WordPressのテーマを作るまとめ