HTMLについてさらっとやったんで、次はCSSについてさらっとやります。

CSSとは

HTMLは、タグでコンテンツの意味づけをすることができるが、そのコンテンツをどういうふうに表示するか、ページのレイアウトやスタイルを調整する機能は持っていない。そこで、HTMLがブラウザに表示されるときの見た目を調整するのがCSS（スタイルシート）。

CSSの基本書式

h1{
 font-size: 18px;
}

・h1セレクタ　HTMLのドキュメントから、スタイルを適用したい「要素」を選択する
・font-sizeプロパティ　設定したいスタイル。複数ある場合には何行でも書ける
・18pxプロパティの値　

実際にWebサイトを作るときは、HTMLファイルとは別に専用の外部CSSファイルを用意するのが一般的

CSSファイルの１行目には文字コードを指定する

@charset "utf-8";

次にHTMLファイルを編集して、CSSファイルを読み込むようにする

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

<link>タグにはCSSファイルの名前を、href属性には読み込みたいCSSファイルへのパスを指定する

*ちなみに…
リンクといえば<link>のほかに<a href>がある。
そのちがいは、<link>が「そのページ」と「外部のファイルやページ」を関連づけるのに対し、<a href>はbodyタグ内でリンクを貼るために使われる。

・タイプセレクタ
スタイルを適用させたい要素の要素名をセレクタの名前として記述する。この時、文書に含まれる要素は全て同じプロパティに値が設定される。

・classセレクタ
同じクラス名（HTMLのclass属性に指定した値）を持つ要素すべてにスタイルを適用するセレクタで、ピリオドに続けてクラス名を記述する。

・子孫セレクタ
先頭のセレクタで選択された要素のうち、2番目のセレクタに該当する要素だけを選択する。先頭のセレクタと2番目のセレクタは半角スペースで区切って記述する。
例えば

ex.html

<section class="profile">
 <h2>プロフィール</h2>
 <p>アメリカに留学してIT技術を…</p>
</section>

このうち<h2>だけにスタイルを適用させたい場合、

.profile h2{
  margin-top:0;
  margin-bottom:0;
}

こうなる。ちな、これで見出しの上下のスペースが調節された。

CSSは別ファイル用意するんだね、そのほうがきれいにまとまっていいのか
基礎の基礎だからしっかり覚えていこう～