スポンサーリンク

CSSを書く場所と基本的な書き方

2019年5月4日HTML・CSS

  • 2019年7月21日
    『CSSを書く場所』のそれぞれにCSSを使う場合のメリット・デメリットを追記しました。

今回は『CSSの基本的な書き方』について書いてみたいと思います。

スポンサーリンク

CSSを書く場所

CSSを書く場所は基本的に3つあります。

CSSを書く場所

  • 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内に指定したページ内のスタイルの指定ができることがメリットです。

複数ページのスタイルを指定できないのがデメリットです。

WordPressでのHEAD内のCSS記述

WordPressではheader.phpにCSSを記述すれば適用されますが、header.phpはすべてのページで読み込まれ適用されます。そのためWordPressではHEAD内に指定したときのメリットである「ページごとのスタイルを適用」することができません。

ページごとでCSSを指定したい場合はプラグインを使うと指定することができます。

HTMLタグ内

ページのHTMLタグ内に直接CSSを記述します。特定の箇所にCSSを適用させたい場合に使います。

<タグ style="プロパティ: 値 ;"> ～ </タグ>

HTMLタグ内に指定するメリット・デメリット

特定のタグのみスタイルが適用されます。スタイルをその箇所だけ変更したい場合HTMLタグ内に指定すればそこだけ変更することができることがメリットです。

複数の同じタグにスタイルを適用したい場合はスタグひとつひとつにスタイルを指定しなければならないことがデメリットです。

また「タグにスタイルを記述しない方がいい」とも言われています。

優先順位

CSS外部ファイル、HEAD內、HTMLタグ内にCSSを指定した場合、HTMLタグに最も近いものが適用されます。

優先順位CSS外部ファイル < HEAD内 < HTMLタグ内
きらり

きらり

結耶、外部ファイルとHTMLタグ内にCSSを指定しても外部ファイルのCSSがまったく適用されるわけじゃないでしょ？
結耶

結耶

そうだよ。外部ファイルのCSSはベースになる。同じプロパティがあればHTMLタグ内のCSSが優先(上書き)されて、HTMLタグ内にないものは外部ファイルのCSSが適用されるって感じ～！

また、CSS外部ファイル、HEAD内に書いた場合、ファイルは上から下に読み込まれます。
なので外部ファイル、HEAD内に同じセレクタのCSSがあると後から読み込まれたものが適用されます。

スポンサーリンク

CSSの書き方

ではCSSの基本的な書き方を説明します。

CSSの基本的な書式

セレクタ { プロパティ : 値 ; }

これがCSSの書き方の基本的な書式です。

HTMLタグ内に各場合は、上でも描きましたが、<タグ style="プロパティ:値;">〇〇</タグ> となります。

セレクタ

セレクタに入るものは以下の通りです。

HTML タグ名

例えば、「見出し(h2)の文字の色を赤色に変えたい」と思ったとき以下のように指定します。

h2 {color:red;}

また記事中の１箇所だけ赤色にしたいときはタグ内に以下のように書きます。

<h2 style="color:red;">見出しを赤色</h2>

class名

class(クラス)は、class名がつけられたHTMLタグの範囲内をCSSを適用したい場合に使います。
class名は好きなものをつけることができます。ただし、半角英数字、ハイフン ( – )、アンダースコア( _ )で書きます。

HTML
<h2 class="kirari">これはサンプルです</div>

CSSの指定ではクラス名の前に「. 」コンマを付けます。

CSS
.kirari {
      color:red;
}

id名

idはclassと同じようなものです。
CSSを記述する場合はid名の前に「#」シャープを付けます。

HTML
<h2 id="kirari">これはサンプルです</div>

CSSの指定ではクラス名の前に「# 」シャープを付けます。

CSS
#kirari {
      color:red;
}
Pointclassとidの違い

classとidは同じようなものですが、大きな違いがひとつあります。
classは1ページに複数回でも同じclass名が使えますが、idは1ページに一つしか使えません。

例えば、上の例でいうとclassの場合は、h2(見出し)以外の文字を赤色にしたい箇所(spanやdivなど)で同じクラス名(.kirari)が使えますが、idはh2でid名を指定した場合は指定したh2でしか使えないということじなります。

結耶

結耶

なので記事では後々のことを考えてclassを使った方がいいかもしれませんね。

複数のセレクタに同じスタイルを設定する

複数のセレクタに同じスタイルを適用させたいときはセレクタを「,」カンマで区切って指定します。

例えば、h2とstrong(太字)、class(kirari)の文字の色を赤色にしたい場合

h2 , strong , .kirari {
      color:red;
}

これでづべてのh2とstrong、クラス(kirari)を指定した箇所の文字の色は赤色になります。

特定の箇所のみスタイルを設定する

特定の箇所の要素ににスタイルを適用するときは以下のように指定します。

HTML
<p>p(段落)タグ内の<strong>strong(太字)</strong>部分の文字を赤色にしてみる。</p>
CSS
p strong {
      color:red;
}

『p (半角スペース) strong』と指定すると「<p> ～ </p>の中の<strong>～</strong>部分だけの文字の色を赤色に変更」できるということになります。

範囲となるセレクタとスタイルを適用するセレクタを半角スペースで区切ります。

プロパティ

プロパティ(属性)はさまざまな種類があります。

プロパティを調べたい場合は、「CSS 一覧」などと検索するとプロパティの一覧などを公開しているサイトが出てきますので参考にしてみてください。

CSS3教科書　サイトデザインのための「スタイルシート」規格／片山幸雄／IO編集部【1000円以上送料無料】
¥2,530 （2023/03/21 01:12時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング
スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
¥2,178 （2023/03/25 22:32時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング

値

値はキーワードやpx(ピクセル)や%(パーセント)などの単位などが入ります。
プロパティによってキーワードなどは違うのでプロパティを調べた時に指定できる値も調べておくといいと思います。

単位

値の指定でよく使われる『単位』についてちょっと書いてみます。

単位の種類

■相対的な単位で指定
em(エム)、ex(エックス)、%(パーセント)
■絶対的な単位で指定
mm(ミリメートル)、cm(センチメートル)、in(インチ)、px(ピクセル)、pt(ポイント)、pc(パイカ)
きらり

きらり

「単位」ってこんなに種類があるんだね。
結耶

結耶

こんなにあったんだね～。でも全部は覚えておく必要はないかな？
特に「絶対的な単位」の5つはまず使われないからね。

一般的によく使われる単位はem(エム)、px(ピクセル)、%(パーセント)の3つです。
(ちなみに「1em」は基準となる文字サイズの1文字分となります。)

きらり

きらり

どうしてこの3つがよく使われるの？
結耶

結耶

『レスポンシブ対応』にするためだよ。pxはプロパティによってレスポンシブにならないけどね。
大きい画面でも小さい画面でも対応できるようにするためにこの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;

きらり

きらり

この3つはよく使われてるね。結耶はよくカラー名で指定してるよね。
結耶

結耶

だって何色で指定したかわかりやすいんだもん(^^; w

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やアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。