CSSファイルの文字コードは？

情報公開日: 2011年6月8日 編集者: adworks

CSSを適用する（X）HTMLファイルと同じコードにします。

その理由は、（X）HTMLと異なる文字コードにすると、CSSがうまく適用されない場合があるからです。

CSSを適用するCSSは（X）HTMLと同様に、テキストのみで記述します。
（X）HTML内に記述することも可能ですが、拡張子を.cssにしたテキストファイルにすると、（X）HTMLファイルから参照させることもできます。

CSSをファイルにして（X）HTMLから参照させると、複数のWebページに同じスタイルを適用でき、デザイン変更も一括して変更できるというメリットがあります。

（X）HTMLは、UTF-8をはじめ各種の文字コードで記述できますが、使用した文字コードは、Webサーバーから送信されるファイルの情報、または（X）HTMLのソースコードによって、ブラウザに知らせる必要があります。使用している文字コードと異なる文字コードでブラウザに表示されると、文字が正しく表示されなくなるからです。

Internet ExplorerやSafariは、特に指定がなければ、CSSファイルの文字コードは、（X）HTMLと同じものを使用していると解釈します。そのため、（X）HTMLファイルの文字コード（初期設定ではUTF-8）と同じ文字コードを使用してCSSファイルを作成することをお勧めします。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 文字コード |

スタイルシート=CSS？

情報公開日: 2011年6月8日 編集者: adworks

CSSは、主に（X）HTMLやXMLの装飾に利用するスタイルシートです。ワープロなどで文書の見栄えをまとめた雛形もスタイルシートです。

スタイルシートは、文書の見栄えを定義したものです。Webページのほかに、ワープロなどの文書やレイアウトソフトの文書などでも利用されており、用途ごとにさまざまなスタイルシートがあります。その中で、（X）HTMLなどのWebページで利用されているスタイルシートが、CSSです。

CSSはCascading Style Sheetの頭文字を取った呼び名で、Cascadingには「段階的」「連鎖的」といった意味があります。その名の通り、いろいろな段階で（X）HTMLに適用させることができます。

CSSは、Web標準化団体W3Cが規格化を進めています。1996年12月に勧告されたlevel1（CSS1）と、1998年5月に勧告され2002年頃に改定されたlevel2（CSS2.1）があり、現在はCSS3を策定中です。ただし、ブラウザやブラウザのバージョンごとにCSSの対応状況が異なるので、同じ見栄えを表示させるためのテクニック（CSSハック）も各種開発されています。

ワンポイント

XSL（Extensible Stylesheet Language）
XMLをHTMLなど見やすい表示に変換するのに利用されるスタイルシートXSL（Extensible Stylesheet Language）も、Webページ作成によく利用されています。

カテゴリー: CSS, ナレッジノート |

HTML5で増える属性は？

情報公開日: 2011年6月6日 編集者: adworks

ドラッグ＆ドロップを可能にするdraggable属性など全要素共通属性のほか、フォーム要素のautofocus属性など、要素ごとに追加されるものがあります。

HTML5では、主に2つの目的のために数多くの属性が追加されます。1つはWebアプリケーションの作成を容易にするためのもの、もう1つは類似の要素と一貫性を持たせるためのものです。

Webアプリケーションの作成を容易にするためのものとしては、全要素に指定できる汎用属性と、フォームの要素に追加される属性があります。たとえば、汎用属性として追加されるdraggableは、ドラッグ＆ドロップのAPIと組み合わせて、要素をドラッグ可能にできます。同じく汎用属性のcontexmenuには、要素を右クリックしたときに表示されるメニューを指定できます。

フォームで利用されるinput、select、textarea、button要素には、autofocus要素が追加され、ページ表示時に特定のフォーム要素に自動的にフォーカスさせることができるようになります。また、input属性とtextarea要素には、必須項目を示すrequire属性も指定できるようになります。

類似の要素と一貫性を持たせるために追加する属性としては、たとえばイメージマップでのリンクに利用されるarea要素に、参照先の言語を示すherflang属性や、参照先のファイルの種類を示すrel属性が追加されます。これらはリンクのa要素やファイル参照のlink要素と一貫性を持たせるために追加されます。

ワンポイント

HTML5で非推奨を解除される属性
HTML5で追加される属性の中には、a要素やarea要素のtarget属性のように、HTML4で非推奨とされていたものもあります。Webアプリケーションでは、target属性によって別ウインドウ表示する指定が有用だと考えられたからですね。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート, 属性 |

要素を入れ子にするときのルールは？

情報公開日: 2011年6月3日 編集者: adworks

ブロックレベル要素の中にインライン要素を入れます。リストや表のように、あらかじめ入れ子にする組み合わせが決まっている要素もあります。

古いHTMLで作ったWebページでは、body要素の中に、要素が指定されていないテキストが含まれていることがあります。
しかしXHTMLでは、body要素に含まれるすべてのテキストを、見出し（h1〜h6）や段落（p）などのブロックレベル要素の内容として入れる必要があります。
同様に、form要素の直下にも、formやtableを除くブロックレベル要素を入れる必要があります。

要素を入れ子にするときの基本ルールとして覚えておきたいのは、一部の例外を除いて、ブロックレベル要素に中にブロックレベル要素を入れることはできないということです。
ブロックレベル要素の中には、基本的にインライン要素を指定します。

■入れ子の基本ルールの例外

div要素はブロックレベル要素ですが、中にブロックレベル要素を含めることができます。また、リストの項目にli要素もブロックレベル要素ですが、ブロックレベル要素である記号リストのul要素や番号リストのol要素の中に含まれます。

カテゴリー: HTMLの基礎知識, ナレッジノート, 要素 |

XHTMLやHTML5で使えなくなる属性は？

情報公開日: 2011年6月3日 編集者: adworks

装飾のための要素やフレームの要素などが使えなくなります。

CSSに対応したブラウザが普及する前は、HTMLはWebページの構造を示すだけでなく、Webページを装飾する役割も担っていました。しかし、Web標準に準拠したページ（XHTMLやHTML5）では、Webページの構造を記述するだけで、見栄えの制御はCSSが行います。

そのため、XHTML1.0 StrictやHTML5では、文字を装飾する要素である（s、strike、u、font、basefont）が使えなくなります。また、フレーム表示に関する要素である（frameset、frame、noframes）などが使えなくなります。

ただし、iframe要素だけはHTML5において利用できます。

そのほかにも、リストとしてほとんど利用されなかったリスト要素（dir）や、Javaアプレットを埋め込むための要素である（applet）、子要素を中央揃えにする要素（center）、検索用の入力フィールドの要素（isindex）も使用できなくなります。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート, 要素 |

HTML5で増える要素は?

情報公開日: 2011年6月1日 編集者: adworks

Webページを構成するarticle、ビデオ映像を読み込み・再生するvideo、図形を描画するcanvasなど30近くの要素が増える予定です。

HTML5では、数多くの要素が追加される予定です。
それらは、主に文書の構造化、ビデオやサウンドの制御、その他に分類されます。

Webページを作成する際、ヘッダーやサイドバーなどのレイアウトブロックはdiv要素で作成されています。div要素に含まれている内容によって、CSSやJavascriptプログラムなどでの制御を変えたい時は、要素を識別するためのid属性を指定して、区別してきました。

しかし、HTML5では、section、header、nav、aside、footer、articleといった要素が追加されますので、要素によって内容を特化しやすくなります。そのため、サイトごとにCSSやJavascriptを加筆・修正する必要性が少なくなります。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート, 要素 |

タグは必ず閉じなければいけないの？

情報公開日: 2011年6月1日 編集者: adworks

通常は開始タグの後に内容が入り、終了タグで閉じます。

XHTML1.0/1.1では、内容を持たない空要素でも必ず閉じなくてはいけません。

XHTMLはXMLに基づいているため、文書がきちんと構造化されている必要があります。XHTMLはタグで範囲を指定した要素によって構造化されるため、終了タグがないと要素の範囲がどこまでなのかわからなくなります。

Internet ExplorerやFirefoxなどのブラウザでは、閉じていないタグを含んだXHTMLでも、とりあえず表示しますが、ファイルの拡張子を「.xml」に変更して読み込むと、エラーになってしまいます。XHTMLをXMLとして処理するためには、きちんと終了タグを付け、空要素も閉じる必要があるということですね。

なお、HTML5では空要素を閉じる必要がありません。HTML5をXML構文で記述する場合は、空要素を終了カッコ「>」の前に「/」を入れて閉じる事もできますが、その記述方式は容認されているだけであって、決して推奨ではありませんので、ご注意ください。

ワンポイント

空要素「/」の前には空白を空ける。
XHTML1.xでは空要素を記述する際に、<要素名/>ではなく、「/」の前に半角スペースを追加して<要素名 />とします。これは、XHTMLに対応していない古いブラウザで要素名が「要素名/」と解釈されてエラーになるのを防ぐためなんですね。

カテゴリー: HTMLの基礎知識, タグ, ナレッジノート |

要素名と属性名は大文字でもいいのか？

情報公開日: 2011年5月22日 編集者: adworks

XHTMLの書式では、要素名と属性名はすべて小文字で記述。HTMLの書式で記述する場合は、大文字小文字は区別されません。

HTMLでは、要素名や属性名の大文字小文字は区別されません。文字の区別が付きやすいため、古いタイプのWebページ作成ソフトの中には、要素名や属性名を全て大文字で記述するものもあります。

しかし、XHTMLでは、大文字と小文字を区別するようになりました。そして、要素名や属性名はすべて小文字で定義されたので、小文字で記述しなければなりません。

カテゴリー: HTMLの基礎知識, ナレッジノート, 属性, 要素 |

ブロックレベル要素とインライン要素の違い

情報公開日: 2011年5月19日 編集者: adworks

ブロックレベル要素は、(X)HTMLを構成するメイン要素で、前後の要素とは別の行に分かれて表示され、インライン要素は内容の詳細を指定する要素

(X)HTMLの要素は、ブロックレベル要素とインライン要素、大きく2つに分けられる。ブロックレベル要素で(X)HTMLドキュメントの大枠が構成され、ブロックレベル要素内の内容を詳細に指定するのにインライン要素が利用されます。

おもなブロックレベル要素には、見出し（h1〜h6）、文章（p）、リスト（ul、ol、li）、表（table）などがある。ブロックレベル要素の幅はこの要素を直接囲んでいる要素、つまり親要素の幅いっぱいに広がるが、CSSを利用して幅や高さ、上下左右の余白やマージンを指定できる。

おもなインライン要素には、リンク（a）、画像（img）、強調（em、strong）などがある。インライン要素はブロックレベル要素の中で指定し、親要素と同じ行内に含まれる。要素の幅は、基本的にタグで囲まれた範囲となり、画像（img）以外のインライン要素では幅や高さが指定できません。

ワンポイント

なお、HTML5ではブロックレベル要素とインライン要素という分類を廃止し、7種類のコンテンツモデルに変わります。

カテゴリー: HTML5, HTMLの基礎知識, ナレッジノート, 要素 |

要素とタグの違い

情報公開日: 2011年5月18日 編集者: adworks

タグとは「<」と「>」で要素名を囲んだ箇所で、<要素名>で指定開始、</要素名>で指定を終了。要素とは、開始タグと終了タグで囲まれた範囲全体を指す。

(X)HTMLでは、要素名を「<」と「>」で囲みます。たとえば文章(paragraph)であることを示す要素pは、<p>と記述します。タグは要素に含める内容を囲むのに使用します。

要素の中には、imgやbrのように内容が含まれないものもあり、これらの要素は空要素と呼ばれています。

ワンポイント

imgやbrなど内容を範囲指定しない空要素は、XHTML1.1までは英語でempty elementsと表現されていましたが、HTML5ではvoid elementsとなってます。emptyは日常の中で使われている中身がないというイメージですが、voidはプログラムで返却値がないというときに使います。

なお、HTML5では、空要素に終了タグを付けたり、「/>」で終わる必要はありません。

カテゴリー: HTML5, HTMLの基礎知識, タグ, ナレッジノート |