自分で作る選択を!初心者でもできるホームページ・ブログの始め方・作り方

WEBST8

初心者向けCSS(スタイルシート)の 基本的な書き方を徹底解説

CSS

【初心者向け】CSSの基本的な書き方・ルールを徹底解説

2019年1月21日

今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。
 

CSSの3つの方式 インラインスタイルシート 内部スタイルシート 外部スタイルシート
 

CSSを使ってホームページを装飾を変更したいんですけど、みても全然わからなくって・・・

CSSの基本がわかれば、ホームページのちょっとした見た目を変更したり、ブログをより見やすくしたりすることができます。今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明していきますね。

 

 

CSSとはWebページの見た目を整える言語

HTMLで作成したWebページのスタイルを整えるため、CSS(Cascading Style Sheets)という言語を利用します。
 

HTMLとCSSは何が違うんですか??

たとえば、HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。

 

■人に例えたイメージ
人に例えたイメージ)HTMLは人の構造を定義。CSSで十人十色に見た目を調整
 

具体的には「この見出しは背景をグレーで」「テキストを中央揃えで」「文字色は白で」などHTMLで定義した内容をどんな見た目に表示させるかをCSSで設定していきます。
 

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
 

■CSSを適用していない場合のH1タグ。見た目が装飾されていない。
CSSを設定していない場合のh1タグ
 

■CSSを適用した場合のH1タグ。見た目が装飾されている。
CSSを設定した場合のh1タグ
 

■上記のソースコード

 

HTMLは文書の構造を定義する言語、セットで使うCSSは文書の見た目を調整する言語という点を覚えておきましょう。

 

▲▲目次に戻る▲▲


 

CSSの3つの書き方

CSSの書き方ですが、大きく3つの方式があります。
 

CSSの3つの方式 インラインスタイルシート 内部スタイルシート 外部スタイルシート
 

CSSの3つの書き方

  • 【インラインスタイルシート方式】HTMLタグに直接CSSを書き込む形式
  • 【内部スタイルシート】headタグにまとめてCSSを書き込む形式
  • 【外部スタイルシート】外部ファイルにCSSをまとめて書き込む形式

 
それでは、順番に説明していきます。
 

【書き方1】インラインスタイルシートでのCSSの書き方

インラインスタイルシート形式 例 style="color:red"
 

インラインスタイルシートは、HTMLタグに直接CSSを書き込むやり方です。 <h1 style="color:red;">のように、タグに直接CSSを書き込みます。
 

CSS インラインスタイルシート形式での書き方
 

インラインスタイルシート形式でのCSSの書き方

  • 【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
  • 【例】 <h1 style="color:red;">赤色の見出し</h1>

後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。

 

■使用例

 

■表示例
はじめてのCSS 見出しが赤文字に
 

■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。
 

■使用例  文字色が白色で背景がライトブルーで枠線がスカイブルー

 

■表示例
CSS インラインスタイルシート形式 文字色白色・背景lightblue・枠線skyblue
 
 

インラインスタイルシート形式の場合、以下の特徴があります。

インラインスタイルシート形式の特徴

  • 各タグにそれぞれ個別に設定できる
  • 「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる

 
 

【書き方2】内部スタイルシートでのCSSの書き方

内部スタイルシート形式の基本

内部スタイルシート形式
 

内部スタイルシートは、headタグにまとめてCSSを書き込む形式です。<head>タグの中に下記のようにスタイルを記述します。
内部スタイルシート CSS のプロパティの書き方
 

(※)セレクタとはスタイルを適用する対象のことです。たとえば、h1やpなどのhtmlタグなどが相当します。少し難しくなりますが、セレクタの詳細については「知っておきたいCSS セレクタの優先順位・詳細度・継承」を合わせてご参照ください。

(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。

(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート
 

複数のプロパティの設定をする場合、インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。
 

■内部スタイルシートでのCSS設定例

 

■表示例
CSS 内部スタイルシート形式 文字色白色・背景lightblue・枠線skyblue
 

複数のセレクタに対してスタイルを設定

複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。
 

■設定例

 

■表示例
CSSのサンプル
 

h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。
 

内部スタイル形式は、下記のような特徴があります。

内部スタイルシート形式の特徴

  • 1枚のWebページ全体にスタイルを適用できる
  • 複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない)

 

id属性とclass属性を使ってセレクタに指定する方法

HTMLにつけるid属性とclass属性
 

htmlの各タグにはid属性やclass属性というものが設定できます。内部スタイルシートや後述の外部スタイルシートでは、セレクタにid名やclass名を指定もできるので、あわせて覚えておきましょう。
 

■記述例 (内部スタイルシート形式で記述)

 

■表示例
CSS サンプルid名がtop-hとついているタグの背景が赤色、class名がblue-textと付いているタグが青文字
 

例 htmlタグにid名やclass名を設定

<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>

 

HTMLのタグを書く際に<HTML要素名 id="任意のid名">、あるいは、<HTML要素名 class="任意のclass名">と記述します。CSS側でidやclassをセレクタとして指定する際は、id名を「 #id名 」、class名を「 .class名 」で指定します。
 

●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承
 

id名はHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。
 

idやclassを設定することでCSSでレイアウト装飾する際に「このid名がついているタグは背景を赤色にする」、あるいは「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。
 
 

【書き方3】外部スタイルシートでのCSSの書き方

外部スタイルシート(CSSファイル)参照
 

最後に3つ目の書き方は、外部に作ったCSSファイルを参照する方式です。
 

まず、任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。次に、HTMLファイル側では作成したCSSファイルを参照する設定をします。
 

外部スタイルシートの読み込み設定

外部スタイルシートの読み込み設定


 

【手順1】CSSファイルにcssを記述する

まずは、「style.css」などのように拡張子をcssにしたcssファイルを作成します。cssファイルの中身には内部スタイルシート形式と同様にcssを記述します。
 

■外部CSSファイル(style.css)

 

書き方としては下記の通りです。

@charset "UTF-8";
セレクタ1{
プロパティ1:値;
プロパティ2:値;
...
}
セレクタ2{
  ...
}

 

●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承
 

(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。
 

【手順2】htmlファイルでCSSファイルを参照する設定をする

■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">
 

■HTMLファイルの例 cssフォルダにあるstyle.cssを参照

 

格納場所の指定方式は画像の格納場所の指定方法と同じです。(相対パスの参考:画像の格納場所の指定方法 | HTMLの基本とタグの一覧)
 

■表示例
はじめてのCSS 見出しが赤文字に
 

外部スタイルシートの場合は、下記のような特徴があります。

外部スタイルシート形式の特徴

  • 複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)

 

▲▲目次に戻る▲▲


 

3つの方式の特徴まとめ

CSSの3つの書き方の特徴のまとめです。
 

方式メリットデメリット
インラインスタイルシート各タグにそれぞれ個別に設定できるタグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い
内部スタイルシート1枚のWebページ全体にスタイルを適用できる複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない)
外部スタイルシート(CSS)ファイル参照各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む)慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。

 

なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。
 

競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。
 

詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。
 
 

主なCSSプロパティ

主要なCSSプロパティ 文字・枠・背景・幅高さ・余白・位置など
 

実際によく使うCSSの設定項目や設定値の例を下記に挙げます。詳しくはそれぞれのリンクで説明していますのであわせてご参考ください。
 

カテゴリプロパティ意味
文字に関するスタイルfont-size文字の大きさ(フォントサイズ)
color文字の色
font-weight文字の太さ
font-family文字の字体
text-decorationテキストの装飾
枠線に関するスタイル
https://webst8.com/blog/css-border/
border枠線
border-(※各辺)枠線の各辺
(上top/下bottom/右right/左left)
border-radius枠の丸さ
背景に関するスタイル
https://webst8.com/blog/css-background/
background-color背景の色
background-image背景の画像
background-repeat背景の画像の繰り返し
background-position背景画像の表示開始位置
background-attachment背景画像の固定・移動
background-size背景画像のサイズ
background背景全般
横幅と高さに関するスタイルwidth横幅
height高さ
余白に関するスタイル
https://webst8.com/blog/css-padding/
https://webst8.com/blog/css-margin/
margin外部余白
margin-(※各辺)外部余白の各辺
(上top/下bottom/右right/左left)
padding内部余白
padding-(※各辺)内部余白の各辺
(上top/下bottom/右right/左left)
ボックスサイズの算出方法を指定box-sizing枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるかどうか
テキストに関するスタイルtext-align水平方向の位置
line-height行の高さ
表示に関するスタイルdisplay表示
位置に関するスタイル
https://webst8.com/blog/css-position/
position位置
top上からの位置
bottom下からの位置
left左からの位置
right右からの位置
z-index重なりの順序指定
横並び(浮動)に関するスタイル
https://webst8.com/blog/css-float/
float横並び(浮動)
clear横並び(浮動)の解除
影に関するスタイルbox-shadowボックスの影
text-shadowテキストの影

 
 

まとめ

まとめです。今回は、今回は、初心者の方を対象にCSSの基本的な書き方・ルールについて説明しました。
 

■人に例えたイメージ
人に例えたイメージ)HTMLは人の構造を定義。CSSで十人十色に見た目を調整
 

CSSには「インラインスタイルシート形式」「内部スタイルシート形式」「外部スタイルシート形式」の3つ方式があります。

CSSの3つの書き方

  • 【インラインスタイルシート方式】HTMLタグに直接CSSを書き込む形式
  • 【内部スタイルシート】headタグにまとめてCSSを書き込む形式
  • 【外部スタイルシート】外部ファイルにCSSをまとめて書き込む形式

 

CSSの3つの方式 インラインスタイルシート 内部スタイルシート 外部スタイルシート
 

なお、CSSを使った装飾の仕方全般については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-

Copyright© WEBST8 , 2020 All Rights Reserved Powered by AFFINGER5.