CSS チュートリアル => CSSを使い始める

備考

スタイルは、ソースHTML文書で指定されたときに、さまざまな程度の再利用と有効範囲を可能にする、いくつかの方法でオーサリングできます。外部スタイルシートはHTML文書全体で再利用できます。 埋め込みスタイルシートは、指定されたドキュメント全体に適用されます。 インラインスタイルは、指定された個々のHTML要素にのみ適用されます。

バージョン

バージョン	発売日
1	1996年12月17日
2	1998-05-12
3	2015-10-13

外部スタイルシート

外部HTMLスタイルシートは、各HTML文書に<link>要素を配置することで、任意の数のHTML文書に適用できます。

<link>タグの属性relは"stylesheet"設定し、 href属性はスタイルシートへの相対パスまたは絶対パスに設定する必要があります。相対URLパスを使用するのは一般的には良い方法ですが、絶対パスも使用できます。 HTML5では、 type属性を省略することができます。

HTMLファイルの<head>タグに<link>タグを配置して、スタイルがスタイルを設定する要素の前にロードされるようにすることをお勧めします。さもなければ、ユーザーはスタイルのないコンテンツのフラッシュを見るでしょう。

例

hello-world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

CSSファイルへの正しいパスをhrefに含めるようにしてください。 CSSファイルがHTMLファイルと同じフォルダにある場合、パスは必要ありません（上記の例のように）が、フォルダに保存されている場合は、このhref="foldername/style.css"ように指定します。

<link rel="stylesheet" type="text/css" href="foldername/style.css">

外部スタイルシートは、CSSを処理する最良の方法と考えられています。これは非常に単純な理由があります.1つのスタイルシートで管理されている100ページのサイトを管理しているときに、リンクの色を青から緑に変更したい場合は、変更するのがずっと簡単ですあなたのCSSファイルに保存して、変更を100ページに渡って "カスケード"させ、それを100ページに分けて100回同じ変更を加えます。あなたのウェブサイトの外観を完全に変更したい場合は、この1つのファイルを更新するだけです。

必要に応じてHTMLページに多くのCSSファイルをロードできます。

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

CSSルールはいくつかの基本ルールで適用され、順序は重要です。たとえば、main.cssファイルにコードが含まれているとします。

p.green { color: #00FF00; }

'green'クラスのすべての段落は明るい緑色で書かれますが、 main.cssの後に追加するだけで別の.cssファイルでこれを上書きできます。あなたは次のコードをmain.cssの後に続けてoverride.cssを書くことができます。

p.green { color: #006600; }

今度はあなたのすべての段落は緑色ではなく、より暗い緑色で書かれます。

重要なルール、特異性、継承などの他の原則が適用されます。

誰かが最初にあなたのウェブサイトにアクセスすると、ブラウザは現在のページのHTMLとリンクされたCSSファイルをダウンロードします。その後、別のページに移動すると、ブラウザはそのページのHTMLをダウンロードするだけで済みます。 CSSファイルはキャッシュされているので、再度ダウンロードする必要はありません。ブラウザは外部スタイルシートをキャッシュするので、ページの読み込み速度が向上します。

内部スタイル

HTMLドキュメント内の<style></style>タグで囲まれたCSSは、外部スタイルシートのように機能しますが、別のファイルではなくスタイル付けされたHTMLドキュメントに存在するため、人生。この要素は HTML検証のために<head>要素内になければならないことに注意してください（ body配置されてbody場合は現在のすべてのブラウザで動作します）。

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>

インラインスタイル

インラインスタイルを使用して、特定の要素にスタイリングを適用します。これは最適ではないことに注意してください。コンテンツルールとプレゼンテーションルールを区別するために、 <style>タグまたは外部CSSファイルにスタイルルールを配置することをお勧めします。

インラインスタイルは、 <style>タグまたは外部スタイルシート内のCSSを上書きします。これは状況によっては有益ですが、この事実はしばしばプロジェクトの保守性を低下させます。

次の例のスタイルは、それらがアタッチされている要素に直接適用されます。

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

インラインスタイルは一般的に、さまざまな電子メールクライアント、プログラム、デバイス間でのレンダリングの互換性を保証する最も安全な方法ですが、書き込みに時間がかかり、管理するのが少し難しい場合があります。

CSS @importルール（CSS at-ruleの1つ）

@import CSS at-ruleは、他のスタイルシートからスタイルルールをインポートするために使用されます。これらのルールは、@ charsetルール以外のすべてのタイプのルールに先行する必要があります。ネストされたステートメントではないので、@importは条件付きのat-rules内で使用できません。 @import 。

@importの使い方

あなたは@importルールを以下の方法で使うことができます：

A.内部スタイルタグ

   <style>
    @import url('/css/styles.css');
   </style>

B.外部スタイルシートを使用する

次の行では、ルートディレクトリのadditional-styles.cssというCSSファイルが、そのCSSファイル内にインポートされます。

@import '/additional-styles.css';

外部CSSをインポートすることも可能です。一般的な使用例は、フォントファイルです。

@import 'https://fonts.googleapis.com/css?family=Lato';

@importルールのオプションの2番目の引数は、メディアクエリのリストです：

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

JavaScriptによるCSSの変更

純粋なJavaScript

要素のstyleプロパティを使用して、JavaScriptでCSSのプロパティ値を追加、削除、変更することは可能です。

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

スタイルのプロパティは、ラクダの小文字スタイルで指定されています。この例では、CSSプロパティfont-familyがjavascriptのfontFamilyになることがわかりfontFamily 。

要素を直接操作する代わりに、JavaScriptで<style> <link>要素または<link>要素を作成し、HTML文書の<body>または<head>に追加することができます。

jQuery

jQueryを使用してCSSプロパティを変更すると、さらに簡単になります。

$('#element').css('margin', '5px');

複数のスタイルルールを変更する必要がある場合：

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQueryにはハイフンを含むCSSルール（ font-size ）を変更する2つの方法があります。スタイルルール名を引用符で囲むかキャメルケースにすることができます。

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

も参照してください

CSSによるリストのスタイル設定

リスト項目のlist-style-type 、 list-style-image list-style-type 、 list-style-image 、 list-style-position 3つのプロパティがあります。その順序で宣言する必要があります。デフォルト値はそれぞれdisc、outside、noneです。各プロパティは、別々に宣言することも、 list-style短縮形プロパティを使用して宣言することもできます。

list-style-typeは、各リスト項目に使用される箇条書きの形またはタイプを定義します。

list-style-type許容される値のいくつかは次のとおりです。

ディスク
サークル
平方
小数点以下の
下ローマン
上ローマ
無し

（網羅的なリストについては、 W3C仕様wikiを参照してください）

たとえば、各リストアイテムに四角い箇条書きを使用するには、次のプロパティと値のペアを使用します。

li {
    list-style-type: square;
}

list-style-imageプロパティーは、リスト項目アイコンに画像が設定されているかどうかを判断し、値noneまたは画像を指すURLを受け入れます。

li {
    list-style-image: url(images/bullet.png);
}

list-style-positionプロパティは、リストアイテムマーカーの配置場所を定義し、 "inside"または "outside"という2つの値のいずれかを受け入れます。

li {
  list-style-position: inside;
}

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

CSS チュートリアル
CSSを使い始める

サーチ…

備考