CSS

更新 : 2022/12/02

カテゴリー : WEBデザイン

by : It is R

CSS（Cascading Style Sheets）は、HTML《エイチティーエムエル》などで作られたホームページの見た目をデザインするための言葉（言語）です。

CSSとは
CSSについて、もう少し具体的な例
まとめ

CSSとは

たとえば、お部屋《へや》の模様替《もようが》えをしています。

模様替えでは、壁《かべ》の色を変えたり、タンスを動《うご》かしたりなど、いろんなことをします。

ホームページも同じで、背景《はいけい》の色や画像《がぞう》の場所《ばしょ》を変えたりして、作っていきます。

基本的《きほんてき》にホームページはHTML《エイチティーエムエル》という言葉《ことば》を使って書かれています。

HTMLで書かれた文章《ぶんしょう》は、ブラウザがHTMLを知らない人でも見やすいように直して、表示《ひょうじ》してくれます。
これが、みなさんがふだん見ているホームページです。

しかし、HTMLだけでそのホームページの見た目を細《こま》かく調節《ちょうせつ》するのは大変《たいへん》です。

そこで、CSS《シーエスエス》という言葉を使って、HTMLで作られたホームページの見た目を、細かく調節します。

CSSについて、もう少し具体的な例

では、もう少し具体的《ぐたいてき》な例《れい》を見ていきましょう。

たとえば、このようなHTML《エイチティーエムエル》があったとします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>CSSを学ぼう！</title>
</head>
<body>
	<div id="header">
		<p>ここはヘッダーです</p>
	</div>
	<div class="contents">
		<main id="main">
			<h1>CSSについて</h1>
			<p>今日はCSSについて学んでいきましょう！</p>
		</main>
		<div id="sidebar">
			<p>ここはサイドバーです</p>
		</div>
	</div>
</body>
</html>

これをブラウザで開くと、このように表示《ひょうじ》されます。

なにもデザインされていないので、とてもシンプルなホームページになります。
では、このホームページをCSS《シーエスエス》でデザインしてみましょう。

たとえば、下のようなCSSを書いてみました。

.contents {
    display: inline-flex;
    width: 100%;
}

#header {
    background-color: #ffff00;
    height: 200px;
}

#main {
    flex: 1;
}

#sidebar {
    background-color: #00ff00;
    width: 300px;
}

これをさきほどのHTMLから読み込むと、ブラウザではこんなふうに表示されます。