HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLスタイル-CSS


CSSはCascadingStyleSheetsの略です。

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


CSS =スタイルと色

テキストを操作する
色、  ボックス


CSSとは何ですか?

カスケードスタイルシート(CSS)は、Webページのレイアウトをフォーマットするために使用されます。

CSSを使用すると、色、フォント、テキストのサイズ、要素間の間隔、要素の配置とレイアウトの方法、使用する背景画像または背景色、デバイスや画面サイズごとに異なる表示を制御できます。はるかに!

ヒント:カスケードという言葉は、親要素に適用されるスタイルが、親内のすべての子要素にも適用されることを意味します。したがって、本文の色を「青」に設定すると、本文内のすべての見出し、段落、およびその他のテキスト要素も同じ色になります(他に何かを指定しない限り)。


CSSの使用

CSSは、次の3つの方法でHTMLドキュメントに追加できます。

  • インライン-HTMLstyle要素内の属性を使用する
  • 内部-セクション<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">


章のまとめ

  • インラインスタイリングにHTMLstyle属性を使用する
  • HTML<style>要素を使用して内部CSSを定義する
  • HTML<link>要素を使用して外部CSSファイルを参照する
  • HTML<head>要素を使用して<style>要素と<link>要素を保存します
  • テキストの色にはCSScolorプロパティを使用します
  • font-familyテキストフォントにはCSSプロパティを使用します
  • font-sizeテキストサイズにはCSSプロパティを使用します
  • border境界線にはCSSプロパティを使用します
  • padding境界線の内側のスペースにはCSSプロパティを使用します
  • margin境界線の外側のスペースにはCSSプロパティを使用します

ヒント: CSSについて詳しくは、 CSSチュートリアルをご覧ください


HTML演習

エクササイズで自分をテストする

エクササイズ:

CSSを使用して、ドキュメント(本文)の背景色を黄色に設定します。

<!DOCTYPE html>
<html>
<head>
<style>

  :黄色;

</ style>
</ head>
<body>

<h1>マイホームページ</ h1>

</ body>
</ 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タグリファレンスにアクセスしてください。