13.HTML スタイル – CSSについて

  • 投稿者:
  • 投稿コメント:2件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

CSS = Styles and Colors

Manipulate Text
Colors,
 Boxes
この記事の概要
  1. CSSを使ったHTMLのスタイル
  2. インラインCSS
  3. 内部 CSS
  4. 外部 CSS
  5. CSS フォント
  6. CSS ボーダー
  7. CSS パディング
  8. CSS の余白
  9. id属性
  10. クラス属性
  11. 外部 参照CSS
  12. まとめ
  13. Test Yourself with Exercises!
  14. HTMLスタイルのタグ

CSSを使ったHTMLのスタイル

CSS の略は Cascading Style Sheets.

CSS の記述は 表示する方法を記述したものです。

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

CSSは、3つの方法でHTML要素に追加できます。:

  • Inline – HTML要素のstyle属性を使う
  • Internal – <style> を <head> 要素の中に記述しり
  • External – 外部CSSファイルを使用して

CSSを追加する最も一般的な方法は、スタイルを別々のCSSファイルに保存することです。ただし、ここではインラインスタイルと内部スタイルを使用します。
これは、デモンストレーションが簡単で、自分で試してみるのも簡単だからです。

ヒント: CSSチュートリアルでは、CSSについてもっと学ぶことができます。

インラインCSS

インラインCSSは、単一のHTML要素に固有のスタイルを適用するために使用されます。

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

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

例文

<h1 style=”color:blue;”>This is a Blue Heading</h1>
スポンサーリンク

内部 CSS

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

内部CSSは<head> 、 <style> 要素内のHTMLページのセクションで定義されています。:

例文

<!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ページのスタイルを定義するために使用されます。

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

T外部スタイルシートを使用するには <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” の見た目です:

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>

CSS ボーダー

CSS border プロパティは、HTML要素の周囲の境界線を定義します。:

例文

p {
border: 1px
solid powderblue;
}
スポンサーリンク

CSS パディング

CSS padding プロパティは、テキストと枠の間の余白（スペース）を定義します。:

例文

p {
border: 1px
solid powderblue;
padding: 30px;
}

CSS の余白

CSS margin ロパティは、境界線の外側の余白（スペース）を定義します。:

例文

p {
border: 1px
solid powderblue;
margin: 50px;
}
スポンサーリンク

id属性

1つの特別な要素に対して特定のスタイルを定義するには、 id 要素に属性を追加します。:

<p id=”p01″>I am different</p>

次に、特定のIDを持つ要素のスタイルを定義します。:

例文

#p01 {
color: blue;
}

ノート: 要素のIDはページ内で一意である必要があるため、IDセレクタを使用して一意の要素を1つ選択します。

クラス属性

特別な種類の要素のスタイルを定義するには、要素に class 属性を追加します。:

<p class=”error”>I am different</p>

次に、特定のクラスを持つ要素のスタイルを定義します。:

例文

p.error {
color: red;
}
スポンサーリンク

外部 参照CSS

外部スタイルシートは、フルURLまたは現在のWebページへの相対パスで参照できます。

この例では、完全なURLを使用してスタイルシートにリンクしています。:

例文

<link rel=”stylesheet” href=”https://www.berry.com/html/styles.css”>

この例では、現在のWebサイトのhtmlフォルダにあるスタイルシートにリンクしています。:

例文

<link rel=”stylesheet” href=”/html/styles.css”>

この例では、現在のページと同じフォルダにあるスタイルシートにリンクしています。:

例文

<link rel=”stylesheet” href=”styles.css”>

ファイルパスについてもっと知るにはこちら HTML
ファイルパス.

まとめ

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


Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »
-->

HTMLスタイルのタグ

Tag 説明
<style> HTML文書のスタイル情報を定義します
<link> 文書と外部リソース間のリンクを定義します

さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい

タグ: , , , ,

2件のコメントがあります

コメントを残す