Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • Webサイト制作の基本となるCSSとは?

Webサイト制作の基本となるCSSとは?

2018/4/24 2019/10/14
いろは
Webサイト制作の基本となるCSSとは?
  • B!

MENU

  • 1 CSSの歴史
  • 2 CSSの基本
    • 2.1 CSSの構造
    • 2.2 CSS記述方法
  • 3 CSSの読み込み方法
  • 4 CSSプロパティの一例
  • 5 まとめ

CSSは、Web制作においては必須の基本言語のひとつで、Cascading Style Sheets (カスケーディング・スタイル・シート)の頭文字からCSSと呼ばれています。

CSSと同じく、Web制作で必須となるHTMLという言語もありますが、HTMLは文章の構造を指定するのに対して、CSSはその文章のレイアウトや装飾のようなデザイン、つまり見た目を指定します。

HTMLについては以下の記事をご覧ください。

Webサイト制作の基本となるHTMLとは?

CSSの歴史

CSSは1994年に誕生しました。CSSにはLebel[レベル](=バージョン)があり、CSS Level1(CSS1)、CSS Level2(CSS2)とレベルがあがり、現在はCSS Level3(CSS3)が主流となっています。
HTMLと同じようにそれぞれのレベルで記述する際のルールが異なる場合があります。

CSS3ではアニメーションやグラデーション、グリッドレイアウトなどを扱うことが出来るようになっていて、今まではJavaScriptや画像を使わないとできなかったようなことがHTML5とCSS3で実現可能となりました。

CSSの基本

CSSの構造

CSSを記述する際の基本構造は、「セレクタ」、「プロパティ」、「値」で構成されます。

セレクタ
セレクタはスタイルを適用させる対象です。HTMLタグやHTMLタグに指定されているID属性、class属性などを指定します。
プロパティ
プロパティはセレクタにどういった効果を与えるかを示します。例えば文字の色を変えたければcolorプロパティ、文字の大きさを変えたければfont-sizeプロパティを使用します。
値
プロパティに指定する具体的な内容が値です。文字を赤くしたい、文字サイズを24pxにしたいという場合の「赤(=red)」、「24px」が値となります。

セレクタでCSSを適用させる対象を指定し、プロパティ・値で具体的なデザインを指定します。また、プロパティと値は常に一対となっているます。

CSS記述方法

CSSの記述の形は一定なので、まずは基本の記述の型を覚えましょう。
セレクタ、プロパティ、値の3つの要素を使った基本形は以下のようになります。

セレクタ{
  プロパティ: 値;
}

まず、セレクタを記述します。
「{」と「}」の中でプロパティと値を記述します。
プロパティに対して、「:」を挟んで値を指定します。そして最後に「;」を記述します。

例えば、pタグで囲まれた文字色を赤くしたい場合は以下のように記述します。

p{
  color: red;
}

上記のスタイルを適用させるとpタグで囲まれているテキストが赤色になります。

CSSの読み込み方法

CSSを書いただけで終わりではありません。作ったCSSをHTMLへ適用させることで、はじめてHTMLにCSSの効果が反映されます。

CSSの読み込みは、CSSを記述した外部ファイル(.css)を使う方法、HTMLファイル内で直接記述する方法などがあります。
詳しくは以下の記事にまとめてあります。

HTMLでCSSを読み込む3種類の方法

基本的には外部ファイル(style.cssなどを用意する)を使用すると良いでしょう。
なお、外部ファイルを読み込む場合はHTMLのlinkタグを使用します。

CSSプロパティの一例

width
widthは要素の横のサイズ、つまり“幅”を指定するプロパティです。
div{
  width: 300px;
}
height
heightは要素の縦のサイズ、つまり“高さ”を指定するプロパティです。
div{
  height: 300px;
}
font-size
font-sizeは要素のテキストサイズを指定します。
p{
  font-size: 16px;
}
color
colorは要素のテキストカラー(色)を指定します。
p{
  color: black;
}
background-color
background-colorは要素の背景色を指定します。colorプロパティと間違えないように注意しましょう。
div{
  background-color: #606060;
}

プロパティの種類は数多くありますが、目的別など大分類にできるので、用途に合わせて少しずつ覚えていきましょう!

まとめ

  • CSSはレイアウトや装飾などのデザイン、を指定して見た目を表現する
  • CSSはセレクタ、プロパティ、値の3つの項目で構成されている
  • B!
Webサイト制作の基本となるCSSとは?
いろは
Webのいろは

Relate Post

  • HTMLでCSSを読み込む3種類の方法
    HTMLでCSSを読み込む3種類の方法
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <p>|正しい段落の使い方・記述方法
    <p>|正しい段落の使い方・記述方法
  • Webページの構造をブロックごとに見てみよう!
    Webページの構造をブロックごとに見てみよう!

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

Copyright © 2023 Webのいろは All Rights Reserved.