CSSはなぜ、どのようにして使われるのか？
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は
HTMLやXHTMLなどで作成されるウェブページのスタイル（装飾の仕方）を指定するスタイルシート言語の1つです。
HTMLはウェブページ内の各要素の意味や情報構造を定義しますが。
CSSではそれら文書構造を損なうことなく。
ウェブページをどのようなスタイル（装飾方法で）で表示・出力・再生するかについて指定することができます。
CSSでスタイル指定することでスタイルに関する記述を一箇所にまとめることができるため。
文書にある余分なタグを減らすことができ。
そのことによってウェブページを軽量化することができるとともに
SEO効果も期待でき、アクセスの向上も見込めます。
CSS書き方の基本
CSSは書き方が決まっていますが。
全角のスペースなどがあると反映しませんので。
注意が必要です
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。
CSSの基本文法
CSSの書き方は決まっていて以下のようになります。
セレクタ {
プロパティ：値
}
セレクタ・プロパティ・値を記述することで「どこの」「何を」「どの様に変える」ということを示します。
例えば
body{
color:green;font-size: 15px
}
と記述すると
body（セレクタ）のタグ内の文字色（プロパティ）を緑（値）に変えなさい+文字の大きさ（プロパティ）は15px（値）にしなさい、
と指定したことになります。
約束事は以下。
プロパティと値は波括弧｛｝でくくります。
プロパティと値はコロン：でつなぎます
上記では複数のプロパティを指定していますが。
複数のプロパティを指定するときは｛｝の中でセミコロン;でつなぎます。
なおコードの間に半角スペースやtab、改行を入れても指定内容は変わりませんが。
全角スペースはNGです。
さらにくぅ足入解説は別記事にまとめます。
CSSはどこにあるの？
CSSはそれぞれの用途に応じてに応じて、以下の３つの場所に記述します。
ちなみにWordPressの場合CSSはどこに格納されているかというと
管理画面から「外観」→「テーマの編集」を開くと出てくる画面の中のスタイルシート (style.css)の部分です。
３つの場所とは
- styleタグ(内部参照)
- インライン
- 外部ファイル（外部参照）
です。
以下の記述をもとにそれぞれ見ていきたいと思います。
<!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS練習</title> </head> <body> <h1>CSSが書かれている場所はどこかな？</h1> <p>３箇所あるんだね</p> </body> </html>
実際の表記は以下のようになります。
CSSが書かれている場所はどこかな？
３箇所あるんだね
ページに直接CSSを書き込む場合（内部参照とインライン）。
HTMLファイル内に書かれたCSSはそのファイル内でしか適用されませんが
そのコードが記述されたページに特化したCSSを書くことができます。
インラインは外部CSSを触る必要がないのでデザインの一部だけを変えたいときには便利ですが
コードが汚くなっていくので。
それは特に必要な場合のみにとどめ。
全記事共通の基本のデザインを外部CSSで作っておき（外部参照）
それとは別に特定のページを変えたいと思ったらそのページのCSSだけを
HTMLのstyleタグ内に書く（内部参照）のが一般的です。
CSSが適用される優先順位
この３つのCSSの優先順位ですが。
インラインのCSSが最優先で。
次が個別ページのstyle内に書いたCSS（内部参照）
外部CSSは優先度が最下位です。
ということは外部CSSで基本的なデザインを整えていても。
個別ページにCSSを書き込めばそのページのみ変更できるので
特に外部CSSをイジる必要がありません。
記述の仕方
styleタグに記述（内部参照）
styleタグで記述する場合には<head></head>内に記述をします。
<h1>タグを赤にしてみます。+
<style>
h1 {color:red}
</style>
を<head></head>内に記述
<head>
<style>
セレクタ {
プロパティ：値
}
</style>
</head>
という形になります。
<h1></h1>の中を赤にするようにCSSを記述します。
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>CSS練習</title>
<style type="text/css">
h1 {color:red}
</style>
</head>
<body>
<h1>CSSが書かれている場所はどこかな？</h1>
<p>３箇所あるんだね</p>
</body>
</html>
実際の表示は以下。
CSSが書かれている場所はどこかな？
３箇所あるんだね
インラインに記述
インラインとは「その場に埋め込む」という意味でタグに直接書き込む方法です。
コードが汚くなるのでどうしても、というときに使います。
例えば<p></p>の文字をそれぞれ青、緑、赤にしたいというような場合。
以下のように記述すると
<!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS練習</title> </head> <body> <h1>CSSが書かれている場所はどこかな？</h1> <p style="color:blue;">ここの文字が赤くなる</p> <p style="color:green;">ここの文字が赤くなる</p> <p style="font-size:18px;color:#f00;">フォントサイズが18pxで赤文字で書く</p> </body> </html>
実際の表示は以下のようになります。
CSSが書かれている場所はどこかな？
ここの文字が赤くなる
ここの文字が赤くなる
フォントサイズが18pxで赤文字で書く
外部CSS
外部スタイルシート（外部CSS）とはCSSファイルをページ（HTMLファイル）とは別に作ったもののことで。
HTMLファイル内には外部に作ったCSSファイルを読み込みなさいという指示を書いておき
それによってブラウザがCSSを読みに行けるようにしたものです。
やり方
１外部スタイルシートを作ります。
CSSファイルを新しく作るためのテキストエディターを開きます。
まずエディタに文字化け防止として文字コードを指定します。
@charset "UTF-8";
次に指定した情報を簡単に記入します。
body {background-color: red}
これは「背景を赤にする」と指定しています。
記入し終えたらそれをショートカットキーctrl+SまたはFile→saveをクリックするとで保存ウィンドウが開きます。
そしてそれに最後の拡張子を.cssとして名前をつけて保存します。
2 HTMLFileを開き外部CSSの読み込みコードを書き入れます。
書き込みコードは
<link rel="stylesheet" href="ファイル名.css">
です。
いかのHTMLは背景が白なんですが。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="external file.css"> <title>CSS練習</title> </head> <body> <div id="headline"> <h1>CSSの練習（見出し1です）</h1> <p>これは段落を意味します</p> </div> <div class="main"> <h2>これは見出し2を意味します。</h2> <p>これも段楽です。</p> <p> <a href="https://maliajoy.com/">トップページ</a> へ戻ります。</p> </div> </body> </html>
と「背景を赤にする」と指定した外部CSSとリンクすると以下のように背景が赤になります。
実際の表示は以下。
エディタについて
テキストエディタはワードパットやメモ帳でも作成することができますが。
無料で高機能なテキストエディタが多数出ていますので。
その中から自分にあったものを選ぶといいかと思います。
ATOMは非常に素晴らしいテキストエディタですが。
初心者にはもっとシンプルなもののほうが扱いやすいと思います。
今回は高機能であるにもかかわらずよりシンプルな「Sublime Text」を使っていきます。
まとめ
CSSを書き込む場所は３つあり。
それぞれ用途に応じて使い分けていきます。
書き方は至ってシンプルで基本は
セレクタ {
プロパティ：値
}
のみです。
ただ様々なタグを使い分けることでデザインを変えることができます。
これについてはまた別記事にしますが。
意外とシンプルで簡単なものであることが理解できたかと思います。
今記事はここまで。
次の記事
この記事へのコメントはありません。