CSSを書く場所と基本的な書き方
- 2023年05月13日『WordPressでCSSを書く場所』を追記しました
- 2019年07月21日『CSSを書く場所』のそれぞれにCSSを使う場合のメリット・デメリットを追記しました。
今回は『CSSの基本的な書き方』について書いてみたいと思います。
(2023年5月13日追記) 「どこにCSSを書けばいいかわからない」というような質問がよくあるのでWordPressを始めたばかりの方向けに『WordPressでCSSを書く場所』もこちらで紹介します。
CSSを書く場所
一般的なWebページを作成する場合のCSSを書く場所は基本的に3つあります。
- CSS 外部ファイル
- <HEAD> ～ </HEAD>內
- HTMLタグ内
外部ファイル
外部ファイルは、主にサイト全体の見た目や複数のページ、複数の箇所で同じスタイルシートを適用させたい場合に使います。
テキストエディタなどでCSSを記述し、」『.css』ファイルを作り、サーバーにアップロードします。各ページのHEAD内にCSSファイルを読み込みさせるための以下のコードを記述し使用します。
<!--各ページのHEAD内に入れる-->
<link rel="stylesheet" href="CSSファイルのURL" type="text/css">WordPressでは、style.cssというCSSファイルが用意されており、header.phpにCSSファイルを読み込みさせるための記述もされているため、WordPressの場合は自分でCSSファイルを作り、ページに読み込みさせるためのコードを記述する必要はありません。
外部ファイルを使うメリット・デメリット
外部スタイルを使うメリットは複数ページの同じタグにスタイルを適用でき、外部ファイル内のスタイルを変更すれば対象ページのタグのスタイルを一度に変更できるのがメリットです。
ただし、外部ファイル内のスタイルを変更すると対象の同じタグすべてのスタイルが変わってしまうため、特定の箇所のスタイルを変えたい場合には変更できないのがデメリットです。
CSS 外部ファイルの書き方
CSS外部ファイルの書き方はテキストエディタでCSSを記述していけばいいのですが、最初に文字化けを防止するためのコードを記述しておくといいでしょう。
@charset "UTF-8"; /*文字化け防止用コード*/
body { color: gray }
p { font-size:16px; }
h1 {font-size:26px;
font-weight:bold; }HEAD内
各ページの<HEAD> ～ </HEAD>内にCSSを記述します。
設定したページ内の対象タグに適用されます。
<!--ページのHEAD内に記述-->
<style type="text/css">
<!--
/*ここにCSSを記述*/
-->
</style>HEAD内に記述するメリット・デメリット
HEAD内に指定したページ内のスタイルの指定ができることがメリットです。
複数ページのスタイルを指定できないのがデメリットです。
HTMLタグ内
ページのHTMLタグ内に直接CSSを記述します。特定の箇所にCSSを適用させたい場合に使います。
<タグ style="プロパティ: 値 ;"> ～ </タグ>HTMLタグ内に指定するメリット・デメリット
特定のタグのみスタイルが適用されます。スタイルをその箇所だけ変更したい場合HTMLタグ内に指定すればそこだけ変更することができることがメリットです。
複数の同じタグにスタイルを適用したい場合はスタグひとつひとつにスタイルを指定しなければならないことがデメリットです。
また「タグにスタイルを記述しない方がいい」とも言われています。
優先順位
CSS外部ファイル、HEAD內、HTMLタグ内にCSSを指定した場合、HTMLタグに最も近いものが適用されます。
きらり
結耶
また、CSS外部ファイル、HEAD内に書いた場合、ファイルは上から下に読み込まれます。
なので外部ファイル、HEAD内に同じセレクタのCSSがあると後から読み込まれたものが適用されます。
2023年05月13日 追記
WordPressでCSSを書く場所
WordPressでは上記の箇所にCSSを記述しようと思ってもどこに書いたらいいのか初心者の方にはわからないと思いますのでこの項ではWordPressでCSSを書く場所について書きたいと思います。
追加CSSに書く
WordPress管理画面の左メニューの［外観］→［カスタマイズ］と進み外観の編集画面を開き、左の項目の一番下に「追加CSS」がありますのでそこにCSSを書いてください。
お使いのテーマによっては独自のCSS編集機能が用意されていることがありますので確認してください。
テーマ Luxeritasをお使いの場合
テーマ Luxeritas(ルクセリタス)にはCSSを編集できるようになっています。
管理画面から［Luxeritas］→［子テーマの編集］と進み、表示されたページの上部に「スタイルシート」というタブがあるのでそちらにCSSを書くのですが、CSSを書く際は書いてあるものの一番下に書くようにしてください。
書いてあるものを消して閉まったり、上に書いたりすると表示されなくなりますので必ず一番下に書いてください。
こちらに書いたCSSは他のテーマに変更したりすると反映されませんのでご注意ください。
ページごとにCSSを設定する
上項で紹介した場所に書いたCSSはサイト全体に反映されます。投稿や固定ページのページを個別にCSSを書きたい場合、ページのHEAD内にCSSを書く必要がありますが、WordPressには書く場所がありません。
ページごとにCSSを設定したい場合はプラグインを使うと、投稿や固定ページのページごとにCSSを設定することができます。またお使いのテーマによってはページごとに設定できるようになっているものもあります。詳しくは下記の記事を参考にしてください。
https://kirari-yums.net/post-9185/ファイルに直接書く
ファイル(style.css)に直接書く方法もありますが、慣れていない方がファイルを直接編集するのは辞めた方がいいと思います。ちゃんと設定しないとサイトが表示されなくなるなどの影響が出る可能性があります。
なのでこちらで紹介するのは辞めておきます。
HTMLタグ内に書く
ブロックエディタでHTMLタグ内に各場合は、「カスタムHTML」ブロックやLuxeritasオリジナルブロックの「定型文挿入エディタ」などにHTMLとCSSを書いてください。
ブロックを「HTMLとして編集」で切り替えそこにCSSを追加しても反映されない(エラー)場合があります。なのでHTMLタグ内にCSSを書きたい場合は「カスタムHTML」や「定型文挿入エディタ」を使ってください。
CSSの書き方
ではCSSの基本的な書き方を説明します。
CSSの基本的な書式
これがCSSの書き方の基本的な書式です。
HTMLタグ内に各場合は、上でも描きましたが、<タグ style="プロパティ:値;">〇〇</タグ> となります。
セレクタ
セレクタに入るものは以下の通りです。
HTML タグ名
例えば、「見出し(h2)の文字の色を赤色に変えたい」と思ったとき以下のように指定します。
h2 {color:red;}また記事中の１箇所だけ赤色にしたいときはタグ内に以下のように書きます。
<h2 style="color:red;">見出しを赤色</h2>class名
class(クラス)は、class名がつけられたHTMLタグの範囲内をCSSを適用したい場合に使います。
class名は好きなものをつけることができます。ただし、半角英数字、ハイフン ( – )、アンダースコア( _ )で書きます。
<h2 class="kirari">これはサンプルです</div>CSSの指定ではクラス名の前に「. 」コンマを付けます。
.kirari {
color:red;
}id名
idはclassと同じようなものです。
CSSを記述する場合はid名の前に「#」シャープを付けます。
<h2 id="kirari">これはサンプルです</div>CSSの指定ではクラス名の前に「# 」シャープを付けます。
#kirari {
color:red;
}
classは1ページに複数回でも同じclass名が使えますが、idは1ページに一つしか使えません。
例えば、上の例でいうとclassの場合は、h2(見出し)以外の文字を赤色にしたい箇所(spanやdivなど)で同じクラス名(.kirari)が使えますが、idはh2でid名を指定した場合は指定したh2でしか使えないということじなります。
結耶
複数のセレクタに同じスタイルを設定する
複数のセレクタに同じスタイルを適用させたいときはセレクタを「,」カンマで区切って指定します。
例えば、h2とstrong(太字)、class(kirari)の文字の色を赤色にしたい場合
h2 , strong , .kirari {
color:red;
}これでづべてのh2とstrong、クラス(kirari)を指定した箇所の文字の色は赤色になります。
特定の箇所のみスタイルを設定する
特定の箇所の要素ににスタイルを適用するときは以下のように指定します。
<p>p(段落)タグ内の<strong>strong(太字)</strong>部分の文字を赤色にしてみる。</p>p strong {
color:red;
}『p (半角スペース) strong』と指定すると「<p> ～ </p>の中の<strong>～</strong>部分だけの文字の色を赤色に変更」できるということになります。
範囲となるセレクタとスタイルを適用するセレクタを半角スペースで区切ります。
プロパティ
プロパティ(属性)はさまざまな種類があります。
プロパティを調べたい場合は、「CSS 一覧」などと検索するとプロパティの一覧などを公開しているサイトが出てきますので参考にしてみてください。
ポチップ
値
値はキーワードやpx(ピクセル)や%(パーセント)などの単位などが入ります。
プロパティによってキーワードなどは違うのでプロパティを調べた時に指定できる値も調べておくといいと思います。
単位
値の指定でよく使われる『単位』についてちょっと書いてみます。
em(エム)、ex(エックス)、%(パーセント)
mm(ミリメートル)、cm(センチメートル)、in(インチ)、px(ピクセル)、pt(ポイント)、pc(パイカ)
きらり
結耶
特に「絶対的な単位」の5つはまず使われないからね。
一般的によく使われる単位はem(エム)、px(ピクセル)、%(パーセント)の3つです。
(ちなみに「1em」は基準となる文字サイズの1文字分となります。)
きらり
結耶
大きい画面でも小さい画面でも対応できるようにするためにこの3つがよく使われるね。
私もほぼこの3つしか使わないよ。
サイトを見てくれるユーザーはパソコンの人もいればスマホで見る人もいます。
どちらでも綺麗に表示されるように単位で指定する場合はem、px、%のいずれかを使うといいと思います。
色の指定
色の指定方法にもいくつかの種類があります。
#RRGGBB
このように書くとわかりづらいかもしれませんが、HTMLでもよく使われみなさんが一番馴染みある指定方法です。
R(赤)・G(緑)・B(青)の値を16進数(英数字)を使ってR・G・Bを2桁で指定したものです。
指定例 ： color:#ff0000;
#RGB
これもよく使われます。これはR・G・Bの値を16進数使ってそれぞれを1桁で指定したものです。
指定例 ： color:#f00;
カラー名
これもよく使われる指定方法です。white(白)、black(黒)、red(赤)などのカラー名で指定します。
指定例 ： color:red;
きらり
結耶
rgb(R,G,B)
これは私もたまーに使います。R・G・Bの値を10進数(0～255)を使って指定する方法です。
指定例 ： color:rgb(255,0,0);
rgb(R%,G%,B%)
R・G・Bの値を%(パーセント)で指定したものです。この指定方法はあまり使われません。
指定例 ： color:rgb(100%,0%,0%);
最後に
CSSは「難しそう」と思う人も多いと思います。ですが記事を書く上で多少のHTMLやCSSの知識は必要です。
複雑なものは確かに難しいこともありますが、文字や背景、余白などの指定はそれほど難しくはありません。
記事を装飾するためにCSSの基本とよく使うスタイルは覚えておくといいかもしれません。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
