CSS = Styles and Colors
Boxes
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 プロパティを使用する
ピンバック: WordPress プラグインなしで目次を作成する | Youneed
ピンバック: 基礎 学習 HTML リンクについて | Youneed