More than 5 years have passed since last update.

CSSの基礎知識

Last updated at 2019-03-28Posted at 2019-03-28

htmlにcssを適用する方法、基本書式などについてメモ程度に書こうかなと思います。

#CSSの基本書式

　例えば

style.css

h1 {font-size: 20px;}

のように書きます。
　h1はセレクタでCSSのうちどこにスタイルを適用するのかを示します。また、{~}を宣言ブロックと呼び、どのようなスタイルを適用するのかという内容を示します。

　補足としてCSSファイルの1行目には@charset"utf-8";と文字コードを指定するためのものを書く必要があります。

#HTMLに適用する
HTML<head>~<head>の中に<link>タグを使用して

index.html

<link rel="stylesheet" href="~">

のように記述します。
~の部分にはそのHTMLに適用したいCSSファイルへのパスを記述します。

その他、HTMLに直接記述してCSSを適用する方法もある。

#フォントの指定
font-familyでフォントを指定できます.例えば<body>~<body>のフォントをゴシック体に指定したい場合

style.css

body {font-family: sans-serif;}

このように書きます。sans-serifがゴシック体を意味します。

このようなキーワードで指定する場合それぞれの対応は
sans-serif → ゴシック体
serif→ 明朝体
cursive → 筆記体・草書体
fantasy → 装飾的なフォント
monospace → 等幅フォント

また、

style.css

body {font-family: "ＭＳ 明朝";}

のようにフォント名でも指定できます。

#フォントサイズ指定
font-sizeでフォントのサイズが指定できます。

style.css

h1 {font-size: 20px;}

　ここではpxという単位でサイズを指定していますが、emやexという単位で指定することや、％を使用しての指定もできます。また、small、medium、largeといったキーワードによる指定も可能です。

#行間を調節する
　line-heightを用いることで行の高さを調整することができます。

style.css

body{line-height: 1.7:}

この場合、行の高さはフォントサイズの1.7倍になります。このように数字だけで指定するのではなく、単位を用いたりキーワードを用いて指定することも可能です。

#上下のマージン（つまり空白）をなくす
　HTMLで<p>タグを用いて段落を変更する場合上下に空白ができますが、これをなくす方法です。上のマージンをmargin-topで、下のマージンをmargin-bottomで0に指定します。

style.css

p {
	margin-top: 0;
	margin-bottom: 0;
}

#参考文献