黄色い花畑

CSSとは?CSSの基礎を学ぼう

CSSとは、HTMLがWebページの文書構造を記述しますが、そのWebページのレイアウトや装飾を行うのがCSSです。

HTML同様にWebページ作成に欠かせない技術です。

CSSとはどんなもの

CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」にの略でWebサイトのレイアウトや装飾をするためのもので、「スタイルシート」と呼ばれることがあります。

HTML内にもレイアウトや装飾をコントロールする記述は存在しますが、HTML本来の目的は文書のマークアップ文書内の除法に対して意味を与える事なので、装飾をコントロールすることは本当の役割からは外れることになります。

HTMLの文書構造とCSSのスタイリングを分離することで、CSSの変更だけでHTMLを変更せずに装飾やスタイリングが容易に変更できるメリットがあり、装飾やスタイリングが容易に調整できるためWebサイトの制作の向上につながります。

CSSでどんなことができる

HTMLで記述しただけの文章は、ブラウザで表示すると背景は白色で文字は黒色のままで各ブロック要素が縦に連なっただけの寂しい記事になります。

そんな記事にCSSを用いることで文字色を変更したり、文字の大きさを変えたり、左上から縦並びだったブロック要素を横並びにしたり配置を変えたりしてレイアウトを調整できます。

記事は見て楽しいものが良いですよね、情報を分かり易く伝えたり魅力的に見せたりするなどCSSで装飾するといいと思います。

CSSのルールを知ろう

CSS記述の基本のルールーを知りましょう

CSSの基本構造

CSSにも記述のルールがあります、「HTMLのどの要素に対しどのような装飾をどれくらいしますか?」と記述します。

CSSを適用する箇所を指定することを「セレクタ」
どんな装飾をするのか設定を指定することを「プロパティ」
プロパティに対し装飾する値を指定するところを「値」と言います。

CSSの記述のルール

文字はすべて半角文字を使用して記述します、セレクタの後に半角スペースを空けて{中カッコ}を記述し、中カッコの中にプロパティと値を記述します。

プロパティの後に「:(コロン)」をつけて値の後に「;(セミコロン)」を記述します。

セレクタ {プロパティ: 値;}このような形が基本の書式になります。

これをHTMLに記述した段落「p」に対して文字の色を赤に指定したい時には

p {
color: #ff0000;
}

このような記述になります、段落「p」がセレクタで、「color:」がプロパティになり、「#ff0000;」が値になります。

ルールセットと宣言

p { color: #ff0000; } この記述の一式を「ルールセット」と言い、プロパティと値のセットが「宣言」になります。

「:コロン」と「;セミコロン」を間違うとスタイルが適用されなくなるので注意しましょう、正しく表示されない時はこんなところも点検しましょう。

ルールセットの中には複数の宣言を記述することができます。

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

このように複数の宣言を記述していけます、記述の方法もこのように改行をして縦に宣言を記述していく方が見やすく効率がいいと思います。

HTMLにCSSを組み込んでいく方法

インラインでCSSを適用させる

インラインとはHTMLのタグに直接CSSを記述する方法で、HTMLファイルの中に記述します。

指定するには「style属性」を使用してプロパティと値を一対で使用します。

インラインの指定の方法
<タグ style="プロパティ: 値;">例えば段落に色を付けたいときは
<p style="color: #ff0000;>文字が赤に変わる</p>
このようにインラインはタグに直接記述していきます。

エンベッドでCSSを適用させる

エンベッドと呼ばれる方法は、HTMLのhead部分にstyle要素を使用して記述する方法です。

HTMLのhead要素内に<style></style>を記述しその間にCSSを指定していきます。

<head>
<style>
セレクト { セレクト: 値;}
</style>
</head>
このようにhead要素内にstyle要素を使用してその中にCSSを記述していきます。

別ファイルにリンクしてCSSを適用する

別ファイルにリンクしてCSSを適用する方法です。

これはCSSを別のファイルで記述をしてHTMLのlink要素でCSSファイルを参照する方法です。

この方法は一つのCSSファイルを変更すれば参照しているすべてのHTMLファイルが変更を適用するのでWebサイト全体に共通の装飾を変更する場合に便利な機能です。

インラインやエンベッドはHTMLとは別のファイルを読み込む必要がなく、そのページだけで装飾を適用させるのには手軽な方法です。

リンクの指定方法
リンクはhead要素内に記述します。
<head>
<link rel="stylesheet" href="css/style.css">
</head>

relは関連性を表し、hrefはファイルのある場所を示しています。

CSSとは?CSSの基礎を学ぼう

CSSのファイル名は半角英数字で指定します、好きな名前を指定できますが内容が分かり易いような名前にするのが良いでしょう。

一般的なファイル名を指定する時は装飾することを「スタイル」と呼ぶことから「style.css」とすることが多くなっています。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事