【CSS入門】 まず CSSは、コピペで利用できるようになりましょう！

Error, group does not exist! Check your syntax! (ID: 1)



CSSをコーディングすることは、
ウェブデザイナーやプログラマーではないわたし達ブロガーにとっては非常に難しいことです。
検索してみると、
ウェブサイトには使ってみたいサンプルCSSコードがたくさん見つかります。
わたし達非ウェブデザイナーは、
一からCSSコードを書くのではなく、それらを積極的に利用できるようになりたいものです。
コピペで利用するとはいっても、
CSSがまるでわかっていないとそんなことはできません。
本記事では、
ウェブからたくさん見つかるCSSコードを利用できるだけの
CSSの知識を授けたいと思っています。


1 概要

ウェブページを作成するときに、構造とスタイルを切り離すことは重要なことです。
テキストや画像等はHTMLで構造化して、
それらをどのように装飾／レイアウトするかというスタイルの制御は
CSS（Cascading Style Sheet）という言語で行います。
構造とスタイルを切り離すことで、
構造化したテキストや画像等には触らず、
デザインだけを一括で変更することができるなどの利点が生まれます。
本記事では、
スタイルを書く文法について少しだけ、
そしてスタイルを適用する方法についてご紹介します。

ウェブからたくさん見つかるCSSコードを利用できるだけの
CSSの知識を授けられたら良いなと思っています。

本記事は、下に示す無料レポートを元に作成しています。
清書版PDFをご入り用の方は、訪れてみてください。
http://dotiga.jp/freereport/2016/04/css-by-using-copy-and-paste/


2 CSSの記述方法

ここでは、CSSの記述方法について概説します。

2.1 スタイルの記述文法

スタイルの基本書式は、以下の通りです。

selector  {
property_name1: property_value1;
property_name2: property_value2;
}

上の書式で示されている「selector」「property_name」「property_value」は、
識別子と呼ばれています。
識別子は、表2-1に示すように使います。
表2-1 スタイルの識別子
IntroCSS_01
たとえば、
h2タグのスタイルを指定するときは以下のように記述します。

h2 {
font-size: 24px;
color:#FF0000;
margin-bottom: 20px;
}

また、スタイルの内容が同じだったら、
セレクタを「，(コンマ)」で複数設置することもできます。


2.2 コメントアウト

コメントアウトとは、
CSSファイル内で自分自身がわかりやすいようにちょっとした
メモを入力したりする際に使用します。

/*
これは、コメントです。
*/


2.3 セレクタ

セレクタとは、スタイルを適用する対象のことを言います。

セレクタの種類は20個ほどありますが、よく使われるのが次に示す3つです。

1. 要素型セレクタ（タグ）
2. idセレクタ
3. classセレクタ

この3つさえ知っておけば、充分にCSSを使いこなせるようになります。


2.3.1 要素型セレクタ（タグ）

要素型セレクタ（タイプセレクタ）は、
要素名で対象を指定してスタイルを適用する基本的なセレクタです。
要素とは、たとえばHTMLのh2やh3、pやimgなどのタグが該当します。

書式
element { property_name: property_value;}


適用対象
elementで指定した要素
【サンプル】
HTML部分

<p>雨ニモマケズ</p>

CSS部分
p {
font-size:24px;
}



2.3.2 id（アイディ）セレクタ

idセレクタは、
id属性によって特定のid名がつけられた要素を対象に
スタイルを適用するセレクタです。
1つの文書内では同じid名を重複して指定することはできません。
idセレクタを使用することで、
文書内の場所を一意に特定してスタイルを適用することができます。

書式
#id_name { property_name: property_value; }


適用対象
id_nameを付けた要素
【サンプル】
HTML部分

<p id=”sample”>雨ニモマケズ</p>

CSS部分
#sample {
color: red;
}



2.3.3 class（クラス）セレクタ

classセレクタは、class属性によって
特定のclass名がつけられた要素を対象にスタイルを適用するセレクタです。
class属性はid属性とは異なり、
1つの文書内で同じclass名を重複して指定することができます。
classセレクタを使用することで、
文書内の複数箇所や異なる要素に対して同じスタイルを適用することができます。

書式
.class_name { property_name: property_value; }


適用対象
class_nameを付けた要素
【サンプル】
HTML部分

<p class=”sample”>雨ニモマケズ</p>

CSS部分
#sample {
color: red;
}



3 CSSは3種類の書き方がある

CSSをHTMLに適用する方法は、次の3つです。

1. 外部CSSファイルとして記述する
2. <head>内に記述する
3. HTMLのタグに直接スタイルを記述する

WordPressでは、
テーマのテンプレートを直接編集することなく
テーマのCSSをカスタマイズできるプラグインがありますので、
そちらを使うと良いでしょう。
CSSをカスタマイズするプラグインについては、
『4 CSSをカスタマイズできるWordPressプラグイン』で紹介します。

3.1 外部CSSファイルとして記述する

CSSファイルを作成し、
それをHTMLファイルから参照するのが最もベーシックな方法です。

p.apply_style { color: red; }

このような内容のCSSファイルをstyle.cssという名前で作成したとします。

このスタイル指定は、
class属性がapply_styleであるpタグの文字色を赤にするものです。

HTMLファイルからstyle.cssを参照するには、
headタグ内でlinkタグを使用します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”style.css”>
<title>スタイルの適用方法</title>
</head>
<body>
<p class=”apply_style”>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</body>
</html>
あいうえお


かきくけこ


さしすせそ



WordPressのテーマでは、
「style.css」というファイルが用意されています。
そのファイルにスタイルを書き込んでいけばいいのですが、
この方法だとWordPressテーマをアップデートした際、
CSSをカスタマイズした部分が上書きされて失われます。
WordPressでは、
テーマのテンプレートを直接編集することなく
テーマのCSSをカスタマイズできるプラグインがありますので、
そちらを使うと良いでしょう。


3.2 ＜head＞内に記述する

HTMLファイル内でスタイルを記述するときは、
headタグ内でstyleタグを使用します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<style>
p.apply_style { color: yellow; }
</style>
<title>スタイルの適用方法</title>
</head>


<body>
<p>あいうえお</p>
<p class=”apply_style”>かきくけこ</p>
<p>さしすせそ</p>
</body>
</html>

上記styleタグでは、
class属性がapply_styleである
pタグの文字色を黄色にするスタイルを指定しています。
その結果、表示は次の画像のようになります。

>あいうえお


かきくけこ


さしすせそ

WordPressでは、headタグは「header.php」ファイル内にあります。


3.3 HTMLのタグに直接スタイルを記述する

タグのstyle属性を指定してスタイルを適用する方法もあります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>スタイルの適用方法</title>
</head>


<body>
<p>あいうえお</p>
<p>かきくけこ</p>
<p style=”color: blue;”>さしすせそ</p>
</body>
</html>

style属性でスタイル指定する場合は、
適用範囲はそのタグ内と決まっているので、
セレクタの記述は必要なく、プロパティ名とその値を記述します。

あいうえお


かきくけこ


さしすせそ

<p style=”color: blue;”>さしすせそ</p>
の部分が青文字になっていることが確認できます。
構造とスタイルを切り離すというウェブページ作成の前提を考えると、
タグに直接style属性を指定するこの方法は、
特別な理由がない限り避けるべきでしょう。


4 CSSをカスタマイズできるWordPressプラグイン

WordPressには、WordPressテーマのテンプレートを直接編集することなく、
テーマのCSSをカスタマイズできる「Simple Custom CSS」というプラグインがあります。

テーマのCSSをプラグインを利用してカスタマイズできます。

通常の場合、
WordPressテーマのCSSをカスタマイズする際は、
テーマのテンプレートの中にあるCSSを直接編集します。
しかし、その方法だと、
WordPressテーマをアップデートした際に、
CSSをカスタマイズした部分が上書きされて失われます。
このプラグインを利用すると、
WordPressテーマをアップデートしても
テーマのCSSをカスタマイズした内容が失われることはありません。
つまり、WordPressの運用が楽になり、効率的に運営できます。

4.1 インストール方法

管理画面から検索してインストールして下さい。

WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Simple Custom CSS」

あるいは、
WordPress.org からダウンロードし、アップロードしてインストールして下さい。

https://wordpress.org/plugins/simple-custom-css/



4.2 プラグインの使い方

【管理画面の場所】
このプラグインの管理画面は「外観」の中にあります。

WordPress管理画面 ＞ 外観 ＞ Custom CSS



【Custom CSS】
Custom CSSの画面は、図4.2-1に示すように開きます。
CSSをカスタマイズする内容をここに記述します。
そして、「Update Custom CSS」ボタンをクリックして保存するだけです。
IntroCSS_02
図4.2-1 Custom CSS画面


5 コピペで利用できるCSSコード

ここでは、
コピペで利用できるCSSコードが載っているサイトをいくつか紹介します
探せばもっと見つかりますが、参考として挙げておきます。
表5-1 コピペで利用できるCSSコード 
IntroCSS_03
IntroCSS_04




以上



【参考図書】

[amazonjs asin=”4797372966″ locale=”JP” title=”スラスラわかるHTML&CSSのきほん”] [amazonjs asin=”4797380071″ locale=”JP” title=”スラスラわかるCSSデザインのきほん”] [amazonjs asin=”4797373024″ locale=”JP” title=”作りながら学ぶ HTML/CSSデザインの教科書”]


Error, group does not exist! Check your syntax! (ID: 4)


More from my site