CSSの基礎を学ぶ。初心者から上級者への一歩を踏み出そう

2018年8月27日

こんにちは、てーやまです。

WordPressは自由にブログの外観をカスタマイズできますね。
元々ワードプレスが提供している外観カスタマイズ機能に加えて、
使用しているテーマによって追加機能があるみたいです。

管理画面からプレビューを見ながら変更できるので
HTMLやCSSといったプログラミング言語を知らなくても、ある程度は自由に変更が出来ますよね。

ただ色々なブログを訪問するうちに、このデザインいいなぁーと感じるし、
自分もこうしたい!という思いが生まれる事も多いです。
自分の思い通りに外観を変えるためには、HTMLやCSSを勉強して実装するしかありません。

今回は、自分の思い通りにブログをデザインしたいという目標を叶えるための第一歩を踏み出そうと思います。

ゆくゆくはコピペではなく、CSSを自分で読むことができ、
書くことができるブロガーを目指したいと思います。
連載を重ねる度に、CSSについて詳しくなれる内容にしていきたいので、
ぼくと一緒に学習を重ねていきましょう。

CSSとは

スタイルシートとも呼ばれ、ブログなどWebページの見た目のデザインを定義しておくファイル
HTMLにCSSを読み込ませることで、定義したデザインが反映されます。

文字で読むと、なんのこっちゃ?とも思いましたが、
実例だとこんな感じです。

h2タグを使用した場合の文字色を定義する。

上の図は、以下のようにHTMLとCSSを関連付けています。
①CSSで「<h2>タグを使った場合、文字の色を青色にしますよ」と定義する
②ブログ記事に<h2>タグを使用して、見出しを書く
③画面に表示すると「<h2>タグを使って書いた文字が青色になる」

このように、文字の色、大きさなどに加えて、
例えばマウスを乗せた時の動作など、
細部に渡って自分の思い通りにデザインすることが出来ます。

HTMLはWebサイトを作成する言語
CSSはWebサイトをデザインする言語
両者を関連付けることで、思い通りの外観に変えることが出来る

CSSの記述箇所

CSSはどこに記述すれば良いのでしょうか。
以下の2パターンがあるようです。

1.Webページに直接埋め込む
2.すべてのWebページに一括して反映させる

一つずつ見ていきましょう。

Webページに直接埋め込む

例えば、この記事だけこういうスタイルにしたいなといった場合、
記事を書く際に、CSSを記事内に直接書く方法です。

WordPress管理画面から、エディタを使ってCSSを書きます。
記事内にCSSを記載

同じ記事内に、<h2>タグを書きます。
記事内にHTMLタグを記載

表示すると文字が青色になっています。
個別反映結果

すべてのWebページに一括して反映させる

例えば、<h2>タグを使っている記事すべての文字色を一括で青色にしたいなといった場合、
CSSを外部ファイルとして作っておき、HTMLに読み込ませる方法です。

WordPress管理画面から、子テーマの「style.css」を編集します。
子テーマのCSSファイルに記載

これだけで<h2>タグを使っている記事はすべて青色に変わっているはずです。
試しに、過去の記事を開いてみましょう。
全ての記事に反映した結果
<h2>タグを使っている箇所は、すべて青文字になっています。

次は、CSSの記述内容についてみていきましょう。

CSS(スタイルシート)の記述内容

CSS(スタイルシート)は、
①どこに(セレクタ)
②どんなスタイルで(プロパティ)
③どれだけ適用するか(値)
といった順番で記載していきます。

先ほどの文字色を変える例でみてみると、
h2(セレクタ){
color(プロパティ):#0000FF();
}
となります。
①h2タグを使ったところに
②色を変えるスタイルで
③青色を適用する。
と記載するわけですね。

また、セレクタは以下のように指定することもできます。
div#sidebar span.link

上記の場合は、半角スペースでセレクタを連結しており、「div要素のid=”sidebar”」の内側にある「span要素のclass=”link”」がセレクタです。

他にも以下のように複数指定することもできます。
div#sidebar span.link, div#footer

上記の場合はカンマ(,)で区切って2つのセレクタを指定しています。

今回は基礎を学ぶということで、<h2>タグを使った場合、文字を青色にするCSSを例としています。
セレクタにも様々な種類があるそうなので、次回以降は学びながら徐々にブログの外観を変えていけたらと思います。
とりあえず目標としては「スマホでタイル表示2列にしたい」です。

Wordpress

Posted by te-yama