Tips – CSSで同じ要素に共通する文字列を付加する

2020-11-30 / tau / コメントする

概要

HTMLで同じタグやクラスの先頭や末尾に共通の文字列を表示させる方法。

たとえばh1要素の先頭に必ず”●”をつけたいときなど。

CSSの書式

[セレクター]:before {content: [文字列];}
[セレクター]:after {content: [文字列];}

動作確認

以下はh1要素の前後に共通の文字列を付加するように指定したCSSを、HTMLのヘッダー部分に書いた例。

これのページを表示させると、h1要素は全てセンタリングされ、先頭に"<<"、末尾に">>"の文字列が付加され、すべてのタグに繰り返し文字を打つ必要がない。

スタイルで記述する場合、<などのエンティティ－で書く必要はない。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Template by content</title>
    <style type="text/css">
      h1:before {content: "<<";}
      h1:after {content: ">>";}
      h1 {text-align: center;}
    </style>
  </head>
  <body>
    <h1>テスト</h1>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Template by content</title>

h1:before {content: "<<";}

h1:after {content: ">>";}

h1 {text-align: center;}

</style>

</head>

<body>

</body>

</html>

CSS3 – text-decoration

2020-11-30 / tau / コメントする

概要

コンテナーのテキストの下線・上線・取り消し線の種類・スタイル・色を指定する。blinkも指定できるが殆どのブラウザーで機能しない。

書式

text-decoration [種類](, [スタイル])(, [色])

text-decoration-line [種類]
text-decoration-style [スタイル]
text-decoration-color [色]

値

種類

none: テキストに対する線の装飾を無効にする。アンカー要素でデフォルト指定されている下線も表示されなくなる。
underline: 下線（テキストの下）
overline: 上線（テキストの上）
line-through: 取り消し線（テキストの縦中央）

style

solid: 実線。
dotted: 点線。
dasshed: 破線。
double: 二重線。
wavy: 波線。

動作確認

線の種類

    <p style="text-decoration: none;">noneを指定</p>
    <p style="text-decoration: underline;">underlineを指定</p>
    <p style="text-decoration: overline;">overlineを指定</p>
    <p style="text-decoration: line-through;">line-throughを指定</p>

<p style="text-decoration: none;">noneを指定</p>

<p style="text-decoration: underline;">underlineを指定</p>

<p style="text-decoration: overline;">overlineを指定</p>

<p style="text-decoration: line-through;">line-throughを指定</p>

noneを指定

underlineを指定

overlineを指定

line-throughを指定

線のスタイル

    <p style="text-decoration: underline solid;">underline solidを指定</p>
    <p style="text-decoration: underline dotted;">underline dottedを指定</p>
    <p style="text-decoration: underline dashed;">underline dashedを指定</p>
    <p style="text-decoration: underline double;">underline doubleを指定</p>
    <p style="text-decoration: underline wavy;">underline wavyを指定</p>

<p style="text-decoration: underline solid;">underline solidを指定</p>

<p style="text-decoration: underline dotted;">underline dottedを指定</p>

<p style="text-decoration: underline dashed;">underline dashedを指定</p>

<p style="text-decoration: underline double;">underline doubleを指定</p>

<p style="text-decoration: underline wavy;">underline wavyを指定</p>

underline solidを指定

underline dottedを指定

underline dashedを指定

underline doubleを指定

underline wavyを指定

アンカー要素の下線を消す

    <p><a href="#top">通常のアンカー要素</a></p>
    <p><a href="#top" style="text-decoration: none;">アンカー要素にnoneを指定</a></p>

1 2	<p><a href="#top">通常のアンカー要素</a></p> <p><a href="#top" style="text-decoration: none;">アンカー要素にnoneを指定</a></p>

通常のアンカー要素

アンカー要素にnoneを指定

CSS3 – border

2020-11-30 / tau / コメントする

概要

コンテナーのボーダーのスタイル、太さ、色を指定する。

書式

以下の書式で上下左右全てのボーダーのスタイル・太さ・色を一括指定。

border: [スタイル] [太さ] [色]　値の順番は任意

以下の書式はスタイル／太さ／色のいずれかを全てのボーダーに対して一括指定。

border-style: [スタイル]
border-width: [太さ]
border-color: [色]

以下の書式は上／下／左／右のいずれかのボーダーに対してスタイル・太さ・色を一括指定。

border-top: [スタイル] [太さ] [色]
border-bottm: [スタイル] [太さ] [色]
border-left: [スタイル] [太さ] [色]
border-right: [スタイル] [太さ] [色]

また上記4つそれぞれについてスタイル、太さ、色のみを個別に指定可能。border-topを例にとると以下の通り。

border-top-style: [スタイル]
border-top-width: [太さ]
border-top-color: [色]

値

スタイル

none: 非表示で太さも0になる。他のボーダーと重なる場合、他方のボーダーの値が優先される。
hidden: 非表示で太さも0になる。他のボーダーと重なる場合、この値が優先されて非表示になる。
solid: 実線。
dotted: 点線。
dasshed: 破線。
double: 二重線。指定した線の太さの中で二重線になるため、1本の線は細くなる。
groove: 立体的に窪んだ線（ノミなどで掘り込んだような線）。
ridge: 立体的に盛り上がって線（土手のような線）。
inset: ブロック全体が窪んだように見える線。
outset: ブロック全体が盛り上がったように見える線。

動作確認

指定方法

一括指定

周囲全てのボーダーのスタイル・太さ・色を一括指定する場合、値の順番は任意。

    <p style="border: solid 3px blue;">solid 1px blue;</p>
    <p style="border: 3px solid red;">border: 3px solid red;</p>

1 2	<p style="border: solid 3px blue;">solid 1px blue;</p> <p style="border: 3px solid red;">border: 3px solid red;</p>

solid 1px blue;

border: 3px solid red;

個別ボーダーの指定

    <p style="border-top: solid 3px red;">border-top: solid 3px red;</p>
    <p style="border-bottom: solid 3px red;">border-bottom: solid 3px red;</p>
    <p style="border-left: solid 3px red;">border-left: solid 3px red;</p>
    <p style="border-right: solid 3px red;">border-right: solid 3px red;</p>

<p style="border-top: solid 3px red;">border-top: solid 3px red;</p>

<p style="border-bottom: solid 3px red;">border-bottom: solid 3px red;</p>

<p style="border-left: solid 3px red;">border-left: solid 3px red;</p>

<p style="border-right: solid 3px red;">border-right: solid 3px red;</p>

border-top: solid 3px red;

border-bottom: solid 3px red;

border-left: solid 3px red;

border-right: solid 3px red;

線のスタイル

    <p style="border: solid 2px">solid 2px</p>
    <p style="border: dotted 2px">dotted 2px</p>
    <p style="border: dashed 2px">dashed 2px</p>
    <p style="border: double 4px">double 4px</p>
    <p style="border: groove 8px">groove 8px</p>
    <p style="border: ridge 8px">ridge 8px</p>
    <p style="border: inset 8px">inset 8px</p>
    <p style="border: outset 8px">inset 8px</p>

<p style="border: solid 2px">solid 2px</p>

<p style="border: dotted 2px">dotted 2px</p>

<p style="border: dashed 2px">dashed 2px</p>

<p style="border: double 4px">double 4px</p>

<p style="border: groove 8px">groove 8px</p>

<p style="border: ridge 8px">ridge 8px</p>

<p style="border: inset 8px">inset 8px</p>

<p style="border: outset 8px">inset 8px</p>

solid 2px

dotted 2px

dashed 2px

double 4px

groove 8px

ridge 8px

inset 8px

noneとhiddenの効果

以下は表のセルの罫線が重なるようにしている。

cccのセルのボーダースタイルはnoneなので、aaaのセルのボーダーは表示され、他のボーダーは表示されない
dddのセルのボーダースタイルはhiddenなので、bbbのセルのボーダーは表示されず、他のボーダーも表示されない

    <table style="border-collapse: collapse;">
      <tr>
        <td style="border: solid blue;">aaa</td>
        <td style="border: solid red;">bbb</td>
      </tr>
      <tr>
        <td style="border: none;">ccc</td>
        <td style="border: hidden;">ddd</td>
      </tr>
    </table>

<tr>

</tr>

<tr>

</tr>

</table>

aaa	bbb
ccc	ddd

CSS3 – text-align

2020-11-30 / tau / コメントする

概要

ブロックコンテナ内の行のそろえ方を指定する。

大きく分けると、以下の4つ。

絶対的な揃え位置を指定
文章を書く方向を基準に揃え位置を指定
ジャスティフィケーション（両端均等割付）
親要素の指定の継承

書式

text-align: 値指定;

値

デフォルトの値はstart。

left/center/right: ブロックコンテナ内の各行を左／中央／右にそろえる。
start/end: テキストを書く方向の始端／終端にそろえる。文を左から右へ書く場合はleft/right、右から左へ書く場合はright/leftと等価。
justify/justify-all: 両端に均等割り付けする。日本語の場合は作用しない。justify-allは最後の行も強制的に均等割り付けとなっているが、ほとんどのブラウザで実装されていない。
match-parent: 親要素の値を継承するとされているが、動作未確認。

動作確認

left/center/right

ブロックコンテナーの各行が、左／中央／右に揃えられている。1行がブラウザの幅を超える場合、最後の行が左／中央／右に揃えられる。

    <p style="text-align: left;">text-align: left;は左寄せ</p>
    <p style="text-align: center;">text-align: center;はセンタリング</p>
    <p style="text-align: right;">text-align: right;は右寄せ</p>
    <p style="text-align: center;">
      ゴーシュは町の活動写真館でセロを弾く係りでした。
      けれどもあんまり上手でないという評判でした。
      上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
      いつでも楽長にいじめられるのでした。
    </p>

<p style="text-align: left;">text-align: left;は左寄せ</p>

<p style="text-align: center;">text-align: center;はセンタリング</p>

<p style="text-align: right;">text-align: right;は右寄せ</p>

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

</p>

text-align: left;は左寄せ

text-align: center;はセンタリング

text-align: right;は右寄せ

text-alignのデフォルトはleft

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

start/end

左から右に書く場合

左から右に書かれる場合、end指定がrightと同じ効果になっている。

    <p style="text-align: end;">
      ゴーシュは町の活動写真館でセロを弾く係りでした。
      けれどもあんまり上手でないという評判でした。
      上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
      いつでも楽長にいじめられるのでした。
    </p>
    <p style="text-align: end;">
      ゴーシュは町の活動写真館でセロを弾く係りでした。
      けれどもあんまり上手でないという評判でした。
      上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
      いつでも楽長にいじめられるのでした。
    </p>

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

</p>

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

</p>

右から左に各場合

右から左に書く場合には、startはright、endはleftと等価。

    <p style="direction: rtl; unicode-bidi: bidi-override; text-align: start;">
      右から左に書いてstart指定
    </p>
    <p style="direction: rtl; unicode-bidi: bidi-override; text-align: end;">
      右から左に書いてstart指定
    </p>

右から左に書いてstart指定

</p>

右から左に書いてstart指定

</p>

右から左に書いてstart指定

右から左に書いてend指定

justify

ジャスティフィケーション（両端均等割付）は、ワードとスペースで構成された文章を、行ごとに両端に均等割付する。

以下の1つ目の分はデフォルト値(start)、2つ目の分はjustfyを指定している。ブラウザーの幅を変えるとジャスティフィケーションの様子がわかる。3つ目で日本語にjustifyを指定しているが、効果はない。

    <p>
      ONCE upon a time, many years ago—when our grandfathers were little
      children—there was a doctor; and his name was Dolittle—John Dolittle,
      M.D. “M.D.” means that he was a proper doctor and knew a whole lot.
    </p>
    <p style="text-align: justify;">
      ONCE upon a time, many years ago—when our grandfathers were little
      children—there was a doctor; and his name was Dolittle—John Dolittle,
      M.D. “M.D.” means that he was a proper doctor and knew a whole lot.
    </p>
    <p style="text-align: justify">
      ゴーシュは 町の活動写真館で セロを弾く係りでした。
      けれども あんまり上手でない という評判でした。
      上手でないどころではなく 実は仲間の楽手のなかでは いちばん下手でしたから、
      いつでも 楽長にいじめられるのでした。
    </p>

<p>

ONCE upon a time, many years ago—when our grandfathers were little

children—there was a doctor; and his name was Dolittle—John Dolittle,

M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

</p>

ONCE upon a time, many years ago—when our grandfathers were little

children—there was a doctor; and his name was Dolittle—John Dolittle,

M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

</p>

ゴーシュは町の活動写真館でセロを弾く係りでした。

けれどもあんまり上手でないという評判でした。

上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

いつでも楽長にいじめられるのでした。

</p>

ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

justify-all

ブラウザーの幅を変化させてもジャスティフィケーションの効果は観られず、無指定の場合と同じ。

    <p style="text-align: justify-all;">
      ONCE upon a time, many years ago—when our grandfathers were little
      children—there was a doctor; and his name was Dolittle—John Dolittle,
      M.D. “M.D.” means that he was a proper doctor and knew a whole lot.
    </p>

ONCE upon a time, many years ago—when our grandfathers were little

children—there was a doctor; and his name was Dolittle—John Dolittle,

M.D. “M.D.” means that he was a proper doctor and knew a whole lot.

</p>

CSS3 – color/background-color

2020-11-30 / tau / コメントする

概要

colorは前景色、background-colorは背景色を指定する。

書式

color: 色指定;

background-color: 色指定；

値

色指定にいくつかの方法がある。

カラーネーム: red, grayなど特定の色に対応したキーワードで設定。
16進コード(6桁): #RRGGBBの6桁で指定する。2桁1バイトごとにR, G, Bに対応。
16進コード(3桁): #RGBの3桁で指定する。#RGBという指定は#RRGGBBと各色を繰り返した値に相当する。
rgb(r, g, b)/rgb(r, g, b, a): 3つの引数はそれぞれ0～255の整数で、R, G, Bに対応。4つ目の引数がある場合は透過度を表し、実数で指定する。
hsl(h, s, l)/hsl(h, s, l, a): 色相(Hue)、彩度(Saturation)、輝度(Lightness)を実数で指定する。4つ目の引数がある場合は透過度を表し、実数で指定する。

CSS3 – 基本色

2020-11-29 / tau / コメントする

基本の16色とカラーネーム、カラーコードは以下の通り。

色	カラーネーム	カラーコード
	black	#000000
	aqua	#00FFFF
	blue	#0000FF
	fuchsia	#FF00FF
	gray	#808080
	green	#008000
	lime	#00FF00
	maroon	#800000
	navy	#000080
	olive	#808000
	purple	#800080
	red	#FF0000
	silver	#C0C0C0
	teal	#008080

HTML5 – a～アンカー

2020-11-29 / tau / コメントする

書式

<a href="href属性" target="target属性">...</a>

属性

href属性

リンク先のURL、アンカーリンク（ページ内リンク）を組み合わせて指定する。

target属性

_self	現在のページでリンク先を開く（デフォルト）
_blank	新しいページ／タブでリンク先を開く

HTML5 – 大きなテーブルのスクロール

2016-12-31 / tau / コメントする

横幅が長いテーブルの表示

セルの内容が連続した長いASCII文字列の場合、それが一つのワードとみなされて改行されず、表が横に伸びて表示が乱れる。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc

通常の英文の場合は、表示領域の幅に合わせてワード境界で自動改行される。

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

マルチバイト文字の場合は、各文字がワード扱いになり、任意の位置で自動改行される。

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

横スクロール

基本形

切れ目のないASCII文字列を画面幅に合わせて横スクロールさせたい場合。

<div style="overflow: auto;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc

自動改行の抑止

英文やマルチバイト文字列の場合、スクロール表示させようとしても、自動改行されて常に表示領域に収まるように表の幅が調整されるので、スクロールが効かない。

そこで空白(ワード境界)での改行を抑止させると、折り返されずに票の横幅が長くなり、横スクロールの対象となる。

<div style="white-space: nowrap; overflow: auto;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例：英文

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

実行例：和文

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

表幅の固定

自動改行の抑止では、一文が一行となって表の幅が広すぎる。適当なところで折り返したい場合には、表やセルの幅を指定するとよい。

幅指定の際は、ピクセルやセンチ／インチなどのデバイス依存単位より、emなどの文字相当の単位がよい。

<div style="overflow: auto;">
<table style="width: 50em;">
<tbody>
.....
</tbody>
</table>
</div>

<tbody>

.....

</tbody>

</table>

</div>

実行例：英文

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

実行例：和文

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

幅と高さの指定

幅と高さをピクセル単位で指定した例。

<div style="height: 400px; width: 300px; overflow: scroll;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例

aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee

HTML5 – IE互換性

2016-12-07 / tau / コメントする

CSSの指定前の処理(IE対応)

IE8以下ではHTML5に対応していないため、新要素は無視されてしまう。IEをHTML5に対応させるJavaScriptがhtml5shivサイトで公開されており、これを最初に読み込んで対応する。

<!--[if lt IE 9]>
<script type="text/javascript"
           src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href~[ファイル名]">

<!--[if lt IE 9]>

src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

新要素に対してCSSの設定をしている場合、スクリプトがCSSの設定をオーバーライドしないよう、スクリプトの記述をCSS呼び出しの前に置かなければならない。
IEの判定部分を<!–[if IE]>としている例もある。
HTML5ではscript要素のtype属性の初期値は”text/javascript”として設定されているので省略可能。

IEの条件付きコメント

Microsoft Internet Explorer (MSIE)において、HTMLソースコード中にある条件付きのステートメント。 IE5で初めて導入され、IE9までサポートされた。IE10以降この機能は廃止され、単なるコメントとして扱われる。

コメントの種類	記述
標準のHTMLコメント	<–コメント–>
下の階層が隠れる	<!–[if expression]>HTML<![endif]–>
下の階層が見える	<![if expression]>HTML<![endif]>

下の階層が隠れる条件付きコメント

ブラウザがIEの場合のみHTMLが解釈され、IE以外の場合はブラウザからHTMLが見えない。たとえば、ブラウザがIEの場合のみスクリプトを実行するような場合。

<!--[if IE 8]>
～IE8の場合のみ認識されるHTML～
<![endif]-->

<!--[if IE 8]>

～IE8の場合のみ認識されるHTML～

<![endif]-->

下の階層が見える条件付きコメント

以下は、Microsoftのデフォルトの記法で、ブラウザがIEの場合にはHTMLが解釈されず、IE以外のブラウザにはHTMLが見える記法。

<![if !IE]>
～IEでないブラウザで認識されるHTML～
<![endif]>

<![if !IE]>

～IEでないブラウザで認識されるHTML～

<![endif]>

の表現をIEから見ると、ブラウザがIEなのでifの中身は無視される。一方IE以外のブラウザからみると前後のタグ自体が無視されるため、ifの中身だけが見えて実行される。

この記法は正当な(X)HTMLに準拠したものではなく、IE以外のブラウザで前後のタグが無視されることを期待しているにすぎない。そこで、W3C標準を順守するため、以下のような表現が考えられる。

<!--[if !IE]>-->
～IEでないブラウザで認識されるHTML～
<!--<![endif]-->

～IEでないブラウザで認識されるHTML～

この記法は、正当な(X)HTMLである。ただし条件式のパターンによっては、条件が真となる場合に、HTMLの解釈の前に”–>”を表示してしまう。

<!--[if gt IE 6]><!-->
～IE以外のブラウザとIE7以降で認識されるHTML～
<!--<![endif]-->

～IE以外のブラウザとIE7以降で認識されるHTML～

HTML5 – 標準形・ひな形

2016-12-07 / tau / コメントする

全体構成

<!DOCTYPE html>

<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    [CSS設定]
  </head>

  <body>
    .....
  </body>

</html>

<!DOCTYPE html>

<head>

[CSS設定]

</head>

<body>

.....

</body>

</html>

DOCTYPE宣言で始める
html要素の中にhead要素とbody要素を記述
head要素の中には、meta要素、title要素と、必要に応じてスタイル設定のための要素を記述

DOCTYPE宣言

<!DOCTYPE html>

1	<!DOCTYPE html>

XHTMLに比べて簡略化
ブラウザなどにHTML5であることを明示
DOCTYPE宣言がないと、ブラウザによってはレンダリングモードが互換モードとなりCSSの解釈が意図と異なるレイアウトとなる場合がある
DOCTYPE宣言によって、主要なブラウザは標準モードとなる。

html要素

lang属性による言語の指定

<html lang="ja">

1	<html lang="ja">

htmlタグのlang属性で言語を指定し、ブラウザ・検索サイトなどに伝える。

head要素

文字コード指定

<meta charset="utf-8">

1	<meta charset="utf-8">

head要素内のmeta要素で文字コードを指定する
HTML4以前の記述も可能だが、HTML5ではより簡略な表現が可能
この宣言より前のものは文字化けの可能性があるため、head要素の冒頭に記述

title

<title>[タイトル]</title>

1	<title>[タイトル]</title>

head要素内のtitle要素で指定
[タイトル]がブラウザのタイトルバーに表示される
検索サイトでの検索結果のタイトルにも使われる

CSS設定

外部ファイル指定

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

1	<link rel="stylesheet" type="text/css" href="[ファイル名]">

head要素内のlinkタグの属性で指定
HTML5ではrel属性の値が”stylesheet”の場合のtype属性の値は”text/css”として設定されているので省略可能

CSSの直接記述

<style type="text/css">  
<!-- 
  ..... 
-->  
</style>

<!--

.....

-->

</style>

head要素内のstyle要素の中にCSSの文を直接記述