「CSS/記述」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
s/になっています/です/g
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
→‎HTMLに直接CSSを書き込む方法とその利用例: HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。 <h1 style="color: red; font-weight: bold;">Hello World!</h1> このように、要素の開始タグにstyle属性を追加し、値としてスタイルを指定します。複数のスタイルを指定する場合は、セミコロン(;)で区切って指定します。 また、複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。 <!DOCTYPE html> <html> <head> <title>Example</title> <style> h1 { color: red; font-weight: bold; } </style> </hea
タグ: 2017年版ソースエディター
1 行
== HTMLに直接CSSを書き込む方法とその利用例 ==
== 準備 ==
HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。
まずスタイルシートを入力する前に、
<SyntaxHighlight lang="html5">
<style type="text/css">
 
<SyntaxHighlightsyntaxhighlight lang="html5">
</style>
<h1 style="color: red; font-weight: bold;">Hello World!</h1>
</SyntaxHighlight>
</syntaxhighlight>
と入力します。
 
このように、要素の開始タグにstyle属性を追加し、値としてスタイルシート(CSS) に絶対に必要でを指定します。もし、これが無いと、複数のスタイルシートとしてを指定する場合動作しない、セミコロン(;)区切って指定します。
また、複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。
 
 
なぜならwebブラウザは <code><nowiki><style></nowiki></code> から <code><nowiki></style></nowiki></code> までの間に書いた内容を、 CSS 形式のスタイルシートとして扱うからです。
 
これでスタイルシートを入力する準備ができました。
 
 
 
さて、スタイルシート(CSS)のファイルと HTMLファイルとは 別ファイルにしても動作は可能です(「外部スタイルシート」といい、拡張子は「.css」になります。後述)。いっぽうHTMLファイル中にCSSを含めることも可能です。
 
 
もしHTML 文書中にスタイルシートを書く場合は、慣習的に
 
<SyntaxHighlight lang="html5">
<head>
<style type="text/css">
 
<SyntaxHighlightsyntaxhighlight lang="html5">
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</style>
h1 {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
</SyntaxHighlight>
<h1>Hello World!</h1>
 
<h1>Welcome to my website</h1>
という構成にするテクニックもあり、つまり、head 要素の中<small>(<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間)</small>にstyle要素を置くのが望ましいとされています。
</body>
 
</html>
 
</syntaxhighlight>
この構成が望ましい理由としては、互換性などの理由で万が一スタイルシートを認識しない場合でも、HTMLの仕様としてhead内は非表示という仕様があるので、よって、スタイルシート内の文字列を誤って文字表示してしまうエラーが防げるからです。(だが実際には、head要素の内部に命令として認識できない文字を書くと、表示されるブラウザも多い(※ 動作確認: Fedora Firefox 75で2020年5月5日に表示されることを確認ずみ)。
 
外部スタイルシートをHTMLから呼び出す場合でも、CSSを呼び出すためのタグを同様にhead要素の中に入れるのが望ましいとされています。
 
 
もしHTML4を使う場合でも、この構成にするのが望ましいとされています。(というか、もともとHTML4時代から、この構成が望ましいとされている認識が、HTML5時代でも引き続き、受け継がれている。)
 
 
;HTML4の場合
HTML4では
<SyntaxHighlight lang="html4strict">
<meta http-equiv="Content-Style-Type" content="text/css">
 
<style type="text/css">
 
</style>
</SyntaxHighlight>
 
の2つを入力します。
 
このように、head要素内にstyle要素を記述し、その中にセレクタとスタイルを記述します。
この例では、h1セレクタに対してcolorプロパティとfont-weightプロパティを指定しています。このCSSは、全てのh1要素に適用されます。
 
== 基礎 ==