head要素[HTML5]

<head>…… 文書のヘッダ情報を表す

<head>タグは、文書のヘッダ情報を表す際に使用します。 ヘッダ情報とは、その文書に関する情報のことです。 head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。

メタデータとは、その文書に関する情報のことで、 例えば、 <title>(タイトル)・ <base>(基準URL)・ <link>(リンク情報)・ <style>(スタイルシート)・ <meta>(メタデータ) などが挙げられます。 これらのメタデータを表すタグは、すべて<head>~</head>の中に配置します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、head要素のprofile属性が廃止されています。 head要素のprofile属性はメタデータのプロファイルを定義したファイルのURIを指定するための属性でした。 メタデータのプロファイルとは、meta要素のname属性で指定するname=”author”やname=”description”などの値が、 何を意味しているのかを定義したものです。 head要素のprofile属性は、ほとんど利用されていませんでしたが、HTML5では廃止される予定です。

■html5での使用例

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="http://www.htmq.com/">
<title>html5文書のサンプル</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet alternate" href="bigtext.css" title="大きな文字">
<meta name="author" content="adworks">
<meta name="keywords" content="サンプル">
<meta name="description" content="サンプルの紹介">
<meta name="robots" content="all">
<script src="functions.js"></script>
</head>
<body> ~ </body>
</html>
[/html]

参考:http://www.htmq.com/html5/head.shtml

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

根本となる要素[HTML5]

<html>…… HTML文書であることを示す

<html>タグは、HTML文書であることを示す際に使用します。 <html>~</html>で定義されるhtml要素は、文書のルートとなる要素で、HTML文書の内容が始まることを表します。<html>~</html>の直下には、 <head>と <body>がそれぞれ一つづつ必要となります。html要素には、lang属性で言語を指定することができます。 例えば、日本語の場合はlang=”ja”、英語の場合にはlang=”en”を指定します。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、html要素にmanifest属性が追加されています。 html要素のmanifest属性の値には、ウェブアプリケーション・キャッシュとして、HTML文書とは別に用意したmanifestファイルのURIを指定します。 これは、ユーザーがインターネットに接続していない状態でも、ウェブアプリケーションを利用できるように、 キャッシュデータをユーザーのローカル環境に保存できるようにするためのものです。尚、html要素のmanifest属性で指定するURIは、base要素で基準URIをした場合にもその影響を受けません。

属性

lang属性
言語を指定、日本語ならja、英語ならen
manifest属性
manifestファイルのURIを指定

以下のサンプルでは、html要素のlang属性の値に”ja”を指定することで、ドキュメントの言語が日本語であることを宣言しています。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
</head>
<body>
<h1>sampleとは</h1>
<p>
この文章はサンプルです。
</p>
</body>
</html>[/html]

参考:http://www.htmq.com/html5/html.shtml

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

ドキュメントタイプ宣言[HTML5]

<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するために、 文書の先頭(<html>タグよりも上)に記述するDOCTYPE宣言(Document Type Definition、DTD、文書型宣言)です。HTMLやXHTMLでは、バージョンごとに使用できる要素(タグ)や属性とそれらの配置ルールが定められていますが、 DOCTYPE宣言は、その文書がHTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。

文書の先頭にDOCTYPE宣言を記述するということは、その文書で利用するHTMLやXHTMLのバージョンを宣言するということですから、 その文書内では、宣言したHTMLやXHTMLのバージョンで定められているルールを守ってソースを記述しなくてはなりません。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML 4.01では、DOCTYPE宣言は以下のように記述していました。
(HTML 4.01 Transitionalの場合)
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/html]

HTML5では、以下のようなシンプルな記述となります。大文字と小文字は区別されません。

[html]<!DOCTYPE html>[/html]

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード(Quirks mode)となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード(Standards mode)で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html>と記述することで標準モードとなります。

※ブラウザのレンダリングモードとは

ブラウザのレンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、 DOCTYPE宣言の記述のしかたによって標準モードと互換モードが切り替わります。 標準モードは、CSSなどの仕様通りに正しく表示するモードで、 互換モードは、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。 互換モードでウェブページが表示される場合、 CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。

■html5での使用例

[html]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
</head>
<body>
<p>使用例のご紹介</p>
</body>
</html>[/html]

参考:http://www.htmq.com/html5/doctype.shtml

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

色の指定にはなぜ先頭に#を付けるの?

文字列ではなく色を指定するための数値だということを示すためです。

左から順に、赤、緑、青の値を2桁の16進数で示しています。

テレビやパソコンの画面では、光の3原色であるレッド(R)、グリーン(G)、ブルー(B)を組み合わせて輝かせる度合いによって、色を表現しています。ホームページの色の指定も、この光の3原色の組み合わせを利用しています。この組み合わせをカラーコードと言います。

カラーコードは、2桁の16進数で計算されます。16進数では、10がA、11がBというように、アルファベットを値で表し、15のFまでいくと、次の桁に繰り上がります。2桁の16進数では、00からFFまで256段階あります。この2桁を、左から順にレッド(R)、グリーン(G)、ブルー(B)の順番で記述します。カラーコードは数値なので、キーワードなどの文字ではなくて、数値として処理されなければなりません。指定された文字を数値としてコンピュータに処理させる場合、プログラムでは先頭に「0x(ゼロエックス)」を付けるのが一般的ですが、CSSでは先頭にを付けて数値であることを示します。欧文では、#はNo.(ナンバー)を示す省略語なので、プログラムに馴染みがない人でも#が先頭に付いていれば、以降の文字は数値であると理解しやすいですね。

光の3原色は、値が大きいほど、また色を組み合わせるほど明るくなります。どの色も0の#000000は黒で、どの色の値も一番大きい#FFFFFFは白となります。RGBそれぞれの2つの桁の値が同じ場合、CSSでは省略して指定することもできます。たとえば、#FF33CCは、#F3Cというようにも指定できます。

Webセーフカラー

Webセーフカラーを聞いたことがあるという方も多いと思います。Webセーフカラーは、256色しか画面表示ができない時代のパソコンで、WindowsでもMacintoshでもほぼ同じ色で表示できる色のことです。現在のパソコンは、フルカラー(1677万色)表示が当然なので、ホームページ作成の際に、使用する色をWebセーフカラーに制限する必要は全くありませんね。

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

emとex、pxとptの違いは何?

emとexでは基準にする文字の高さ、pxとptは基準にする細かさが違います。

emは1文字、exは小文字xが基準。pxは画面表示の1点分、ptは1/72インチです。

CSSで利用される単位のemexは、どちらも文字サイズを基準にした大きさです。emは現在のフォントサイズを基準にしているのに対して、exは欧文の小文字のxの高さを基準としています。文字の大きさを基準とした単位なので、段落の行頭を1文字分下げたい、というときや、文章を特定の文字数で折り返すようにしたいときに利用すると便利です。日本語のホームページでは、exよりもemを利用することをお勧めします。

pxptは、どちらも精密な大きさを指定するときによく利用されます。1pxはパソコンなどの画面表示の点1つの大きさと同じです。画面の細かさに対応しているので、正確に大きさを指定することができます。
ptは、印刷技術で利用されてきた単位で、ワープロソフトなどの文字サイズ指定でもおなじみですね。パソコンで利用する場合、1ptは1/72インチ、0.352778mmです。画面の細かさが1インチ当たり72ピクセルであれば、pxと同じ大きさになりますが、標準的なパソコンの画面の細かさは1インチ当たり96ピクセルですから、単位当たりの大きさが異なります。画面表示が中心のホームページではptは使いづらい単位です。

初期設定の文字サイズ

特に指定していないときにブラウザで表示される文字の大きさは、日本語の場合だと16px、あるいは12pt、1emと指定した場合と同じです。文字サイズを変更する場合は、この値を基準に大きさを検討すると良いでしょう。

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

CSSで使える単位まとめ[CSS]

cm、mm、in、pt、pc、em、ex、px、%と全部で9種類あります。

日本語のページデザインでは、em、px、%がよく利用されています。

CSSでは、要素の大きさや余白、ボーダー、文字サイズなどの指定にさまざまな単位が利用できます。一般的に使われる長さの単位としては、cmやmmがあります。しかし、パソコンなどの画面表示ではあまり使われないので、CSSでもほとんど利用されていません。

ほかに一般的な長さの単位として、日本人にはなじみが薄いのですが、in(インチ)も利用できます。1インチは約2.54cmで、パソコンのディスプレイやテレビの画面の大きさを示すときに利用されます。しかし、cmやmmと同じように、パソコンの画面表示の単位としては、ほとんど利用されていないのが実情です。

印刷技術に利用されてきた単位として、pt(ポイント)やpc(パイカ)があります。ptとpcは、ワープロソフトや印刷用のレイアウトソフトなどで文字サイズを指定するときによく利用されます。大きさとしては、1pcは12pt、1/6インチとなってます。これらの単位も、画面表示が中心となるホームページデザインでは、あまり利用されていません。

欧文の文字の大きさを基準とした単位として、emexがあります。文字の大きさや数を基準に行間やレイアウトブロックの幅、インデントなどを指定するときに利用すると便利です。特に、emは文字1つ分と同じ大きさなので、よく利用されています。

ホームページのデザインで最もよく利用されているのが、px(ピクセル)とです。pxは絶対単位での大きさを、%は相対単位での大きさを指定するときによく利用されています。

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

レイアウトの幅?[CSS]

margin、paddingやwidthの値に、borderの幅も含めて計算します。

ショートハンドでまとめて指定している場合は、左右の合計値になるように値を2倍にします。

CSSでホームページをレイアウトする場合、コンテンツをブロックのようにまとめて、その配置や組み合わせる方法がよく利用されています。このように、コンテンツのブロックを組み合わせるときのポイントがブロックの幅です。

コンテンツのブロックを横に並べて配置する場合には、その幅の値を正確に把握できないと、レイアウトが崩れてしまいます。コンテンツのブロックはたいてい、幅の指定に余白(paddingとmargin)の指定を追加しているので、余白を含めた幅で計算します。ボーダーを指定している場合は、ボーダーの幅も追加します。

下図の場合は、コンテンツの内容の幅400ピクセルに、paddingを左右それぞれ10ピクセルずつ追加し、さらにborderが左右に3ピクセルずつ追加されているので、全体では426ピクセルとなります。

コンテンツの幅

ホームページの標準の幅は何ピクセル?

企業サイトは750ピクセル、ポータルサイトは950ピクセル程度が目安です。ウインドウのサイズに合わせて特定の幅から変化する可変レイアウトもよく利用されています。

大手サイトのページ幅(2011年6月現在)

Yahoo!JAPAN トップページ
950px以上の可変幅
Google トップページ
640px以上の可変幅
asahi.com
950px以上1,280px以下の可変幅
Twitter
763px
楽天市場
950px
Amazon
980px以上の可変幅
富士通
750px
NEC
760px
日本郵政
768px
カテゴリー: CSS, HTMLの基礎知識, ナレッジノート |

marginとpaddingの違いは?[CSS]

ボーダーの内側がpadding、外側がmarginです。背景色や背景画像はpaddingの範囲まで表示されます。marginには負の値が指定できます。

CSSでデザインするときにとまどう事のひとつが余白の扱い方です。CSSではpaddingmarginという2種類の余白があります。borderを境にして内側に付く余白がpadding、外側に付く余白がmarginです。
borderを表示させなくてもpaddingとmarginを見分ける方法としては、背景の表示範囲にあります。背景は、paddingの範囲にまで表示されますので、要素の幅や高さよりも大きい範囲で背景を表示させたいときにはpaddingを指定します。
marginには、マイナスの値を指定することで、隣接する要素に重ねることができますし、数値ではなくてautoを指定することもできます。autoは、値を自動的に設定するときに指定する記述で、ブロックレベル要素で左右のmarginをautoに指定すると、その要素は中央揃えで表示されます。

ボックスモデルの解説図

ボックスモデルの解説

paddingおよびmarginは、ブロックレベル要素に指定することが多いのですが、インライン要素に指定することもできます。ただし、基本的にインライン要素では上下のpaddingおよびmarginを指定しても、その分の余白は空きません。img要素だけは例外で、上下のpaddingおよびmarginを指定した分、余白が空きます。

インライン要素で背景と上下のpaddingを同時に指定した場合、paddingで指定した範囲に背景が表示されます。余白や行間の指定によっては、上下の背景色に重なって内容が見えなくなる部分ができるので注意が必要です。

Internet Explorerのバグ

Internet Explorerのバージョン6まででは、floatと同じ方向のmarginの値が、2倍になってしまいます。たとえば、float:leftを指定した要素は、margin-left:10px;だと、左側に20ピクセルのマージンが空くことになるので、注意しましょう。

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

ショートハンドまとめ例[CSS]

ショートハンドまとめの指定例

backgroundの場合

[css]
body {
background-color: #FC0;
background-image: url(bk.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}[/css]の場合、
[css]
body {
background: #FC0 urel(bk.jpg) no-repeat fixed;
}[/css]とまとめられます。

ショートハンドは細かい設定が必要ないスタイルで使うことをお勧めします。まとめ指定に便利なショートハンドですが、注意点があります。ショートハンドでは、複数のプロパティをまとめて指定できますが、指定しなかったプロパティはブラウザの初期設定値が適用されます。そのため、先にショートハンドなしで指定した値でも、後からショートハンドで指定したときに省略していると、先に指定した値が無効になってしまいます。

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

ショートハンドって?[CSS]

同類の複数プロパティをまとめて指定できるプロパティです。背景色やフォント、ボーダー、マージン、パディング、リストでまとめて指定できます。

CSSのプロパティには、よく似た種類によって、細かく分類されているものがあります。たとえば背景関連のスタイルには、背景色のbackground-color、背景画像のbackground-image、背景画像の位置のbackground-positionなどのプロパティがありますが、これらはbackgroundというショートハンドにまとめて指定することができます。

ショートハンドの種類と、まとめられるプロパティ

background
background-attachment,background-color
background-image,background-position
background-repeat
border
border-color,border-style,border-width
border-color
border-top-color,border-right-color
border-bottom-color,border-left-color
border-style
border-top-style,border-right-style
border-bottom-style,border-left-style
border-width
border-top-width,border-right-width
border-bottom-width,border-left-width
border-top
border-top-color,border-top-style
border-top-width
border-right
border-right-color,border-right-style
border-right-width
border-bottom
border-bottom-color,border-bottom-style
border-bottom-width
border-left
border-left-color,border-left-style
border-left-width
font
font-size,line-height,font-family,font-style
font-variant,font-weight
list-style
list-style-type,list-style-image
list-style-position
margin
margin-top,margin-right
margin-bottom,margin-left
padding
padding-top,padding-right
padding-bottom,padding-left

ショートハンドfontでの記述

ショートハンドfontで記述する場合、font-sizeとfont-familyの値を必ず含めるようにしましょう。

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