CSSの基本のき

CSSってよく目にするけど、何かわからないわ。

今回はCSSの超基本を一緒に学びましょう！

CSSの知識が全くなくてもホームページは作ることができます。でも、知っていると空白をもう少し広くしたいときなど変更できるので便利ですよ。

ホームページ作成を楽しむには難しいことは必要ありませんから、難しいことは書きません。なんとなく分かった気がするで十分です。最後までお付き合いください。

CSSはCascading Style Sheetsの略

CSSはCascading Style Sheets（カスケーディング　スタイル　シート）の略です。CSSはHTMLを装飾する役割があります。

イメージとして、メモ帳アプリで作った文章がHTMLです。それに、文字の大きさや色、文字と文字の間の感覚や行間の指定、文章を線や破線で囲む指定をするのがCSSになります。

例えに出して申し訳ないのですが、阿部寛さんのホームページを見てください。シンプルですよね。阿部寛さんのお人柄のように飾らないホームページが素敵です。HTMLで作ったホームページだと思ってください。

次にジャニーズのホームページを見てください。なんとなく違いが分かったでしょうか？これがHML中心のホームページとHTMLとCSSで飾ったホームページの違いです。

CSSは基本的にセレクタとプロパティと値で書かれます。

セレクタ｛　プロパティ：値　｝

例えば見出しタグをフォントサイズを24ポイントで青色に装飾したいときは下記のようになります。

h1{font-size : 24pt; color: #0000ff; }

｛｝内の半角スペースや改行は見た目には影響しない、無視されます。改行して見やすいように工夫してもいいと思います。

h1{
  font-size: 24pt;
  color: blue;
}

CSSで大きさを具体的に指定するときは単位の使い分けができると、より詳細に指示できます。

スタイルシートとは装飾のセレクタ：｛　プロパティ：値　｝のことを差すことが一般的です。スタイルシートを書くところを3通りあります。

別ファイルを作るのが一般的です。拡張子は「.css」です。HTMLファイルには読み込むCSSファイル名の指示を<head></head>ヘッダー内で指定します。

<link rei="stylesheet" href="sample.css" type="text/css">

複数のHTMLファイルで共通するスタイルシートをまとめて別ファイルに記入すれば、ファイルを修正するだけで一度に複数のHTMLファイルの見た目を変えることができます。

ヘッダー内に<style></style>を書きます。この<style></style>の間にスタイルシートを書き込みます。

HTMLのタグに直接書き込むことが可能です。タグ内にstyleと入力して細かく設定します。

<h1 style="font-saize: 24pt; margin: 0; padding: 0.3em; color: #fde321">

いろんな場所で同じタグにスタイル指定を行うと、指示が重複します。どの指示を優先するかはルールがあります。

「やっぱり苦手だ」と思う方は無料学習サイトがありますよ。

CSSに特化した学習サイトMarkupは、名越慎さんが北海道情報大学情報メディア学部4の卒制作したサイトになります。なので、今のところ無料で勉強できます。有り難いことですね。

他には、Progateも無料で使うことができます。

勉強もちょっと抵抗があるという方は、ホームページ作成ソフトやWebビルダーに丸投げでも大丈夫です。気が向いたら勉強してみてくださいね。