サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Switch 2
www.htmq.com
flexプロパティは、フレックスコンテナ内のアイテムの幅についてまとめて指定する際に使用します。 flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティ の値を、flexプロパティ一つでまとめて指定できるので便利です。 適用対象となるボックスがフレックスアイテムの場合、そのボックスのサイズの決定に際してflexプロパティの指定が参照されます。 適用対象がフレックスアイテム以外の場合には、flexプロパティの指定は無効となります。 フレックスアイテムとは、フレックスコンテナ内のアイテムのことです。 具体的に言うと、display:flex; を指定したボックスがフレックスボックス、その子要素がフレックスアイテムです。 以下に、それぞれの値の指定内容について確認します。 flex-growプロパティの値 flex-growプロパティの値では、フレック
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
<table>タグは、テーブル(表)を作成する際に使用します。 テーブルの基本的な構造は、<table>~</table>の中に <tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や<td>~</td>でセルを定義します。 テーブルは行(横行)とカラム(縦列)を持ちますが、空の行やカラムを持つことはできません。 テーブルの各セルには見出しを定義するヘッダセル(<th>~</th>)と、 データを定義するデータセル(<td>~</td>)があります。 ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。 テーブルのキャプションは<caption>で指定します。 また、テーブルのヘッダ・フッタ・本体は、 <thead>・<tfoot>・<tbody>で定義します。 これらの要素は省略することもできますが、指定しておけばテーブル構造が
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する 全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する classセレクタ(クラスセレクタ) …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ
<details>タグは、ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。 もし、<details>~</details>の子要素として<summary>が存在する場合には、<summary>~</summary>の内容が、この詳細情報の要約となります。 <summary>が存在しない場合には、ブラウザが<details>の内容を要約するかもしれません。 尚、<details>を脚注に使用することは推奨されていません。(脚注であることを明示的に表す専用のタグはありません) ■HTML4.01からHTML5へのバージョンアップによる変更点 details要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <section> <h1>動画ファイルのダウンロード</h1> <details> <summary>『sample.m
<object>タグは、文書に外部リソースを埋め込む際に使用します。 <embed>がプラグインを必要とするデータを埋め込むのに対して、 <object>には外部リソース全般を指定することができます。 <object>タグで指定された外部リソースは、データのタイプにより、 画像、入れ子の閲覧コンテンツ、プラグインで処理されるデータのいずれかとして扱われます。 data属性は、文書に埋め込む外部リソースのURLを指定する際に使用します。 また、type属性は外部リソースのタイプを指定する際に使用します。 data属性とtype属性は、最低限どちらか一つを指定する必要があります。 <object>タグでプラグインデータを埋め込むと、そのデータの種類に応じてプラグインが呼び出されます。 この際、<object>~</object>の中に<param>を配置しておくと、 呼び出されるプラグインのパ
<link>タグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。 <link>タグは、<head>~</head>の中に記述します。 <link>タグを指定する場合には、href属性とrel属性が必須です。 href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。 href属性には、リンクする外部ファイルのURLを指定します。 rel属性にはリンクタイプを指定します。 具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。 リンクタイプには以下の値などがあります。 link要素のrel属性に指定可能なキーワード値 以下の値のうち、よく使用されているのはstylesheetやalt
■Canvasによる描画指定の一般的な手順 Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。 HTMLで、<canvas>要素の幅と高さ、および、id名を指定する getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する ■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する HTMLの側では、<canvas>要素で、描画領域の幅と高さ、および、id名を指定します。 <canvas>要素の固有属性はwidth属性とheight属性だけです。 <canvas>要素にはid属性で名前をつけます。 関連付けの取っ掛かりとしてid名を付
background-originプロパティは、背景の基準位置を指定する際に使用します。 background-attachmentプロパティの値にfixedが指定されている場合には、background-originプロパティの指定は無効となります。 尚、Firefox3以下は、-boxを付けない値をサポートしているようです。 ■値 padding-box背景をパディングボックスに対して相対的に適用する(初期値) border-box背景をボーダーボックスに対して相対的に適用する content-box背景をコンテントボックスに対して相対的に適用する CSSソースは外部ファイル(sample.css)に記述 p.sample1 { width:300px; height:80px; padding:15px; border:dashed 5px #000000; background-i
尚、ボーダーは太さや色だけを指定しても表示されないので注意してください。 これは、border-styleプロパティの初期値がnoneとなっているためです。 ボーダーを表示させるには、太さや色だけでなく種類も同時に指定してやる必要があります。 ■ボーダー太さの値 数値で指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。 キーワードで指定 thin(細い)、medium(普通)、thick(太い)のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。 スタイルシート部分は外部ファイル(sample.css)に記述。 p.s
【注意】keygen要素は、HTML Living Standardの仕様では削除されています。 <keygen>タグは、key generatorの略で、フォーム送信時にキーを発行して暗号化する際に使用します。 キーが発行される場合には、秘密キーと公開キーがペアで発行されます。 秘密キーはローカル環境に保存され、公開キーはサーバーに送信されます。 この仕組みにより、クライアント認証がより確実となり、情報送信の安全性が高まるでしょう。 尚、keytype属性では、暗号化の種類を指定することができますが、HTML5の仕様ではブラウザがサポートするべき暗号方式は決められていません。 ブラウザによっては、どの暗号方式もサポートされていないこともありえます。 keytype属性で指定できる可能性のある値としては、rsaなどが挙げられます。 RSAとは、公開鍵暗号方式の標準として普及している暗号アル
<input>タグのtype属性でtype="date"を指定すると、日付の入力欄が作成されます。 name属性は入力欄に名前を付ける属性ですが、<form>でデータが送信される際、 name属性で指定した名前と、入力された値が一組になって送信されます。 ユーザーは空文字を入力することができます。 入力必須にする場合には、required属性を併用してください。 type="date"の場合、step属性の単位は日、初期値は1となります。 ■type="date"の場合に指定可能な属性 type="date" 日付の入力欄を作成する name属性 フォーム部品に名前をつける value属性 送信される値を指定する autocomplete属性 入力候補を提示して入力内容を自動補完する(on・off・default)(初期値はdefault) list属性 ユーザーに入力候補として提案するデ
HTMLソース <form action="xxx.php" method="post"> <fieldset> 名前: <input type="text" name="yourname" required> ※入力必須<br> <input type="submit" value="送信"> </fieldset> </form>
次のページ
このページを最初にブックマークしてみませんか?
『HTMLクイックリファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く