タグ

ブックマーク / www.htmq.com (14)

  • <input>-HTML5タグリファレンス

    <input>タグは、フォーム(<form>~</form>)を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"(一行テキストボックス)です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する(初期値) type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL

  • HTML5でマークアップしてみよう-HTML5リファレンス

    HTML5でマークアップしてみよう HTML5でマークアップしたウェブページを作成してみましょう。 DOCTYPE宣言と文字コードの記述ルールを確認してから、 ごく簡単なHTML5のサンプルページを作成してみたいと思います。 ■DOCTYPE宣言 HTML 4では、DOCTYPE宣言は以下のように記述していました。 (HTML 4.01 Transitionalの場合) HTML5におけるDOCTYPE宣言は、あまり意味を持たないとされていますが、 DOCTYPE宣言が無いとブラウザのレンダリングモードが、互換モード(Quirks mode)となってしまいます。 ブラウザに標準モード(Standards mode)で解釈させたい場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モード

  • <canvas>タグで図形を描く-HTML5リファレンス

    ■<canvas>タグで図形を描く 今までウェブページ上で図形を描くには、 PNG・ JPEG・ GIFなどの画像に置き換えるか、 Flash などのプラグインデータを埋め込むのが一般的でした。 HTML5では、2Dのグラフィックスを描く、<canvas>要素が新たに追加されています。 <canvas>を使用することで、標準のHTMLJavaScriptだけで、 グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。 HTMLの部分は大変シンプルです。

  • Geolocation API-HTML5のAPI、および、関連仕様

    ■Geolocation APIとは Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。 Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。 ■どんなしくみ? Geo

  • video要素、audio要素をJavaScriptから操作する-HTML5のAPI、および、関連仕様

    ※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。 単純に<video>タグや<audio>タグの使い方を知りたい方は、 以下のページなどをご確認ください。 <video>タグで動画を埋め込む <video> …… 動画を再生する <audio> …… 音声を再生する ■video要素、audio要素をJavaScriptから操作 HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。 これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。 <video>タグのcontrols属性を指定すると、

  • transition-CSS3リファレンス

    transitionプロパティは、transition効果(時間的変化)をまとめて指定する際に使用します。 transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値を、まとめて指定することができます。 このプロパティでは、値を指定する順序が重要となります。 時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。 複数の種類のCSSプロパティに対してtransition効果を適用する場合には、値のセットをカンマ( , )で区切って指定します。 ■値 各プロパティの値をスペースで区切って指定 transiti

  • position―スタイルシートリファレンス

    positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi

  • border-image...画像ボーダーを指定する

    border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、 border-image-source、 border-image-slice、 border-image-width、 border-image-outset、 border-image-repeatの各プロパティの値を、まとめて指定することができます。 省略された値はそれらの初期の値に設定されます。 現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。 border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に4枚必要となるわけではなく、1枚

  • HTML5における要素の分類(コンテンツ・モデル)-HTML5リファレンス

    HTML5における要素の分類(コンテンツ・モデル) HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無くなります。 HTML5では、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 HTML5におけるこれらのコンテンツの種類の定義は「コンテンツ・モデル」と呼ばれます。 メタデータ・コンテンツ (Metadata content)

  • DOCTYPEスイッチ-HTMLの基本

    ■DOCTYPEスイッチ 表示モードの切り替え 比較的新しいブラウザには、HTMLCSSの記述をどのように画面表示するかを決めるレンダリングモードが、 大きく分けて2種類備わっています。 レンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、 DOCTYPE宣言の記述のしかたによって切り替わります。 標準モード(Standard)は、CSSなどの指定を仕様通りに解釈して表示するモードで、 互換モード(Quirks)は、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。ブラウザによってはさらにその中間モード(Almost Standard)があります。 互換モードでウェブページが表示される場合、 CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場

  • line-height-スタイルシートリファレンス

    line-heightプロパティは、行の高さを指定する際に使用します。行の高さには負の値を指定することはできません。 行の高さとフォントサイズの関係ですが、 例えばline-heightが20pxでfont-sizeが14pxの場合、 20px(行の高さ)から14px(フォントサイズ)を引いた残りの6pxが、行間として上下均等に3pxずつ割り振られます。 また、例えばline-heightが10pxでfont-sizeが14pxなど、行の高さがフォントサイズより小さな値の場合には、 行が重なって表示されます。 尚、line-heightプロパティは使い方とブラウザの種類により、表示や印刷に不具合が出る場合があります。例えばNetscape Navigator4.xでは、line-heightプロパティを適用した範囲内に画像とテキストが混在していると、 画像とテキストが重なって表示されてしま

  • display-スタイルシートリファレンス

    displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する(初期値) block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r

  • HTMLクイックリファレンス

    HTMLタグ・スタイルシート・特殊文字等の早見表

  • スタイルシートリファレンス(目的別)

    font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと

  • 1