HTMLスタイル-CSS
CSSはCascadingStyleSheetsの略です。
CSSは多くの作業を節約します。複数のWebページのレイアウトを一度に制御できます。
CSS =スタイルと色
CSSとは何ですか?
カスケードスタイルシート(CSS)は、Webページのレイアウトをフォーマットするために使用されます。
CSSを使用すると、色、フォント、テキストのサイズ、要素間の間隔、要素の配置とレイアウトの方法、使用する背景画像または背景色、デバイスや画面サイズごとに異なる表示を制御できます。はるかに!
ヒント:カスケードという言葉は、親要素に適用されるスタイルが、親内のすべての子要素にも適用されることを意味します。したがって、本文の色を「青」に設定すると、本文内のすべての見出し、段落、およびその他のテキスト要素も同じ色になります(他に何かを指定しない限り)。
CSSの使用
CSSは、次の3つの方法でHTMLドキュメントに追加できます。
- インライン-HTML
style
要素内の属性を使用する - 内部-セクション
<style>
内の要素を使用する<head>
- 外部-
<link>
要素を使用して外部CSSファイルにリンクする
CSSを追加する最も一般的な方法は、外部CSSファイルにスタイルを保持することです。ただし、このチュートリアルでは、インラインスタイルと内部スタイルを使用します。これは、デモンストレーションが簡単で、自分で試すのも簡単だからです。
インラインCSS
インラインCSSは、単一のHTML要素に一意のスタイルを適用するために使用されます。
インラインCSSはstyle
、HTML要素の属性を使用します。
次の例では、要素のテキストの色<h1>
を青に設定し、要素のテキストの色<p>
を赤に設定します。
例
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
内部CSS
内部CSSは、単一のHTMLページのスタイルを定義するために使用されます。
内部CSSは、要素<head>
内のHTMLページのセクションで定義されます。<style>
次の例では、<h1>
(そのページ上の)すべての要素のテキストの色を青に設定し、すべての<p>
要素のテキストの色を赤に設定します。さらに、ページは「パウダーブルー」の背景色で表示されます。
例
<!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>
外部CSS
外部スタイルシートは、多くのHTMLページのスタイルを定義するために使用されます。
<head>
外部スタイルシートを使用するには、各HTMLページのセクションに外部スタイルシートへのリンクを追加します。
例
<!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>
外部スタイルシートは、任意のテキストエディタで記述できます。ファイルにはHTMLコードが含まれていてはならず、.css拡張子を付けて保存する必要があります。
「styles.css」ファイルは次のようになります。
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
ヒント:外部スタイルシートを使用すると、1つのファイルを変更するだけで、Webサイト全体の外観を変更できます。
CSSの色、フォント、サイズ
ここでは、一般的に使用されるいくつかのCSSプロパティを示します。それらについては後で詳しく説明します。
CSScolor
プロパティは、使用するテキストの色を定義します。
CSSfont-family
プロパティは、使用するフォントを定義します。
CSSfont-size
プロパティは、使用するテキストサイズを定義します。
例
CSSの色、フォントファミリ、およびフォントサイズのプロパティの使用:
<!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>
CSSボーダー
CSSborder
プロパティは、HTML要素の周囲の境界線を定義します。
ヒント:ほぼすべてのHTML要素の境界線を定義できます。
例
CSSボーダープロパティの使用:
p {
border: 2px
solid powderblue;
}
CSSパディング
CSSpadding
プロパティは、テキストと境界線の間にパディング(スペース)を定義します。
例
CSSの境界線とパディングのプロパティの使用:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSSマージン
CSSmargin
プロパティは、境界線の外側のマージン(スペース)を定義します。
例
CSSの境界線とマージンのプロパティの使用:
p {
border: 2px
solid powderblue;
margin: 50px;
}
外部CSSへのリンク
外部スタイルシートは、完全なURLまたは現在のWebページからの相対パスで参照できます。
例
この例では、完全なURLを使用してスタイルシートにリンクしています。
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
例
この例は、現在のWebサイトのhtmlフォルダーにあるスタイルシートにリンクしています。
<link rel="stylesheet" href="/html/styles.css">
例
この例は、現在のページと同じフォルダーにあるスタイルシートにリンクしています。
<link rel="stylesheet" href="styles.css">
ファイルパスの詳細については、「 HTMLファイルパス」の章を参照してください。
章のまとめ
- インラインスタイリングにHTML
style
属性を使用する - HTML
<style>
要素を使用して内部CSSを定義する - HTML
<link>
要素を使用して外部CSSファイルを参照する - HTML
<head>
要素を使用して<style>要素と<link>要素を保存します - テキストの色にはCSS
color
プロパティを使用します font-family
テキストフォントにはCSSプロパティを使用しますfont-size
テキストサイズにはCSSプロパティを使用しますborder
境界線にはCSSプロパティを使用しますpadding
境界線の内側のスペースにはCSSプロパティを使用しますmargin
境界線の外側のスペースにはCSSプロパティを使用します
ヒント: CSSについて詳しくは、 CSSチュートリアルをご覧ください。
HTML演習
HTMLスタイルタグ
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。