犬の手も借りたいあなたに最適な記事を届けます

初めてのCSS初心者講座・超初心者向け徹底解説

SHARE

初めまして、いぬのてです。

本記事は、はじめての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
<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を読み込ませることができます。

スポンサーリンク

タグ内

あまりお勧めはしませんが、タグ内に書くこともできます。

HTML
<p style="color:red;">わんわん</p>

上記のように、開始タグの中に、「style=””」と書き込みます。

その「””」の間にCSSを記述します。

このタグにだけCSSを指定したい！という場合に使えます。

しかし、後から見返したときに、しっかり覚えていないと大変なことになります。

CSSの書き方

CSSの書き方は、セレクタ｛プロパティー : 値｝です。

HTML・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の中身の書き方は、たくさんありますので、別記事にてご紹介しています。

【CSS】 詳細No.1！colorプロパティーの使い方完全網羅
【CSS】色のグラデーションの使い方（linear-gradient）

前の記事

【CSS】色のグラデーションの使い方（linear-gradi…

次の記事

TikTokでOBS申請ができない。不具合・対処法