サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.htmq.com
ruby-positionプロパティは、ルビの配置位置を指定する際に使用します。 指定できる値は、before、after、rightのいずれかです。 ruby-position:before(初期値)の場合 ruby-position:beforeを指定すると、ルビテキストはベースの前に表示されます。 これは日本語など、東アジアの表意文字の記述方法では最も一般的な設定です。 以下は、横書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。 ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の右側に表示されて本体と同じ縦書きレイアウトモードで描画されます。 以下は、縦書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。 台湾・香港・マカオなどで使用される繁体字中国語にルビをふる場合には、特殊なケースとなるので注意が必
■カスケードの概念 CSSでは、外部CSSファイル・HTML文書単位・HTMLソース中での局所的なスタイル指定など、様々なレベルからスタイルを定義することができます。 また、ウェブページの制作者だけではなく、閲覧者(ユーザー)やユーザーエージェント(ブラウザ)によってもスタイルが定義されます。 CSS(Cascading Style Sheets)のCascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、 様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。 このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。 例えば、すべての要素の文字サイズを大きくして、 <body>要素の背景色を青くして、<p>要素の文字色を白くした場合には、 文字サイズは大きく、背景色は青く、文字色は白いスタイ
animation-iteration-countプロパティは、要素にキーフレームアニメーションを適用する場合に、アニメーションの繰り返し回数を指定する際に使用します。 初期値は1でアニメーションが開始から終了まで一回再生されます。 値にinfiniteを指定すると、アニメーションの再生を無限に繰り返します。 値に整数以外の数値を指定すると、再生サイクルの途中でアニメーションが終了します。 負の値を指定すると、0として扱われます。 例えば、アニメーションの再生を反転させるanimation-direction: alternateの指定をしている場合に、 このanimation-iteration-countプロパティで偶数の再生回数を指定してやると、キリの良い箇所でアニメーションの再生を終了させることができかもしれません。 ■値
<input>要素のautocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。 例えば、検索キーワード候補の提示のようなインターフェースを実現できます。 入力候補として表示されるデータのリストを指定するには、 HTML5から追加される予定の<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、<option>で定義します。 <datalist>をサポートしたブラウザでは、<option>で指定された値がユーザーに対して入力候補として提案表示されます。 <input>のlist属性の値と<datalist>のid属性の値を同じにして、入力欄とデータリストを関連付けます。 ■属性 HTMLソース <form action="xxx.php" met
animation-nameプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション名を指定する際に使用します。 animation系プロパティで要素にキーフレームアニメーションを適用する際には、@keyframesルールでキーフレームを定義する必要があります。 キーフレームでは、アニメーション開始時点(0%)のスタイルと終了時点(100%)、 さらに、必要に応じてその進行途中(0~100%)のスタイルを指定します。 animation-nameプロパティでアニメーション名を指定すると、@keyframesルールで定義したキーフレームが選択されます。 それにより、アニメーション効果を与える色・サイズなどのスタイルと、 アニメーション効果の適用方法(時間・進行割合・繰り返し回数・反転再生・一時停止・いつ始まるか)が関連付けられます。 animation-nameプロパ
<input>タグのtype属性でtype="checkbox"を指定すると、チェックボックスが作成されます。 チェックボックスとは複数用意された選択肢の中から複数の項目を選択できるボタンのことです。 name属性は選択欄に名前を付ける属性ですが、<form>でデータが送信される際、 name属性で指定した名前とvalue属性で指定した値が一組になって送信されます。 checked属性を指定すると、あらかじめその選択肢が選択された状態になります。 HTMLでは単にcheckedと記述することもできますが、 XHTMLの場合には、checked="checked"と略さずに記述しなければならないので、 できるだけchecked="checked"と記述した方が良いでしょう。 ■属性 type="checkbox" チェックボックスを作成する name フォーム部品に名前をつける value
<datalist>タグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、<option>タグで定義します。 <datalist>タグをサポートしたブラウザでは、 <option>タグで指定された値がユーザーに対して入力候補として提案表示されます。 <datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄は<input>タグで作成しますが、 <input>タグのlist属性の値と、 <datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。 <datalist>~</datalist>の内容は、その子要素も含めてブラウザ上では表示されないことになっています。 ■HTML4.01からHTML
■@ルール(@で始まる書式) CSSには@で始まる@ルール(at-rule)と呼ばれる書式が定められています。 これらはCSSでスタイルシートを記述するにあたってのルールを定義するものです。 @charset(外部スタイルシートの文字コード指定) @charsetは(HTML/XHTML文書のではなく)外部CSSファイルの文字コードを指定する際に使用します。 @charsetは外部CSSファイルの先頭に1つだけ記述します。 HTML/XHTML文書の<style>要素内には記述できないので注意してください。 文字コードの値は、シフトJISの場合はShift_JIS、JISの場合はISO-2022-JP、EUCの場合はEUC-JP、UTF-8の場合はUTF-8となります。 @import(外部スタイルシートのインポート) @importは別ファイルの外部スタイルシートを取り込む際に使用します
<input>タグのtype属性の値にsubmitを指定すると、フォームの送信ボタンを作成します。 ボタンに表示させる[送信する]などのテキストは、value属性で指定します。 また、name属性は送信ボタンに名前を付ける属性ですが、<form>でデータが送信される際、 name属性で指定した名前とvalue属性の値が一組になって送信されます。 formaction属性(送信先URL)・ formenctype属性(送信するデータの形式)・ formmethod属性(送信方法)・ formnovalidate属性(入力されたデータの妥当性を確認しない)・ formtarget属性(フォーム送信するターゲット先)は、 <form>の属性でも同様の指定をすることができますが、 <input>要素側でこれらの属性を指定すると、<form>の指定より優先されます。 formaction属性・for
<pre>タグは、半角スペースや改行をそのまま表示する際に使用します。 <pre>とはpreformatted textの略で、日本語では「フォーマット(整形)済みのテキスト」という意味になります。 つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。 <pre>~</pre>で囲まれた範囲のソースは 半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。 ただし、<pre>~</pre>の中でもタグは解釈されるため、 HTMLソースをそのまま表示したい場合には、< と > を、< と > に置き換える必要があります。 また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。 プログラム
<SCRIPT>は、文書中にJavaScriptやVBScriptなどのスクリプトを埋め込むためのタグです。 スクリプトの言語のタイプを示すtype属性は必須属性です。 type属性の値には、JavaScript・JavaScript1.1、JavaScript1.2、VBScriptなどのスクリプト言語名を指定します。 スクリプトを記述する際には、スクリプト部分全体を<!--~//-->で囲んでコメントにします。 これは、<SCRIPT>タグに対応していないブラウザで、 スクリプト部分がそのままテキストとして表示されることを避けるためです。 スクリプト部分が長くてソースが複雑になる場合や、 スクリプト部分をユーザーから見られにくくしたい場合には、 スクリプト部分をjsファイルなどの外部ファイルにして、<SCRIPT>タグのsrc属性で読み込みます。<script type="text/j
グラデーションの中心位置 at に続けて left, center, rightや、top, center, bottom などの位置を表すキーワード、または、0%, 50%, 100% などの%値でグラデーションラインの中心位置を指定。初期値は center 形状 circle(円)、ellipse(楕円)のいずれか。初期値は ellipse サイズ グラデーションのサイズを以下のキーワードで指定。初期値は farthest-corner closest-side …… ボックスの最も近い辺がグラデーションの終了位置となる farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する 全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する classセレクタ(クラスセレクタ) …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ
<br>タグは、改行する際に使用します。 <br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。 文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。 例えば、フォームの入力項目を見栄え上分かりやすくするために、入力項目ごとに<br>タグで改行するような使い方は誤りです。 このような目的には<br>ではなく、それぞれの入力項目を<p>~</p>で囲むほうが適切です。 ■HTML4.01からHTML5へのバージョンアップによる変更点 br要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。 ■使用例 HTMLソース <p> 株式会社xxx<br> 東京都千代田区0-0-0<br> ABCマンション000号室 </p> <form action="postmail.php"
【注意】strike要素は、HTML Living Standardの仕様では削除されています。 <STRIKE>は打ち消し線を引くタグです。 <S>と機能は同じですが、 <STRIKE>の方がより多くのブラウザでサポートされています。 <S>と<STRIKE>は共に非推奨要素です。 テキストに打ち消し線を引く際には、できるだけスタイルシートを利用してください。 スタイルシートでは、 <span style="text-decoration: line-through">~</span>などと記述します。 また、削除された箇所という意味を示す場合には、<DEL>タグの使用が推奨されています。 ■使用例
<abbr>タグは、略語や頭字語であることを表す際に使用します。 title属性は様々な要素で使用できる汎用的な属性ですが、<abbr>にtitle属性を指定した場合には特別な意味を持ちます。 <abbr>のtitle属性には、略語や頭字語の正式な名称を指定します。 title属性を指定した場合、一般的なブラウザではマウスカーソルを乗せた際にツールチップとして表示されます。 略語や頭字語は必ず<abbr>~</abbr>で囲まなくてはならないということはありませんが、 読者になじみのない略語を使用する場合には、title属性を持つ<abbr>でマークアップするか、 その略語が最初に使われるテキストに正式な名称を含めておくことが推奨されています。 ■HTML4.01からHTML5へのバージョンアップによる変更点 HTML4.01では略語はacronym要素、頭字語はabbr要素でそれぞれ表す
スタイルシート部分は外部ファイル(sample.css)に記述。 p.sample1, p.sample2, p.sample3, p.sample4 { background-image:url("images/bggrid.gif"); width:600px; margin-top:0; font-size:20px; layout-grid-mode:both; layout-grid-type:fixed; layout-grid-char:40px; } p.sample1 {layout-grid-line:none;} p.sample2 {layout-grid-line:auto;} p.sample3 {layout-grid-line:1.5ex;} p.sample4 {layout-grid-line:40px;} HTMLソース <html> <head> <
<i>タグは、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。 分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、 その他一般的に印刷される際にイタリック体となるようなテキストです。 その箇所が重要であるという意味や強調する役割はありません。 <i>を使用する際には、より適切な要素がないか検討することが推奨されています。 例えば、強勢する箇所を示す場合には<em>、 用語の使用であることを定義する場合には<dfn>のほうが、 <i>よりふさわしいでしょう。 ■HTML4.01からHTML5へのバージョンアップによる変更点 i要素は、HTML 4.01ではテキストを斜体(イタリック)にすると定義されていましたが、 HTML5では他と区別したいテキスト・印刷される際にイタリック体となるようなテキストを表すと変更されています。 ■使用例 HTMLソース <p
<b>タグは、文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。 一般的に印刷される際に太字となるようなテキストです。 その箇所が重要であるという意味や強調する役割はありません。 <b>は、他により適切な要素が存在しない場合の最終手段として使用するべきものです。 特に、見出しには<b>ではなく、<h1> - <h6>を使用してください。 また、強勢する箇所を示す場合には<em>、 重要性を示す場合には<strong>、 テキストをハイライトして目立たせる場合には<mark>を使用します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 b要素は、HTML 4.01ではテキストを太字にすると定義されていましたが、 HTML5では他と区別したいテキスト・印刷される際に太字となるようなテキストを表すと変更されています。 ■使用例
counter-incrementプロパティは、要素の連番(カウンタ)の値を進める際に使用します。 counter-incrementプロパティを要素に適用してカウンタ名を定義すると、ウェブページ内にその要素が現われるたびに、定義したカウンタの値が進められます。負の値を指定してカウンタを戻すことも可能です。 counter-incrementプロパティを適用する要素に:before擬似要素、:after擬似要素を付けて、contentプロパティでカウンタ名を指定してやることで、要素の直前または直後にカウンタの値を挿入することができます。 尚、Internet Explorer7以下は、counter-incrementプロパティ、counter-resetプロパティ、contentプロパティ、:before擬似要素、:after擬似要素に対応していません。 ■値 none カウンタの値を進
■メディアタイプ メディアごとにスタイルシートを指定 現在のところ、ウェブページはブラウザを使用してパソコンのスクリーン上で表示されることがほとんどですが、 CSSの仕様では、スクリーン以外にもテレビ・プロジェクタ・携帯機器・印刷・音声・点字などの 様々なメディアにウェブページが出力されて利用されることが想定されています。 メディアタイプは<link>要素や<style>要素のmedia属性、または、@mediaで指定します。 メディアタイプを指定することで、スクリーン表示用(screen)やプリント用(print)など、 メディアごとにスタイルシートを指定し分けることができます。 複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ( , )で区切って指定します。 例:メディアタイプに合わせてCSSファイルを適用する <html> <head> <link re
<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言するために、 文書の先頭(<html>タグよりも上)に記述するDOCTYPE宣言(Document Type Definition、DTD、文書型宣言)です。 HTMLやXHTMLでは、バージョンごとに使用できる要素(タグ)や属性とそれらの配置ルールが定められていますが、 DOCTYPE宣言は、その文書がHTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。 文書の先頭にDOCTYPE宣言を記述するということは、その文書で利用するHTMLやXHTMLのバージョンを宣言するということですから、 その文書内では、宣言したHTMLやXHTMLのバージョンで定められているルールを守ってソースを記述しなくてはなりません。 ■HTML4.01からHTML5へのバージョンアップによる変更点 HTML 4
■CSSとは? スタイルシートとCSS CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。 CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルな
ページが移転しました。
CSSソースは外部ファイル(sample.css)に記述 p.sample1 {background-color:blue;} p.sample2 {opacity:0.7; background-color:blue;} p.sample3 {opacity:0.5; background-color:blue;} p.sample4 {opacity:0.3; background-color:blue;} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1"> opacityプロパティを適用していません。<br> <img src="../images/kaeru.gif"> </p> <p class="sam
<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>~</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。 style要素のtype属性は、スタイリング言語(スタイルシートのMIMEタイプ)を指定します。 例えば、CSSの場合にはtype="text/css"となります。 type属性は必須属性ではなく、指定しない場合にはtype="text/css"がデフォルトで適用されます。 style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。 media属性でメディアの種類を指定することで、 例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイル などを指定し分けることができます。 W3Cの仕様で規定
CSSソースは外部ファイル(sample.css)に記述 div.prefix_sample { background-color:blue; width:200px; height:50px; -moz-transition-property: background-color, width, height; -webkit-transition-property: background-color, width, height; -o-transition-property: background-color, width, height; -ms-transition-property: background-color, width, height; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-tr
HTMLソース <form action="xxx.php" method="post"> <fieldset> キーワード: < input type="search" name="q" autofocus><br> <input type="submit" value="検索"> </fieldset> </form>
:before擬似要素は、要素の直前に内容を挿入する際に使用します。 挿入内容はcontentプロパティで指定しますが、例えば、文字列・引用符・カウンタ・画像・音声などを挿入することができます。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル(sample.css)に記述。 h2:before {content:"★";} strong:before {content:"『";} strong:after {content:"』";} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h2>今日のお天気</h2> <p>今日は<strong>晴れ</strong>です。</p> <h2>明日のお天気</h2> <p>明日は
次のページ
このページを最初にブックマークしてみませんか?
『HTMLクイックリファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く