CSS入門!基本から解説 ゼロから始めるHTML/CSS講座Vol02


CSS入門!基本から解説 ゼロから始めるHTML/CSS講座Vol02
目次
  1. ゼロから始めるHTML/CSS講座CSSの基礎と記述方法
  2. CSSとは
  3. CSSの記述方法
  4. セレクタとプロパティ
  5. 課題

ゼロから始めるHTML/CSS講座CSSの基礎と記述方法

CSSとは

CSS(Cascading Style Sheets)とは、HTML文書の装飾やレイアウトをほどこすための言語です。CSSはHTMLで作成した要素に対して装飾をします。

前回の記事「HTMLの基礎知識」で作成した桃太郎の文章では、HTMLを利用し見出し・段落と文章の役割を定義しましたが、デザインは白背景に黒文字のシンプルなものになりました。CSSは、HTMLだけでは実現できない細かなデザインを指定するために利用します。

Webページは「文章の構造を定義するHTML」と「デザインを指定するCSS」のセットで基本的に作られています。

blogtext-css-1

CSSの記述方法

CSSの基本書式は以下のようになります。

blogtext-css-2

HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書いていくのがCSSの基本です。

例では「h1要素の」「文字の色を」「赤にする」と指定しています。

セレクタとプロパティ

CSSを適用する対象を指定するのがセレクタです。セレクタは要素や一部の属性を指定できます。指定したセレクタがHTMLに複数あった場合、全てにCSSは適用されます。属性の指定については別途詳細を説明します。

セレクタで「どこの部分」を指定した後、「{ }」で囲まれた中にプロパティを書き、適用するデザインを決定します。

CSSでは指定できるデザインがたくさん用意されています。例えば「文字の色」「文字サイズ」「背景色」などがあり、この選択肢をCSSのプロパティと呼びます。またCSSのプロパティに対して「どんな値にするか」を指定するものをと呼びます。

プロパティと値の間は「:」(コロン)で区切り、値を指定した後は「;」(セミコロン)をつけます。

実際に「HTMLの基礎知識」で使った、momotaro.htmlの指定箇所にCSSを追記し、ブラウザで閲覧してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
<style>
h1 {
  color: red;
}
</style>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
<a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html> 

css-basic1-639

追記すると、CSSで指定したh1要素の「桃太郎」という文字が赤くなります。

CSSをHTMLに適用させる方法は何種類かあり、今回利用したstyle要素を含め、適用方法の詳細については後ほど説明していきます。

課題

momotaro.htmlにp要素の色を青にするCSSを追記してください。

css-basic-639

NEXT LESSON ☛ HTMLの基本構造

PREV LESSON ☛ HTMLとは


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp