CSS

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

目次
  1. CSSとは
  2. CSSについて、もう少し具体的な例
  3. まとめ

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から読み込むと、ブラウザではこんなふうに表示されます。

これでホームページをデザインすることができました。

これはほんの一例いちれいですが、CSSにはいろんな機能きのうがあり、テキストがうごくなどのかんたんなアニメーションを作ることもできます。

まとめ

CSSシーエスエスは、HTMLエイチティーエムエルでつくられたホームページの見た目をデザインすることができる言葉ことば言語げんご)です。

場所ばしょや色の変更へんこう、さらにはかんたんなアニメーションまで作ることができます。

スポンサードリンク

関連コンテンツ

オススメ記事

HTML

HTMLは、ホームページを作るときにコンピュータに対して使う、言葉のことです。コンピュータは人間の言葉が分からないので、その専用の言葉を使います。 今回は、HTMLとはなんなのかについて紹介し

WordPress

WordPress《ワードプレス》は、HTML《エイチティーエムエル》やPHP《ピーエイチピー》などの知識《ちしき》がなくても、かんたんにブログなどのWebサイトを作ることができるツールです。