サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.htmq.com
flexプロパティは、フレックスコンテナ内のアイテムの幅についてまとめて指定する際に使用します。 flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティ の値を、flexプロパティ一つでまとめて指定できるので便利です。 適用対象となるボックスがフレックスアイテムの場合、そのボックスのサイズの決定に際してflexプロパティの指定が参照されます。 適用対象がフレックスアイテム以外の場合には、flexプロパティの指定は無効となります。 フレックスアイテムとは、フレックスコンテナ内のアイテムのことです。 具体的に言うと、display:flex; を指定したボックスがフレックスボックス、その子要素がフレックスアイテムです。 以下に、それぞれの値の指定内容について確認します。 flex-growプロパティの値 flex-growプロパティの値では、フレック
object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 画像のトリミング表示に使用されることの多いプロパティですが、 画像のトリミング表示では object-fit: cover か object-fit: none が使用されることが多いでしょう。 ■値 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む(初期値) contain 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む cover 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む none 置換要素(img要
overflowプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。 overflowプロパティは、左右・上下のオーバーフローについてまとめて指定することのできるショートハンドプロパティ(短縮形)です。 キーワードを半角スペースで区切って記述することで、 overflow-xプロパティ と overflow-yプロパティ の値をまとめて指定できます。 キーワードを1つだけ記述した場合、overflow-x と overflow-y の値となります。 キーワードを半角スペース区切りで2つ記述した場合、1番目が overflow-x、2番目が overflow-y の値となります。 尚、no-displayキーワード、no-contentキーワード、および、複数キーワードの指定は、比較的新しく追加された仕様です。 これらの新機能については、
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する 全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する classセレクタ(クラスセレクタ) …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ
<figcaption>タグは、図表のキャプションを示す際に使用します。 <figure>~</figure>の中に配置すると、図表にキャプションを付けることができます。 図表についての詳細は、<figure>タグのページを参照してください。 ■HTML4.01からHTML5へのバージョンアップによる変更点 figcaption要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <p>カエルの生態に関しては、<a href="#kaeru">こちらの画像</a>でご確認いただけます。</p> <figure id="kaeru"> <img src="../images/kaeru.gif" alt="葉っぱを傘代わりにするカエル"> <figcaption>カエルの生態</figcaption> </figure> <p>カエルは雨降りが好きなので…</p>
<address>タグは、連絡先・問合せ先を表す際に使用します。 address要素は、通常はその文書の作者への連絡先情報を表しますが、 article要素の中に配置されている場合には、直近の祖先となるarticle要素の内容の作者への連絡先情報を表します。 address要素は、あくまでも内容に関する連絡先・問合せ先を表す要素です。 “address”という単語は日本語では“住所”という意味になりますが、 文章中に住所が出てきたらからといって<address>~</address>でくくるのは誤りです。 このような場合には<p>タグなどを使用するほうがふさわしいでしょう。 また、address要素の中には、連絡先情報以外の情報を含めてはいけません。 例えば、最終更新日時などの情報を含めるのは誤りです。 article要素の内容としては、例えば、連絡先のメールアドレスや問合せページへのリン
<table>タグは、テーブル(表)を作成する際に使用します。 テーブルの基本的な構造は、<table>~</table>の中に <tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や<td>~</td>でセルを定義します。 テーブルは行(横行)とカラム(縦列)を持ちますが、空の行やカラムを持つことはできません。 テーブルの各セルには見出しを定義するヘッダセル(<th>~</th>)と、 データを定義するデータセル(<td>~</td>)があります。 ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。 テーブルのキャプションは<caption>で指定します。 また、テーブルのヘッダ・フッタ・本体は、 <thead>・<tfoot>・<tbody>で定義します。 これらの要素は省略することもできますが、指定しておけばテーブル構造が
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。 <header>の中には、通常は<h1>・<h2>・<h3>・<h4>・<h5>・<h6>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。 ■HTML4.01からHTML5へのバージョンアップによる変更点 header要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <body> <header> <h1>浦島観光ホテル</h1> <nav> <ul> <li><a href="plan.html">宿泊プラン</a></li
以下の使用例では、p要素の下にあるstrong要素にスタイルが適用されます。 この際、p要素直下にある子要素のstrong要素だけではなく、孫要素以下のstrong要素にもスタイルが適用されます。 ■使用例 スタイルシート部分は外部ファイル(sample.css)に記述。 p strong {background-color:#3399FF; color:#ffffff; padding:5px;} span {font-size:small;} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h2>今日の<strong>お天気</strong></h2> <p> 今日は<strong>晴れ</strong>です。 <span><strong>洗濯
セレクタを > で区切ると、あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用することができます。 以下の使用例では、p要素の直下にあるstrong要素にスタイルが適用されます。 この際、p要素直下にある子要素のstrong要素だけにスタイルが適用され、孫要素以下のstrong要素にはスタイルは適用されません。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル(sample.css)に記述。 p > strong {background-color:#3399FF; color:#ffffff; padding:5px;} span {font-size:small;} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <bod
transformプロパティのmatrix3d()関数は、要素に3D変形を適用する際に使用します。 マトリクスとは行列のことで、matrix3d()関数では行列を使用して3D変形を指定します。 変形の内容は16個の数値で指定します。 基準となる値は、matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )で、この場合には座標は変化しません。 指定すべき数値が16個もあると複雑に感じますが、以下のように4×4に分けて考えると理解しやすいでしょう。 16個の数値とはつまり、4x4の行列を指定していることに他なりません。 ■4x4の行列で座標変換する理由 まず、何も変形しない場合の座標変換を確認してみましょう。 次に、拡大縮小を行う場合の座標変換を確認してみましょう。 ここまでの計算では、4x4の行列ではなくても3x3の行列でも十分でした。
<details>タグは、ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。 もし、<details>~</details>の子要素として<summary>が存在する場合には、<summary>~</summary>の内容が、この詳細情報の要約となります。 <summary>が存在しない場合には、ブラウザが<details>の内容を要約するかもしれません。 尚、<details>を脚注に使用することは推奨されていません。(脚注であることを明示的に表す専用のタグはありません) ■HTML4.01からHTML5へのバージョンアップによる変更点 details要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <section> <h1>動画ファイルのダウンロード</h1> <details> <summary>『sample.m
<fieldset>タグは、フォームの入力項目をグループ化する際に使用します。 <fieldset>~</fieldset>の中に配置された <input>・ <select>・ <textarea>等のフォーム部品がグループ化され、一般的なブラウザではボーダーで囲まれて表示されます。 フォーム部品のグループにキャプション(タイトルや説明)を付ける場合には、<fieldset>~</fieldset>の中の 最初の<legend>で指定します。 disabled属性は、グループ内のフォーム部品を無効にする際に使用します。 <legend>でグループ名を指定している場合には、 <legend>~</legend>の内容を除く、それ以外のフォーム部品が無効となります。 disabled属性は、まだサポートしているブラウザが少ない(無い?)ようです。 form属性は、どのフォームと関連付けるかを
transform-originプロパティは、要素に2D変形、または、3D変形を適用するときの変形の原点を指定する際に使用します。 値は1つ、または、スペースで区切って2つ指定します。値を1つだけ指定すると、2番目の値はcenterとみなされます。 値を2つ指定すると、両方がキーワード値である場合を除いて、最初の値は水平方向、2番目の値は垂直方向の値となります。 値をパーセンテージや長さで指定する場合、2D変形では変形前の要素の左上位置(0,0)から右下方向への距離(ローカル座標システム)で指定します。 また、3D変形では変形前の要素の左上位置(0,0,0)から右下方向への距離(ローカル座標システム)で指定します。 値には負のパーセンテージや負の長さを指定することもできます。 ■値 パーセンテージ 変形を適用する要素の左上位置(0%,0%)からのパーセンテージ、および、3Dの場合にはZ軸方
<object>タグは、文書に外部リソースを埋め込む際に使用します。 <embed>がプラグインを必要とするデータを埋め込むのに対して、 <object>には外部リソース全般を指定することができます。 <object>タグで指定された外部リソースは、データのタイプにより、 画像、入れ子の閲覧コンテンツ、プラグインで処理されるデータのいずれかとして扱われます。 data属性は、文書に埋め込む外部リソースのURLを指定する際に使用します。 また、type属性は外部リソースのタイプを指定する際に使用します。 data属性とtype属性は、最低限どちらか一つを指定する必要があります。 <object>タグでプラグインデータを埋め込むと、そのデータの種類に応じてプラグインが呼び出されます。 この際、<object>~</object>の中に<param>を配置しておくと、 呼び出されるプラグインのパ
E:first-of-typeは、疑似クラスの一種で、 最初のその種類の要素にスタイルを適用する際に使用します。 E:first-childの場合には、種類に関係なく要素を数えるため、 最初に来る要素がE要素であった場合にスタイル適用の対象になります。 一方、E:first-of-typeの場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えるため、最初に来るE要素がスタイル適用の対象になります。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル(sample.css)に記述。 div.sample1, div.sample2 {background-color:#CCFFCC;} div.sample1 p, div.sample2 p {border:1px dotted #000000;} div.sample1 p:f
<input>タグのtype属性でtype="hidden"を指定すると、 ブラウザ上に表示されない非表示データを送信することができます。 隠しデータとも呼ばれますが、完全に隠しきれているわけではなく、HTMLソースを表示すれば見ることができるので注意してください。 name属性は非表示データに名前を付ける属性ですが、<form>でデータが送信される際、 name属性で指定した名前とvalue属性で指定した値が一組になって送信されます。 ■属性 HTMLソース <form action="cgi-bin/abc.cgi" method="post"> <p> 名前:かえる<br> 評価:良い<br> 理由:面白い </p> <p> <input type="hidden" name="userid" value="12345"> <input type="hidden" name="hyo
<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="sample" width="400" height="300"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> HTMLの側では、<canvas>要素で、描画領域の幅と
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>
<small>タグは、免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。 その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。 <small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。 <small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。 例えば、利用規約がメインコンテンツとなるページで、全体を <small> ~ </small> で囲むような使い方は適切ではありません。 ■HTML4.01からHTML5へのバージョンアップによる変更点 small要素は、HTML4.01ではテキストを小さく表示する要素でした。 HTML5では注釈や細目を表す要素となり、これまでとは意味が変更されています。 ■使用例 HTMLソース <f
<legend>タグは、フォームの入力項目グループにキャプション(タイトルや説明)を付ける際に使用します。 <legend>を使用する場合には、<fieldset>~</fieldset>の中の先頭に配置します。 <legend>を<fieldset>~</fieldset>の中の先頭に配置すると、 親要素となる<fieldset>で定義されたフォーム部品グループのキャプションを表します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 legend要素は、HTML4.01では揃え位置を指定するalign属性が非推奨とされながらも用意されていましたが、HTML5では廃止されています。 揃え位置を指定するにはCSSを使用してください。 ■使用例 HTMLソース <form action="mail.php" method="post"> <p><label>名前:<inpu
E:nth-of-type(n)は、疑似クラスの一種で、 n番目のその種類の要素にスタイルを適用する際に使用します。 E:nth-child(n)の場合には、 種類に関係なく要素を数えて、n番目にE要素が来た場合にスタイル適用の対象になります。 一方、E:nth-of-type(n)の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えてスタイル適用の対象が決定されます。 nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を指定することができます。 例えば、数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0となります。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル(sample.css)に記述。 div.sample1, div.sample2 {background-color:#CC
次のページ
このページを最初にブックマークしてみませんか?
『HTMLクイックリファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く