ホームーページ作成はCSSを使ってスタイリッシュに!

ホームーページ作成はCSSを使ってスタイリッシュに!

Webサイト、いわゆるホームページを作成する際に、HTMLで作成を進めているかと思います。しかし、MTMLには装飾やレイアウトのための機能が備わっていないのです。それを補うのが、Cascading Style Sheets(カスケーディング・スタイル・シート)を略して ”CSS” です。

ほとんどのWEBページはHTMLとCSSという言語で成立しており、CSSは名前の通りスタイルを指定するための言語となります。
ここからは、初心者の方でも分かりやすく、CSSにはどのような役割や種類があるのかご説明いたします。

▶目次

  1. CSSとは?MHMLで作った骨格に装飾する
  2. CSSの書き方は3種類
  3. まとめ 

1、CSSとは?MHMLで作った骨格に装飾する

CSSを説明する前に、HTMLについて簡単に触れておきましょう。「HTML(HyperText Markup Language)」はマークアップ言語です。ページの要素や構造を指定するための言語で、Webサイトの骨格となるものです。

HTMLファイルは、「HTMLタグ」と呼ばれる記号を使って書きます。HTMLタグは決められた英数字を「<」と「>」で囲んだものです。
また、タグは基本的に開始タグ(始まりのタグ)と終了タグ(終わりのタグ)に分かれています。例えば、
<h1>この囲まれた部分が内容になります。</h1>
このように、開始タグの「<」の直後に「/(スラッシュ)」を付けたものが終了タグとなります。
開始タグと終了タグで挟まれた文章の部分が、そのタグの「要素」といいます。

HTMLタグは決められた英数字を「<」と「>」で囲んだものです。例えば、

  • <h1> 大見出しを作るタグ
  • <table> 表を作るタグ
  • <hr> 文章の区切り線を作るタグ

といった具合です。

このようにHTMLは骨格となるのに対して、「CSS」はどのような役割をしているのか?
CSSは、HTMLで作った要素を装飾するスタイルを指定する言語となり、ページのデザインは基本的にCSSで記述していきます。

詳しくいえば、CSSは『HTMLタグで囲んだ範囲の文字の色や大きさ、さらにページの背景の色や配置などを指定するための言語』となります。

CSSはデザインを指定したい要素に対して、その中にどのような装飾をするのかを記述するといった形になります。CSSを指定するには、HTMLと同じく決められた英数字で書いていきます。基本的には、

<h1>要素名</h1>
{
 プロパティ名 : 値;
}

プロパティ名というのは、色、幅、高さ、といった何を変えたいのか指定します。
値は、そのプロパティをどんな値にするのかということです。色を赤くしたいとか、幅を100pxにしたいとかです。

{ } の中に入れるCSSのルールですが、まず、色や幅を左側に書きます。
そして、右側には「:(コロン)」と「;(セミコロン)」の間に具体的にどのように変えるかを書きます。
実際には、

<h1>CSSって何</h1>
{
  color(色): red(赤);
}

と、なります。
パッと見は難しそうですが、ルールは意外に単純です。
参考までに、色、幅、高さといった「プロパティ名」には主に以下のようなものがあります。

color:文字の色
background:背景
background-color:背景の色
font-size:文字サイズ
font-weight:文字の太さ
margin:外側の余白
padding:内側の余白
line-height:行間
width:幅
height:高さ
border:枠線
text-align:左/中央/右揃え

プロパティ自体は他にも沢山ありますが、ネットで「CSS リファレンス」で検査すれば、様々なサイトに色々なプロパティを参照できるので存分に活用していきましょう。

2、CSSの書き方は3種類

CSSの基本の前の項でも見ていただいた通りですが、CSSには、

  • HTMLタグの属性として書く
  • styleタグを使って書く
  • 外部スタイルーシートを使って書く

と、書き方として3種類あります。
それぞれの書く方にメリット・デメリットがあり、ページの規模によって使い勝手が変わってきます。用途に合った書く方を選ぶ必要があります。

➀「HTMLタグの属性として書く」

HTMLタグにstyle属性を追加する形でスタイルを書く方法です。この方法は、属性を持っち要素のみにスタイルが追加されます。例として、以下の通りです。

<p style="color: blue;">タグの属性として書く</p>

この「style=” ”」がキーワードとなっています。「”」「”」で囲まれた部分にCSSを書くことで、スタイルを指定します。

➁「styleタグを使って書く」

➀のようにタグの属性として書くと、HTMLの中でスタイルシートの記述があちこち散らばって、どこに何を書いたのか分からなくなってしまいます。そんな時は、HTMLファイルの1箇所にまとめて書くことができます。スタイルシートの記述には、styleタグを使います。

<style type=”text/css”>
h1{
   color: blue;
   text-align: right;
}
</style>

これは上の例で書いたときと同じ記述方法ですが、styleタグで囲んでいます。このstyleタグで囲まれた部分がCSSとして認識されるわけです。

➂「外部スタイルーシートを使って書く」

styleタグを使うとHTMLファイル全体でスタイルを共有できますが、Webサイト全体でスタイルを共有する方法があります。例えば、Webページの背景を統一したい場合、その指定を1ヶ所に書くだけで複数のページに反映できます。
それには、HTMLファイルとは別にスタイルシートファイル(css_sample.css)を作成して、それをHTMLファイルに読み込ませるという方法です。HTMLファイルでは、以下のように書きます。

<link rel="stylesheet" href="http://css_sample.css" type="text/css">

3、まとめ

HTMLタグを覚えるのも大変なのに、CSSまで現れたら溜息が出てきそうですね。しかし、実際にホームページを作りながら徐々に覚えられ、作ることが楽しくなってくるものです。

ここでは、CSSの基本中の基本のみの説明だけでしたが、SSSがどのような役割をしているのか知っておくことも大切です。皆さまは何げなく見ているカラフルでスタイリッシュなサイトは、全てCSSを使って作られているのです。これからホームページを作成したい方も、CSSを使ってオシャレでスタイリッシュなサイトに挑戦してみましょう。