初めまして、いぬのてです。
本記事は、はじめてのCSSとして、超初心者向けのCSS講座になっています。
しかし、簡単なことだけではなく、実はこんなこともできるんだ！と今一度確認できる場でもあります。
既にCSSの知識がある人も知らないことがまだあるかもしれませんので、見ていって下さい。
きっと何か新しい知識が得られるかもしれません。
CSS とは
CSSとはCascading Style Sheetの略です。
これはHTMLとセットで使い、
HTMLに装飾を施すのが、CSSです。
HTMLってなに？という人は、まずは、以下の記事から学習することをおすすめします。
準備中
CSSの読み込み方
CSSの読み込み方は３種類あります。
WordPressの場合は読み込み方を気にする必要はないので、ここはスキップしてください。
- HTMLに書き込む
- HTMLにCSSファイルを読み込ませる
- タグ内に書き込む
基本的に２番目のCSSファイルを読み込ませる方法ですが、場合によっては全部使います。
１つ１つ解説します。
HTML内
HTMLの一番最後に
<style> </style>
と、書きます。
このstyleタグの間にCSSを書いていきます。
<html>
<head>
<title>いぬのて</title>
</head>
<body>
<p>わんわん</p>
</body>
</html>
<style>
p{
color;red;
}
</style>CSSファイル
<link rel=”stylesheet” href=”ファイル名.css”>
これをHTMLのHEAD内に書きます。
そうすることで、そのHTMLはファイル名.cssというファイルを読み込むことになります。
HTMLのファイルは拡張子が「.html」で保存しましたね。
同様にテキストファイルを「.css」で保存することでcssファイルが誕生します。
そのcssファイルにCSSを記述していきます。
ファイルの上部に、
<meta charset="UTF-8">
と、書いてから始めましょう。
覚える必要はありませんが、コンピューター言語の指定です。
一番おすすめ
この書き方を一番おすすめします。
なぜなら、共通化することができるからです。
１HTMLファイルに対して１CSSファイルと、決まっていません。
HTMLファイルとCSSファイルを分けることによって、
いくつものHTMLにおなじCSSを読み込ませることができます。
タグ内
あまりお勧めはしませんが、タグ内に書くこともできます。
<p style="color:red;">わんわん</p>上記のように、開始タグの中に、「style=””」と書き込みます。
その「””」の間にCSSを記述します。
このタグにだけCSSを指定したい！という場合に使えます。
しかし、後から見返したときに、しっかり覚えていないと大変なことになります。
CSSの書き方
CSSの書き方は、セレクタ｛プロパティー : 値｝です。
h1｛
color:red
｝というような感じです。
セレクタ
h1やp、divといった、HTMLで指定したものをセレクタと呼びます。
そのセレクタに何をするか。
プロパティー
色を変えるならcolor、
文字の大きさを変えるならfont-size
のように、何をするかの部分にあたるのをプロパティーと呼びます。
値
そして赤色にするならred
大きくするなら30pxというように、詳細設定の部分を値と呼びます。
特にこの名称を覚える必要はありませんが、
知っている方が、いろんな記事を読んでいるときや
わからないことを検索する時に、求めている記事がhitしやすいので、
余裕があれば、覚えておきましょう。
CSS セレクタ
CSSで指定できるのはHTMLのダグだけではありません。
HTMLにはidとclassがありますね。
これをセレクタにすることができますし、いろいろな指定方法があります。
タグの場合
タグ名｛CSS記述｝
idの場合
#id名｛css記述｝
idの場合は、#をつけてからid名をセレクタにします。
classの場合
.class名｛css記述｝
classの場合は、.をつけてからclass名をセレクタにします。
全てに適応
*｛CSS記述｝
全ての要素に適応されます。
セレクタ① セレクタ②
div p｛ CSS記述 ｝
divの中にあるp全てに適応されます。
セレクタ同士の間には半角スペースが必要です。
タグではなく、classや、idも使用できます。
<div>
□□<p>適応される</p>
□□<li>
□□□□<p>適応される</p>
□□□□<p>適応される</p>
□□</li>
□□<p>適応される</p>
</div>
<p>適応されない</p>
セレクタ① > セレクタ②
div > p｛ CSS記述 ｝
divの1階層下の、p要素に適応されます。
<div>
□□<p>適応される</p>
□□<li>
□□□□<p>適応されない</p>
□□□□<p>適応されない</p>
□□</li>
□□<p>適応される</p>
</div>
<p>適応されない</p>
セレクタ① ＋ セレクタ②
#id名 + p｛ CSS記述 ｝
id名のすぐ下にあるpのみ適応されます。
直下に適応させたい場合に使いましょう。
<div id=”???”>
□□<p>適応される</p>
□□<li>
□□□□<p>適応されない</p>
□□□□<p>適応されない</p>
□□<li>
□□<p>適応されない</p>
</div>
<p>適応されない</p>
セレクタ① ～ セレクタ②
div 〜 p｛ CSS記述 ｝
divタグより後に出てくる、divタグと同じ階層のp全てに適応します。
階層が違えば、適応されません。
<div id=”???”>
□□<p>適応されない</p>
□□<li>
□□□□<p>適応されない</p>
□□□□<p>適応されない</p>
□□</li>
□□<p>適応されない</p>
</div>
<p>適応される</p>
セレクタ① , セレクタ②
div, p｛ CSS記述 ｝
divとp全てに適応します。
これはただの複数指定です。
<div id = “???”>適応される
□□<p>適応される</p>
□□<li>適応される
□□□□<p>適応される</p>
□□□□<p>適応される</p>
□□</li>
□□<p>適応される</p>
</div>
<p>適応される</p>
この<li>も適応されるのはdivにCSSを指定した場合、その中のliにも継承されるからです。
しかし、継承されるのは、CSSの中身にもよりますのでお気を付けください。
CSSプロパティー
CSSの中身の書き方は、たくさんありますので、別記事にてご紹介しています。
