HTML スタイル - CSS

❮ 前章へ次章へ ❯

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

CSSによるHTMLのスタイリング

CSS は、Cascading Style Sheets の略です。

CSS は、HTML 要素を画面、紙、または他のメディアにどのように表示するかを記述します。

CSS は、多くの作業を節約します。一度に複数のWebページのレイアウトを制御できます。

スタイルは、次の3つ方法で HTML 要素に追加することができます：

インライン - HTML 要素で style 属性を使用する
内部 - HTML <head> セクションで <style> 要素を使用する
外部 - 一つ以上の外部 CSS ファイルを使用する

スタイルを追加するための最も一般的な方法は、スタイルを別々の CSS ファイルに保存することです。しかし、この HTML チュートリアルでは、内部スタイルを使用します。これは、デモを行うことが簡単であることと、自分でコードを試すことが簡単にできるためです。

チップ： CSS に関する詳細については、 CSS チュートリアルをご覧ください。

インライン CSS

インライン CSS は、単一の HTML 要素にユニークなスタイルを適用するために使用します。

インライン CSS は、HTML 要素の style 属性を使用します。

次の例では、<h1> 要素のテキストの色を青に設定します：

例

<h1 style="color:blue;">This is a Blue Heading</h1>

Try it Yourself »

内部 CSS

内部 CSS は、単一 HTML ページのスタイルを定義するために使用します。

内部 CSS は、HTML ページの <head> セクションにおける <style> 要素内に定義します；

例

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

外部 CSS

外部スタイルシートは、多数の HTML ページのスタイルを定義するために使用します。

外部スタイルシートを使用すると、1 つのファイルを変更することによって、Web サイト全体の外観を変更することができます！

外部スタイルシートを使用するには、HTML ページの <head> セクションにリンクを追加します：

例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

外部スタイルシートは、テキストエディタで記述することができます。ファイルには、HTML コードを含ことはできず、.css 拡張子で保存しなければなりません。

"styles.css" の内容は次のようになります：

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS フォント

CSS color プロパティは、使用するテキストの色を定義します。

CSS font-family プロパティは、使用すフォントを定義します。

CSS font-size プロパティは、使用すテキストサイズを定義します。

例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »