IT Design 旅 PetLife Life RenojiStock AboutUs
ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs（Mozilla）
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに「画像」の埋め込む方法Webページに「動画」を埋め込む方法Webページに「音声ファイル」を埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素





IT Memo >>> HTML >>> 【HTML】CSSの使い方

【HTML】CSSの使い方

【HTML】
CSSの使い方




「CSS」を使用するには、
「HTML」と「CSS」をリンクさせる必要があります。

「CSS」と「HTML」をリンクさせるには、

・HTMLファイルに「style」タグを利用して直接記述する方法
・HTMLタグの「style」属性を利用して、直接タグに記述する方法
・CSS外部ファイルにHTMLファイルをリンクさせる方法

などの方法があります。

推奨されているのは、
「CSS外部ファイル」に記述 「HTMLファイル」と「CSS外部ファイル」をリンクさせて、
「CSS」をWeb表示に適用させる方法です。
他のページにリンクさせるだけで、
同じレイアウトを簡単に適用できるからです。









CSSとは


「CSS」は、「HTML」と共にホームページやBlogなどのWebページを作り上げるプログラミング言語の１つ。
「CSS」は、その中で「レイアウト」「デザイン」を担当するプログラミング。
正式には、「Cascading Style Sheets（カスケーディング・スタイル・シート）」という。


Back



CSS外部ファイルとリンクさせる方法


スタイルシート（CSS専用ファイル）を作って、「外部CSSファイル」として、CSSを記述し、 複数のHTMLファイルにリンクさせ、１つのスタイルシートで、複数のWebページのレイアウトデザインを統括できるのが最大のメリット。
複数ページに同じレイアウトデザインを割り当てるときには、外部CSSファイルのスタイルシートを作成して記述するようになっています。
ページをリンクさせるだけで良いのと、修正を加えるときにスタイルシートを変更するだけで良いので、非常に効率が良い。

外部CSSファイル「スタイルシート」のメリット
・外部CSSは、いくつものHTMLドキュメントにリンク可能。
・同じ内容をHTMLドキュメントごとに記述しなくて済むので便利。


「link」タグは、外部ファイルとHTMLファイルをリンクさせるた為のタグ。
CSSのコードを記述した外部ファイルとHTMLファイルをリンクすることによって、 外部ファイルに記述されたCSSを利用することができるようになる。
CSSとHTML文書をリンクさせるには、
HTML文書の「<head>」タグと「</head>」タグの間に記入する。
リンクのためのHTML文書を記述して、CSSの内容は、CSSに記述する。

「<head>」タグと「</head>」タグの間に、直接CSSの内容を記述することもできるが、
基本はCSSに記述する。


CSS外部ファイルの拡張子

CSSファイル名.css


HTMLファイルへ記述例


<!DOCTYPE html>
<html>
<head>
<title>Sample.htmlのタイトル</title>

<--!外部CSSファイルのリンク-->
<link href="./CSSファイル名.css" rel="stylesheet" type="text/css" />

<--!CSSの直接記述する方法-->
<style type="text/css">
<--!CSSを記述-->
</style>


</head>
<body>


<h1>ページタイトル</h1>


<div id="SampleID">
SampleID
</div>


<div class="SampleClass">
SampleClass
</div>


</body>
</html>




「style」タグの属性

属性意味
disabledこのスタイルシートを無効化。
media=media スタイルシートを適用するメディアを指定。
screen＝画面など、ページ分割の無いメディア
print＝プリンタなど、ページ分割のあるメディア
all＝全メディア（既定値）
type=type スタイルシートの言語を指定。
「text/css」＝Cascading Style Sheets
「text/javascript」＝JavaScript Style Sheets
scoped style要素の親要素をルートとするサブツリーにのみ、スタイルを適用。
href属性 外部ファイルのURL。
rel属性 「リンクタイプ」といい、リンク先のリソースとの関係を記述。

  • index ----- 現在のドキュメントに対してインデックスを提供する文書へのリンク。
  • contents ----- 現在のドキュメントに対して目次を提供する文書へのリンク。
  • next ----- 順序が定められた一連の文書の中で、次の文書へのリンク。
  • prev ----- 順序が定められた一連の文書の中で、前の文書へのリンク。
  • start ----- 一連の文書の中の最初の文書へのリンクを示します。サーチエンジンのロボットなどへのナビゲーションとしても利用可能。
  • stylesheet ----- 別のファイルとして用意したスタイルシートを使う場合に記述。
  • alternate ----- hreflang属性などと合わせて、ドキュメントの別バージョンへのリンクを用意します。
  • made ----- これのみrev属性の値となります。ドキュメントの作者を示し、作者へのメールURLや、ホームページのURLを指定。
  • chapter -----
  • section -----
  • subsection -----
  • appendix -----
  • glossary -----
  • copyright -----
  • help -----
  • bookmark -----
rev属性 リンクタイプと呼ばれ、リンク元のリソースとの関係を記述。
type属性 参照先の文書のタイプを記述。
hreflang属性 リンク先の言語バージョンを記述。
media属性 リンク先のメディアバージョンを記述。印刷用などへのリンクの際利用する属性。
title属性 リンク先のタイトルを記述。
charset=charset 参照先の文書のキャラクタセットを記述。（Shift_Jisなど）
HTML5 には未定義。
disabled = (e4+)このリンクタグを無効化。
hreflang=lang 参照先の文書の言語を指定。
media=media 文書の出力先を指定。
screen - 通常の画面に出力。
print - 印刷プレビュー画面に出力。
all - 全出力先に出力。
target=target 表示ターゲットを記述。
type=type 参照先の文書の文書タイプを記述。
sizes=n 「rel="icon"」の際のアイコンサイズを「sizes="16x16"」という指定で変更する。
「sizes="16x16 32x32" 」という複数記述も可能。


Back



CSSをHTMLファイルに記述する方法


CSSを記述する方法は、2通りあります。

・タグに「style」属性を使って、直接コードを記述する方法
・CSS専用のファイル（スタイルシート）を作り、HTMLファイルとリンクさせる方法


タグに「style」属性を使って、直接コードを記述する方法

そのページだけや、その部分だけにレイアウトデザインを適用させたい時には、HTMLタグに直接入力することも可能です。
その際は、タグ内に「<div style="CSSを記述">」のように入力することで、CSSがそのタグに適用される。



記述例


<head>

外部CSSファイルへのリンク


<link href="./CSSファイル名.css" rel="stylesheet" type="text/css" />


CSSをHTMLヘッダーに直接記述する方法


<style type="text/css">
CSSを記述
</style>

</head>


HTMLタグに直接記述する方法

<div style="CSSを記述">
HTMLコードを記述
</div>



Back



CSSの書式


CSS ＝ Cascading Style Sheets(カスケーディング・スタイル・シート）

ウェブページのスタイルを指定するための言語。
ワープロソフトなどの作成文書なども含めて、文書スタイル指定技術全般をスタイルシートという。
HTMLやXHTMLなどのWebにスタイルを適用する時に、スタイルシート言語の1つであるCSSが利用される。


CSSは、HTML文書のコンテンツをどのように装飾するかを指定する言語である。
プリンタなどの機器で印刷・出力される際の出力スタイル・音声で読み上げられる際の再生スタイルなどを指定することもできる。


CSS外部ファイルの拡張子

CSSファイル名.css


CSSのコメント


コメントは、プログラムを記述する中で、目印や説明文を残したいが、
プログラムへ影響をさせたくない文を除外（コメントアウト）する時に使う手法。

CSSのコメントは、「/*」と「*/」の間に記述することが決まっている。
コメントの書き方は、各プログラムによって異なってくる。

コメントは、色々と利用ができて、かなり便利。
  • コメント
  • CSSコードのカテゴリー分け
  • エラー検出


コメントの記述例


シンプルなCSSコメント
/* コメント文 */
h1 { color: red; }


エラー確認のために使うコメント
h1 {
margin:0 10px 20px 30px;

/*
padding:5px 20px;
color: red;
*/

}
上記のように、コメントでエラーのブロックを隠し、一つずつコメントからはずすことで、正常に機能しないエラーを探す。


コメントで区分ラインを作る方法
/*---------------------------*/
/*+++++++++++++++++++++++++++*/
/*///////////////////////////*/

カテゴリを分けて、CSSを記述するときなど、コメントでラインを作って区分すると便利。



Back


CSS外部ファイルの書式


CSSヘッダ部分

@charset "Shift_JIS";
・
・
・


CSSコードの記述

セレクタ { コード名: 値 !important;}
セレクタ { コード名: 値 !important;}
セレクタ { コード名: 値 !important;}
・
・
・



セレクタ スタイル適用する対象をセレクタといい、
「タグ名」「クラス名」「ID名」などをセレクタの場所に記述する。
その対象を指定する属性を「セレクタ」は、 CSSスタイルを適用する対象を指定するための機能。
対象をセレクト＝指定することから、セレクタという。

セレクタの値は、 スタイルの対象「タグ名（要素）」「ID名」「クラス名」などを記述。
英語では、「要素」のことを「Element」という。

Element = 要素 = タグ名
コード名 セレクタに、どのような装飾をするか、装飾を指定するコード名を明記する。
値 値によって、コード名で指定された装飾を、どれくらい適用するかを指定する。
!importantimportant 宣言を指定することにより、すべてのスタイル指定よりも優先される。優先させたいときにのみ利用する。


セレクタの一覧

* { ... }すべての要素
Element { ... }指定の要素
ns|Element { ... }名前空間nsの中の要素
Element.class { ... }class属性の値が一緒の指定要素。「.（ポイント）」の後にクラス名で記述。クラス名だけでの指定も可能。
.class { ... }class属性の値が一緒のすべての要素。「.（ポイント）」の後にクラス名で記述。
Element#id { ... }id属性の値が同じ要素。ID名だけでの指定も可能。
#id { ... }id属性の値が同じすべての要素。
Element, Element { ... }要素を複数指定する場合。「,（コンマ）」で区切る。
Element Element { ... }要素の中の要素を指定する場合。要素の子孫として出現する要素。
Element > Element { ... }要素の中の要素を指定する場合。要素の子として出現する要素
Element + Element { ... }要素の直後に登場する兄弟要素
Element ~ Element { ... }要素よりも後ろに登場する兄弟要素
Element[attr] { ... }attr属性を持つすべての要素
Element[ns|attr] { ... }名前空間ns中のattr属性を持つすべての要素
Element[attr="val"] { ... }attr属性の値が val であるすべての要素
Element[attr~="val"] { ... }attr属性の値のひとつが val であるすべての要素
Element[attr|="val"] { ... }attr属性の値が val もしくは val- で始まるすべての要素
Element[attr^="val"] { ... }attr属性の値が val で始まるすべての要素
Element[attr$="val"] { ... }attr属性の値が val で終わるすべての要素
Element[attr*="val"] { ... }attr属性の値が val を含むすべての要素
Element:link { ... }未訪問のリンク
Element:visited { ... }訪問済みのリンク
Element:active { ... }マウスでクリック中など、アクティブな要素
Element:hover { ... }マウスが乗せられている要素
Element:focus { ... }フォーカスがあてられている要素
Element:root { ... }文書のルート要素。HTMLの場合は常に html要素
Element:first-child { ... }親要素から見て最初の子要素
Element:last-child { ... }親要素から見て最後の子要素
Element:first-of-type { ... }親要素から見て最初の要素
Element:last-of-type { ... }親要素から見て最後の要素
Element:nth-child(n) { ... }親要素から見て前から n番目の子要素
Element:nth-last-child(n) { ... }親要素から見て後から n番目の子要素
Element:nth-of-type(n) { ... }親要素から見て前から n番目の要素
Element:nth-last-of-child(n) { ... }親要素から見て後から n番目の要素
Element:only-child { ... }親要素から見て唯一の子要素である場合の要素
Element:only-of-type { ... }親要素から見て唯一の要素である場合の要素
Element:empty { ... }子要素を持っていない要素
Element:target { ... }クリックされたリンクの対象要素
Element:lang(c) { ... }言語cで記述された要素
Element:enabled { ... }有効な(enabled)状態の要素
Element:disabled { ... }無効な(disabled)状態の要素
Element:checked { ... }チェックされた(checked)状態の要素
Element:indeterminate { ... }チェック状態が不確定の状態の要素
Element:first-line { ... }要素の中の1行目
Element:first-letter { ... }要素の中の1文字目
Element:before { ... }要素の先頭
Element:after { ... }要素の末尾
Element:selection { ... }要素選択された箇所
Element:not(s) { ... }否定疑似クラス


CSSヘッダーの書式

@charset　（必要に応じて記述。省略可能。）
@charset "Shift_JIS";

@font-face　（必要に応じて記述。省略可能。）
@font-face {
font-family: myfont;
src: url(http://www.yyy.zzz/myfont.woff) format("woff");
}
* {
font-family: myfont;
}

@import　（必要に応じて記述。省略可能。）
@import url(http://www.yyy.zzz/style.css);
@import "http://www.yyy.zzz/style.css"; /* CSS2以降 */


@media　（必要に応じて記述。省略可能。）
@media screen {
em { color: red; }
}
@media print {
em { font-weight: bold; }
}
@media print, screen {
em { font-size: 12pt; }
}


@namespace　（必要に応じて記述。省略可能。）
ネームスペース(名前空間)を指定します。最初の形式はデフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

@namespace "http://www.w3.org/1999/xhtml"; /* 名前無しのデフォルトの名前空間 */
@namespace svg "http://www.w3.org/2000/svg"; /* 名前(svg)付きの名前空間 */

@namespace で定義した名前は、次のように使用します。

h1 { color: red; } /* デフォルトの名前空間の中の h1要素 */
svg|rect { ... } /* svg名前空間の中の rect要素 */


@page　（必要に応じて記述。省略可能。）
@page { margin-top: 2cm; margin-bottom: 2cm; }
@page :first { margin-right: 4cm; }
@page :right { margin-right: 4cm; }
@page :left { margin-left: 4cm; }


Back


CSSコードの書式


書式
tag{ コード名: 値 !important;}

「!important」の記述（すべてのスタイル指定よりも優先される）
tag{ コード名: 値 !important;}

タグ名での指定
h1 { color: #00ff00; }

ID名での指定
#ID名 { color: #00ff00; }

クラス名での指定
.クラス名 { color: #00ff00; }

特定タグの中のクラス名での指定
タグ名 .SampleClassName { color: #00ff00; }

複数タグへの指定
h1, span, div{ color: #00ff00; }

複数クラスへの指定
.クラス名, .クラス名, .クラス名{ color: #00ff00; }

複数セレクタへの指定
ID名, クラス名, h1, span{ color: #00ff00; }

「ｈ１」タグの中の「span」タグの指定
h1 span{ color: #00ff00; }

ID名の中の「span」タグへの指定
#ID名 span { color: #00ff00; }

クラス名の中の「span」タグへの指定
.クラス名 span{ color: #00ff00; }

未訪問のリンク
link { color: #00ff00; }

訪問済みのリンク
a:visited { color: #00ff00; }

マウスでクリック中など、アクティブな要素
a:active { color: #00ff00; }

マウスが乗せられている要素
a:hover { color: #00ff00; }

一括指定
a:link, a:visited, a:active { color: #00ff00; }

ID名での一括指定
ID名:link, ID名:visited, ID名:active { color: #00ff00; }

クラス名での一括指定
.クラス名:link, .クラス名:visited, .クラス名:active { color: #00ff00; }




CSSで利用する単位


色の指定

形式説明
#RGB初心者向き
#RRGGBB初心者/デザイナー向き
colorName初心者向き
rgb(R, G, B)デザイナー向き
rgba(R, G, B, a)デザイナー向き
hsl(h, s, l)色相・彩度・明度を数値で指定。デザイナー向け。
hsla(h, s, l, a)デザイナー向け。
transparent透明度の指定
currentColor「color」プロパティを継承した値


単位

単位種別説明
em相対的要素のフォントサイズ。文字 'M' の横幅が語源。
ex相対的文字 x の高さ(x-height)。
ch相対的文字 0 の横幅。
rem相対的ルート要素のフォントサイズ(root em)。
vw相対的表示領域の横幅(viewport's width)。「1vw=表示領域の横幅10%」
vh相対的表示領域の高さ(viewport's height)。「1vh＝表示領域の縦幅10%」
vmin相対的表示領域の横幅と高さの小さな方(viewport's mininum length)
cm絶対的センチメートル(1cm=10mm)。
mm絶対的ミリメートル(10mm=1cm)
in絶対的インチ(1in=2.54cm)
px絶対的ピクセル(1px=1/96in)
pt絶対的ポイント(1pt=1/72in)
pc絶対的パイカ(1pc=12pt)



Back