CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値なども解説｜HTML＆CSS入門講座（４）

HTML＆CSS
2021.06.29
この記事は約10分で読めます。

はじめに

　HTML＆CSS入門講座の第四弾として、CSSの初心者入門、基本的な書き方、セレクタ、プロパティ、値ついて紹介します。

　　この記事を読むと次の疑問について知ることができます。

● CSSを書く場所はどこに書くの？
a. 別ファイルにスタイルシート（CSSアイル）を作り、HTML内で指定する方法
b. HTML文書内のstyleタグを利用する方法
c. HTML文書内のhtmlタグ内直接CSSを書く方法
●CSSの書き方の基本はどのように書くの？
a. CSSの基本文法
　i. セレクタ
　ii. プロパティー
　iii. 値
　iv. プロパティと値は波括弧で囲う
　v. プロパティと値はコロン（:）でつなぐ
　vi. 複数のプロパティを指定するときはセミコロン（;）で区切る
●セレクタの基本的な書き方はどのようにするの？
a. タグ名で適用先を指定
b. id名で指定
c. class名で指定
d. 適用先を複数指定する場合
e. 絞り込み指定する場合
● 代表的なプロパティと値の基本はどのようなものなの？
a. 文字の大きさ
b. 文字の色
c. 文字の配置
d. 背景色
e.線で囲う、引く
　i. 線で囲う
　ii.上下左右のどれかに線を引く
f. コメントアウト
　HTML＆CSS入門講座（３）では、「HTMLの初心者入門、基本的な書き方とタグの使い方」などについて解説してきました。
 
　ここでは、HTML＆CSS入門講座（３）で書いたHTML文書に色々と修飾していきます。

CSSを書く場所

　HTML文書に色々修飾するCSSを書く方法には、大きく分けて３つあります。

  1. 別ファイルにスタイルシート（CSSアイル）を作り、HTML内で指定する方法
  2. HTML文書内のstyleタグを利用する方法
  3. HTML文書内のhtmlタグ内に直接CSSを書く方法

別ファイルにスタイルシート（CSSアイル）を作り、HTML内で指定する方法

　CSSファイル（スタイルシート、ファイルの拡張子「.css」）を作り、そのスタイルシートをHTML文書のheadタグ内で読み込みます。

　ここで、スタイルシートの名前を「testcss.css」とします。

　このHTML文書のheadタグ内に書き込みます。

<head>
<link rel="stylesheet" href="testcss.css">
</head>
　HTML文書内でスタイルシート（testcss.css）を読み込む設定となります。

HTML文書内のstyleタグを利用する方法

　この方法は、HTML文書内で「styleタグ」を使って、HTML文書内の指定部分の修飾に使います。

　styleタグもheadタブ内に書きます。

　その書き方の例は次の通り。

<head>
<style>
body {
color: blue;
}
</style>
</head>
　上述の意味は、HTML文書の「bodyタグ内の文字色を全て青(blue）にしなさい。」と言う意味になります。

HTML文書内のhtmlタグ内に直接CSSを書く方法

　headタグには色々ありますが、ここでは段落タグの「pタグ」の文書の部分に「文字色を赤」にする方法を載せます。

　例を次に載せます。

<p style="color: red">
　パソコン上でHTML、CSSを書いていくための帳面と鉛筆に相当するものを用意する必要があります。
</p>
　上述の例は、「（パソコン上でHTML、CSSを書いていくための帳面と鉛筆に相当するものを用意する必要があります。）の文字色を赤にしなさい。」とHTML文書内の一部の文字などの修飾する場合に利用します。

CSSが適用される優先順位

　上述の３つの方法でHTML文書内の文字などの修飾方法を説明しましたが、この優先順位はどのなるでしょうか？
 
　その答えは、次の通り。
 
最優先　：　HTML文書内のhtmlタグ内に直接CSSを書く方法
２番目の優先　：　HTML文書内のstyleタグを利用する方法
最も優先順位が低い　：　別ファイルにスタイルシート（CSSアイル）を作り、HTML内で指定する方法
　つまり、HTML文書内のhtmlタグに近い順に適用されると思えばよいでしょう。
 
　Meryエディターを立ち上げ、「新規作成」のあと、「表示」⇒「編集モード」⇒「CSS」の順にクリックし、「ファイル」⇒「名前を付けて保存」で名前を「testcss.css」を記入して「保存」をクリックすると、空のtestcss.cssファイルが作成されます。
 
　このファイルに以下のCCSを書いてください。
 
@charset "UTF-8";
body{color:green}
h2{color:orange}

　ここで、<@charset "UTF-8";>　：　文字コードをUTF-8に設定
　　　　　body {color: Green;}　：　HTML文書のbodyタブの文書を全て緑に設定
　　　　　h2{color:orange}　：　見出しのh2の文字をオレンジ色に設定

　なお、testcss.cssファイルは、htmlファイルと同じホルダー内に作ってくださいね。

CSSの書き方の基本

　スタイルシートを書く上での決まりがありますので、それを次に挙げておきます。
 
セレクタ（HTMLタグ名、class名、id名など）
↓
h3 {color: white;  background-color: blue}
　　　↑　　　↑　　　　　↑　　　　　　　↑
プロパティ　　値　　　プロパティ　　　　　値
 
  • セレクタ
    セレクタ（HTMLタグ名や、class名、id名など）により指定された部分にCSSの修飾が行えます。
  • プロパティ
    セレクタで指定した部分に何を（色、文字、線、背景）修飾するのかを設定します。
  • 値
    プロパティで指定したものを、どのように（どんな色、文字の大きさ、線を引く際の線の太さ、背景の色など）修飾するのか？を設定します。
  • プロパティと値は波括弧で囲う
  • プロパティと値はコロン（:）でつなぐ
  • 複数のプロパティを指定するときはセミコロン（;）で区切る
  • 見易いようにコードの間に半角スペースやtab、改行を入れてもOK

セレクタの基本的な書き方

　HTMLタグ名、 id名、 class名、 適用先を複数指定する場合、絞り込み指定する場合について。順次説明していきます。

タグ名で適用先を指定

　HTMLのタグ名を適用先に指定する場合は、タグ名 {プロパティ：値}のような書き方をします。

　例として、pタグの文字の大きさを通常の2倍の大きさに設定。

p {font-size: 2.0em}
　上述の文をスタイルシートに書き込み、HTML文書をブラウザーで表示して見て下さい。
 
　pタグの文字が通常の2倍になっていることが分かります。

 id名で指定

　 id名で指定する場合は、#id名{プロパティ：値}のような書き方をします。

　例として、id名(special_color）で指定したpタグの文字をカラーコードで設定。

#special_color {color: #A9A9A9}

class名で指定

　 class名で指定する場合は、.class名{プロパティ：値}のような書き方をします。

　例として、class名(char_color_red）で指定したpタグの文字を赤に設定。

.char_color_red {color: red}

適用先を複数指定する場合

　文字の色、文字の大きさ、文字の配置などを一緒に一度に指定するような場合です。

　例として、見出しのh3タグに対して、文字の色、大きさ、文字の配置などを設定。

h3 {color: black; font-size: 2.0em ; text-align: center}

絞り込み指定する場合

　文書内の指定する部分を絞っていく方法で、絞り込んでいくためのHTMLタグ名、id名、calss名などを半角スペースで繋いで、最後のセレクタにCSSの指定をしてやります。
 
　例として、この文書のul箇条書きの項目2の部分に赤色に設定。
 
.ul span {color: red}

代表的なプロパティと値の基本

　文字の大きさ、 文字の色、 文字の配置、背景色、 線を引く、囲う、 コメントアウトなどについて順次説明ししていきます。

文字の大きさ

　書き方は、次の通り。

セレクタ {font-size: 〇〇px}　：　pxは文字の縦の大きさ（例、16px）
セレクタ {font-size: 〇〇em}　：　emは現在の文字の大きさの倍率を指定（例、1.5em）
　実例を以下に載せます。(ul箇条書きの部分を通常のフォントサイズの2倍とする設定）
 
ul {font-size: 2.0em}

文字の色

　書き方は、次の通り。

セレクタ {color: 色名}　：　色名は文字の色を英語表記（例、red）
セレクタ {color: カラーコード}　：　カラーコード（例、#ff0000）
実例を以下に載せます。(ol箇条書きの部分の文字色をネイビーブルーとする設定）
 
ol {color: navy}

文字の配置

　書き方は次の通り。

セレクタ {text-align: left}　：　指定したセレクタの文書を左寄せに配置（デフォルト）
セレクタ {text-align: center}　：　指定したセレクタの文書を中央に配置
セレクタ {text-align: right}　：　指定したセレクタの文書を右寄せに配置
実例を以下に載せます。(ol箇条書きの部分の文字配置を右寄せとする）
 
ol {text-align: right}

背景色

　書き方は次の通り。

セレクタ {background-color: 色名}　：　色名は文字の色を英語表記（例、yellow）
セレクタ {background-color: カラーコード}　：　カラーコード（例、#ffff00）
実例を以下に載せます。(見出しh3の背景色を黄色のカラーコードで指定）
 
h3 {background-color: #ffff00}

線で囲う、引く

線で囲う

　書き方は次の通り。

セレクタ {border: 線の種類 線の太さ 線の色}

ここに、
線の種類　：　solid（実線）、dotted（点線）、dashed（破線）、double（二重線）など
線の太さ　：　px指定（例、2px）
線の色　：　color指定と同じ設定

　実例を以下に載せます。(p段落の周囲に赤の破線で囲む指定）
 
p {border: 2px dashed red}

上下左右のどれかに線を引きたい場合

　書き方は次の通り。

  • セレクタ {border-top: 線の種類 線の太さ 線の色}　：　上にだけ線を引く
  • セレクタ {border-bottom: 線の種類 線の太さ 線の色}　：　下にだけ線を引く
  • セレクタ {border-left: 線の種類 線の太さ 線の色}　：　左にだけ線を引く
  • セレクタ {border-right: 線の種類 線の太さ 線の色}　：　右にだけ線を引く

ここに、
線の種類　：　solid（実線）、dotted（点線）、dashed（破線）、double（二重線）など
線の太さ　：　px指定（例、2px）
線の色　：　color指定と同じ設定

　 
p {border-bottom: 5px double navy}
実例を以下に載せます。(p段落の文の下にネイビーブルーの二重線を引く）

コメントアウト

　書き方は次の通り。

 /* この中のコメント文はCSSに反映されません */

　 
 /*p段落の文の下にネイビーブルーの二重線を引く設定です。*/
p {border-bottom: 5px double navy} 
実例を以下に載せます。(p段落の文の下にネイビーブルーの二重線を引く設定の上に「 /* コメント*/」として記入）
 

おわりに

　如何だったでしょうか？

　CSSを書く場所はどのに書くの？、別ファイルにスタイルシート（CSSアイル）を作り、HTML内で指定する方法、HTML文書内のstyleタグを利用する方法、HTML文書内のhtmlタグ内直接CSSを書く方法、CSSの書き方の基本はどのように書かうの？、CSSの基本文法、セレクタ、プロパティー、値、プロパティと値は波括弧で囲う、プロパティと値はコロン（:）でつなぐ、複数のプロパティを指定するときはセミコロン（;）で区切る、セレクタの基本的な書き方はどのようにするの？、タグ名で適用先を指定、id名で指定、class名で指定、適用先を複数指定する場合、絞り込み指定する場合、代表的なプロパティと値の基本はどのようなものなの？、文字の大きさ、文字の色、文字の配置、背景色、線で囲う、引く、 線で囲う、上下左右のどれかに線を引く、コメントアウトなどについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました