CSSとは?スタイルシートの役割とCSSの書き方を理解しよう

 

CSSとは?スタイルシートの役割を理解しよう

2022年おすすめのレンタルサーバー

シン・レンタルサーバー

新しい機能をいち早く取り入れることで、革新的なレンタルサーバーを目指すエックスサーバーの進化版「シン・レンタルサーバー」。

超高速CMS実行環境「KUSANAGI」を採用しており、高速かつセキュリティーに優れた新世代のレンタルサーバーが体験できます。

【2022年9月29日(木) 12:00まで】今ならキャンペーンで50%キャッシュバック!月額385円~利用できます!詳細は、下記ボタンからどうぞ!

\ 10日間無料で利用可能 /
シン・レンタルサーバーはこちら

他サーバーから「シン・レンタルサーバー」への移行方法については下記記事もご覧ください。
≫ シン・レンタルサーバーに他サーバーから移行する方法を図解【2022年版】

CSSとは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、HTMLで作成されたWebページにスタイルを付ける(見た目を変更する)為の言語です。

HTMLでWebページの骨組みを構築し、見た目や機能をCSSでデザインするといったイメージです。

特に、色、文字の大きさ、レイアウトの幅や高さ、背景等CSSを用いればWebページのデザインを自由自在に変更することができます。

CSSとは?

CSSの書き方

CSSの書き方を覚えていきましょう。CSSは、セレクタ・プロパティ・値から構成されています。

下記のように書きます。

h1{color:red;}

それぞれ何を意味するのかを見ていきましょう。

h1の部分は「セレクタ」、colorの部分は「プロパティ」、redの部分は「」と言います。

セレクタは、CSSを適用したい要素を指定します。上記の場合、h1要素に対してCSSが適用されます。

プロパティは、変更を加えたい項目を指定します。

上記の「color」は、テキストの色を指定するためのプロパティです。値は、プロパティに用意された値を入れます。

つまり、上の図を分かりやすくすると、こうなります。

プロパティと値は、「{}」(半角)で囲み、プロパティと値の間には「:」(半角)を入れます。

実際にコードを書く際は、見やすくするため下記のように書くのが一般的です。

h1{
  color:red;
}

CSSを使ってみよう

では、実際にCSSを適用させてみましょう。

CSS入門(初級編)では、Web Makerというエディタを使用していきます。インストールが済んでいないという方は、「Web Makerをインストールして、エディターを準備しよう」を参考にインストールしてください。もちろん、利用しているエディタがすでにあるという方は、そちらを利用してください。

今回使用するHTMLはこちら

まずは、HTMLをWeb Makerで表示してください。

<h1>はじめてのCSS</h1>

今回は、h1タグのテキストの色と大きさを変えます。下記コードを「CSS」欄へ入力してください。

h1{
  color:red;
  font-size:24px;
}

すると、文字の色と大きさが変わります。

今回は、CSSとは何か?そして、CSSの使いかたを説明しました。

次回から、様々なセレクタを見ていきましょう。

理解するポイント

  • CSSとは、HTMLで作成されたWebページにスタイルを付ける為の言語。
  • CSSは、セレクタ・プロパティ・値から構成されています。
  • プロパティと値は、「{}」(半角)で囲み、プロパティと値の間には「:」(半角)を入れます。