CSSはじめのいっぽ

CSSとは？

カスケーディングスタイルシート（Cascading Style Sheets）の略で、シーエスエスと読み、HTMLを飾るコンピューター言語です。 HTMLと同様、プログラミング言語ではないので、ご安心を！

使い方はシンプル。飾りたいタグを特定し { } で囲み、属性名の後にコロン、値の値にセミコロン。

body {
  color: blue;
}

colorは文字色を指定する属性名です。bodyタグの中、つまり、表示する全部の文字の色を「青」と指定しています。

HTMLの復習はこちら → HTMLはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_html.md

背景色を変えよう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>たいとる</title>
<style>
body {
  background-color: red;
}
</style>
</head>
<body>
  <div>
  <h1>タイトル</h1>
  本文
  </div>
</body>
</html>

styleタグをheadタグの中に加えました。見てみましょう。背景が眩しい赤になりますね！英語で色名を入れるとその色になります。

光の三原色、赤、緑、青ののそれぞれの強さを0〜255で表しても同じです。（セミコロンを忘れずに！）

  background-color: rgb(255, 0, 0);

RGBでいい色を作るのは大変なので、色相、彩度、輝度で指定するのがオススメです。

  background-color: hsl(0, 40%, 70%);

色相(Hue)は、赤0から始まり、緑90、水色180、紫270、再び赤360とぐるっと回る角度で指定します。
二番目、彩度(Saturation)は、0%で無色から100%で鮮やかさ最大までを指定します。
三番目、輝度（Lightness)は、50%が基本で、減らすと暗くなり0%で黒、増やすと明るくなり100%にすると白です。

0〜1までの数値で透明度を指定する、rgbaや、hslaも便利です。

タイトルの文字の大きさを調整しよう

文字サイズを指定する属性名は font-size です。

h1 {
  font-size: 200%;
}

これでh1タグの中の文字が、通常の文字の2倍(200%)になります。

間を取ろう

デザインの基本は「間」です！間は、margin（マージン）とpadding（パッディング）で調整します。 h1タグと他の要素との間を上、右、下、左、の順に「em」という文字サイズの単位を使って指定します。

h1 {
  margin: 1em 2em 3em 4em;;
  padding: 1em 2em 3em 4em;
  background-color: red;
}

分かりやすいので、背景色も付けました。他とタグとの間を marign で、そのタグ内部の間を padding でそれぞれ指定します。上と1文字分、右に2文字分、下に3文字分、右に4文字分の間がそれぞれ空きました。小数点を使って細かく指定もできます。文字サイズを変更すると連動して変わります。

div {
  margin: 0.5em 0.5em 0.5em 0.5em;
  paddding: 0.5em 0.5em 0.5em 0.5em;
}

divタグの方もいい具合に間を設定してみましょう。

線で囲もう

囲み線を付けることも簡単です。

div {
  border: 0.1em solid blue;
}

0.1em（文字サイズの1/10）の太さ、実線（solid）、青（blue)で囲みます。padding、marginを指定してみて変化を見てみましょう。

solidの代わりに、破線（dashed）、点線（dotted）、二重線（double）などがあります。上下左右それぞれ別々に指定することもできるので、興味があれば調べてみましょう。（css border とかで、検索すればすぐ解決します）

特定のタグにだけ指定したい

この囲みだけ大きくしたい！このタイトルだけ色を変えたい！そんな時は class を使います。

CSSにて、タグ名の代わりにドット「.」で始まる半角英数スペース抜きでクラス名を付けます。

.a {
  color: green;
}

HTMLのタグの中にそのクラス名を class として指定すればOK！

<div class="a">
<h2>たいとる</h2>
本文
</div>

画像の大きさをいい感じにしたい

HTMLは実際にどんなサイズで見られるわかりません。4Kモニターいっぱいに表示されるかもしれませんし、縦長のスマホかもしれません。でも、画像はいい感じに出したいですね。

CSSで全部の画像（imgタグ）の幅を100vw、表示画面の100%に指定しました。

img {
  width: 100vw;
}

スマホで横スクロールできてしまう場合は、marginやpaddingを全要素(*)を0にしてましょう。

* {
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

画像毎に大きさを変えたい場合、前述の class を使います。

リンクの色がうまく変わらない！

aタグはちょっと特殊です。!important を使うと反映されます。

a {
  color: hsl(30, 80%, 30%) !important;
}

訪問済みかどうかや、クリックしたときの色など、細かな指定ができるようになっています。（詳細）

他には？

背景に画像をおいたり、スクロールしてもずっと表示されたり、いろんなことができます。やりたいことに「css」を加えて、検索してみましょう！

例えば「CSS 中央揃え」
https://www.google.com/search?q=CSS+%E4%B8%AD%E5%A4%AE%E6%8F%83%E3%81%88

Provide feedback

Saved searches

Use saved searches to filter your results more quickly