TECH I.S.

HTMLスタイル-CSS

CSSはカスケーディングスタイルシートの略です。

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

CSS = Styles and Colors

Manipulate Text
Colors,  Boxes




CSSとは？

Cascading Style Sheets (CSS)は、Webページのレイアウトをフォーマットするために使用されます。

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


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




CSSの使用

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

  • インライン- を使用してstyleHTML要素内の属性
  • 内部CSS- を使用して<style>の要素<head>セクション
  • 外部CSS- を使用して<link>外部CSSファイルにリンクする要素

CSSを追加する最も一般的な方法は、スタイルを外部CSSファイルに保持することです。ただし、このチュートリアルではインラインCSSのスタイルと内部CSSのスタイルを使用します。

インラインCSS

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

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

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

例

<h1 style="color:blue;">青色の見出し</h1> <p style="color:red;">赤色の段落</p>

内部CSS

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

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

次の例では、すべてのテキストの色を設定します。
<h1>(そのページの)要素のテキストを青に、<p>要素のテキストを赤にします。さらに、ページは「powderblue」の背景色で表示されます。

例

<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1   {color: blue;} p    {color: red;} </style> </head> <body> <h1>これは見出しです。</h1> <p>これは段落です。</p> </body> </html>

外部CSS

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

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

例

<!DOCTYPE html> <html> <head>   <link rel="stylesheet" href="styles.css"> </head> <body> <h1>これは見出しです。</h1> <p>これは段落です。</p> </body> </html>

外部CSSスタイルシートは、任意のテキストエディターで記述できます。ファイルには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でcolor、font-family、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>これは見出しです。</h1> <p>これは段落です。</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へのリンク

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

例

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

<link rel="stylesheet" href="https://www.techis.co.jp/html/styles.css">

例

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

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

例

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

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

ファイルパスの詳細については、HTMLファイルパスの章を参照してください。

この章のまとめ

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

ヒント：CSSの詳細については、CSS チュートリアルを参照してください。

HTMLスタイルのタグ
タグ 説明
<style> HTMLドキュメントのスタイル情報を定義します
<link> ドキュメントと外部リソース間のリンクを定義します

利用可能なすべての HTML タグの完全なリストについては、HTMLタグリファレンスを参照して下さい。



チュートリアル