情報活用編プラス

第2章「コミュニケーションと情報デザイン」

IP01-08

WebページとWebサイトの仕組み

1 学習目標

2 チャット学習①

3 WebページとWebサイトの構造

4 ポイント整理①

5 HTMLの基礎

6 HTMLの記述方法

7 ✏️HTMLを記述しよう

8 CSSの基礎

9 ✏️CSSを記述しよう

10 ✏️CSSを変更しよう

11 ポイント整理②

12 チャット学習②

13 ✏️学習のまとめ問題

14 次回予告

8. CSSの基礎

CSSの基礎

学習の目的

  • 1. CSSとは

  • 2. CSSの例

  • 3. CSSの書き方

  • 4. よく使うCSS

これまでHTMLを使ってWebページの文書構造を記述しました。

Webページをより良く見せるために、装飾をするときに使うものがCSSです。

CSSとは何か学習しましょう。

1. CSSとは

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略でWebページの見た目(デザイン)を指定するための言語です。CSSのことを単にスタイルシートと呼ぶこともあります。

CSSを使うと以下のような見た目の変更ができます。

  • 文字の色や大きさを変える
  • 背景色を付ける
  • 枠や余白を付ける
  • レイアウトを整える

HTMLはWebページに内容や構造を決める言語だったのに対し、CSSはWebページの見た目やデザインを決める言語という違いがあります。

CSSも言語なんですか？難しそう・・・

CSSは言語といっても、条件や繰返しなどの論理的な処理は記述できません。見た目(スタイル)を定義するための言語です。

CSSはHTMLを記述したファイルに定義することもできますが、別のファイルにCSSのみを記述することができます。

別のファイルに記述すると、使いまわしができ汎用性が上がります。

実際に例を見てみましょう。

2. CSSの例

今回のファイルの構成を確認しましょう。

HTMLファイルとCSSファイルの構成を確認します。CSSファイルはHTMLファイルと同じ階層のCSSフォルダの中に保存されています。

次のリンクからデータをダウンロードして展開しましょう。

CSS確認用データをダウンロードする

zipファイルを展開すると「ip0108k2.html」ファイルと「css」フォルダがあります。「ip0108k2.html」をダブルクリックして表示して見ましょう。

Webブラウザでは次のように表示されます。

すごい！ページタイトルが変わりましたね。

CSSでページタイトルに装飾をつけてます。

どのような指定をしているか確認しましょう。

参 考
<link rel="stylesheet" href="css/style.css">

HTMLからCSSを使うためには、HTML側でCSSを使う指定を行います。

具体的には、<head>タグで下記のように指定をします。

<link rel="stylesheet" href="利用するスタイルシート">

今回の環境では「cssフォルダの中にあるstyle.cssファイル」を使うので次のような指定をします。

<head>
    <link rel="stylesheet" href="css/style.css">

</head>

3. CSSの書き方

次のコードは、例で使っているCSSです。どのように記述されているか確認します。 

h1 {
    background-color: #004080;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

CSSは、「セレクタ＋中カッコ{}の中にスタイルを定義」という形式で記述します。

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

セレクタとは、デザインを指定する対象のことで、プロパティはどのような見た目にするかデザインの内容を指定する項目のことです。

CSSの記述形式に合わせて、実際の記述を確認すると次のようになります。

上記のスタイルはセレクタに「h1」が指定されているので、h1タグの要素に対するスタイルの設定ということがわかります。

セレクタでどの要素のスタイルを設定するか指定します。

このCSSで指定しているスタイル指定は次のとおりです。

プロパティ名 値 説明
background-color #004080 要素の背景色を指定します。ここでは「濃い青色」に設定されています。色はRGBの16進数コードでも指定できます（`#004080` は深めの青）。
color white テキストの文字色を指定します。ここでは「白色」に設定されています。(#FFFFFFとwhiteは同じ指定)
padding-top 15px 要素の内側の上の余白を指定します。文字と枠の間に15ピクセルのスペースを空けます。
padding-bottom 15px 要素の内側の下の余白を指定します。文字と枠の間に15ピクセルのスペースを空けます。
text-align center テキストの横方向の位置揃えを指定します。centerは中央揃え、leftは左詰め、rightは右詰めになります。

このCSSでページタイトルの見た目を変えています。

続いて、その他の見た目を整えていきましょう。

4. よく使うCSS

よく使われるCSSを見ていきましょう。

文字の見た目を変える

説明 プロパティ名 指定方法
文字の書体を変える font-family font-family: Arial;
※色々な書体があります。
詳しくはインターネットで検索してみましょう。
文字色を変更する color color: red;
color: #FF0000;
文字の大きさを変える font-size font-size: 24px;
文字の位置をそろえる text-align text-align: center;(中央ぞろえ)
text-align: left;(左ぞろえ)
text-align: right;(右ぞろえ)

例

color: red;
font-seze: 24px;
text-align: center;

スタイル適応例

この指定は

  • 文字色：赤
  • 文字サイズ：24px
  • 文字位置：中央

という指定です。

背景や枠を変える

説明 プロパティ名 指定方法
背景色を変更する background-color background-color: yellow;
background-color: #FFFF00;
枠線をつける border border: 1px solid black;
※solid：実線
　dashed：点線
　double：2重線
枠線の角を丸くする border-radius border-radius: 10px;
※数値が大きいほど角が丸くなります。

例

background-color: yellow;
border: 3px dashed black;
border-radius: 10px;

スタイル適応例

この指定は

  • 背景色：黄色
  • 枠線：太さ3px、点線、黒色
  • 枠の角の丸さ：角を10px分丸くする

という指定です。

位置や余白を整える

説明 プロパティ名 指定方法
要素の外側の余白をつける margin margin: 20px;
要素の内側の余白をつける padding padding: 10px;
幅を指定する width width: 300px;
高さを指定する height height: 150px;

例

※内側の枠のCSS

width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
border: 1px solid;

スタイル適応例

少しわかりにくいかもしれませんが次の余白を設定しています。
・内側に横200px、高さ100pxの四角を作成
・内側の四角と外側の四角の余白(margin)が20px
・内側の四角と文字「スタイル適応例」の間の余白(padding)が10px

このように、CSSを使うとタグだけではできなかった、Webページの装飾が出来ます。

また、1つのHTMLをCSSの指定だけでパソコン用Webページとスマホ用Webページを変更することが出来ます。これをレスポンシブデザインといいます。

情 報 こ と ば キ ー ワ ー ド

CSS
(Cascading Style Sheets)

Webページの見た目(デザイン)を指定するための言語。スタイルシートとも呼ぶ。

レスポンシブデザイン

1つのHTMLをCSSの指定だけでパソコン用Webページとスマホ用Webページを表示を変更するデザインのこと。

それでは実際にCSSを記述してWebページを見やすくしましょう！

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる