メディア特性とは スタイル適用対象メディアの画面サイズや画面の向き、解像度などの条件を表す情報。 メディア特性を指定することで、メディアタイプと組み合わせてさまざまな条件を表すことができる。 主なメディア特性 メディア特性 説明 値 width min-wi…

メディアタイプとは ユーザがWebページの閲覧に用いるデバイスの種類 link要素のmedia属性やCSSでメディアタイプを指定することで、使用デバイスを条件にして、適用するスタイルを切り替えることができる。 主なメディアタイプ メディアタイプ 説明 all すべ…

リセットCSSとは ブラウザのデフォルトスタイルの差異を調整する手法。 使用しない場合、同一のWebページでも、ブラウザによっては表示の差異が発生する可能性がある。 リセットCSSを実装する手段 Normalize.css ブラウザのデフォルトのスタイルでも有用なス…

viewportとは ブラウザの表示領域を設定する機能。 meta要素のcontent属性で設定する。 viewportで設定できるプロパティ 名称 説明 設定できる値 width ビューポートの横幅 数値(pxやvwなど) device-width(画面の幅) initial-scale ビューポートの拡大値の初…

レスポンシブWebデザインで用いる主な技術 名称 説明 viewport ブラウザの表示領域を設定する機能。異なるデバイスでも画面が同じように 表示されるように仮想的な画面サイズを設定する。 メディアクエリ デバイスの種類や画面サイズに応じて適用させるCSSを…

レスポンシブWebデザインとは PCやスマートフォン双方に対応した共通のWebページを作成し、画面サイズに応じて最適化されたユーザインタフェースを表示する手法。 PCやスマートフォンなど、複数のデバイスに対応したWebサイトを構築するには、共通のWebペー…

canvas要素とは WebGL APIやCanvas APIでアニメーションやグラフィックスを表示させるための要素。※canvas要素だけでは何も表示されない。 WebGL API：２D や３Dのアニメーションを描画できるAPI Canvas API：HTML＋JavaScriptだけで図形を描画するためのAPI…

fieldset要素およびlegend要素とは フォームの入力部品をグループ化してキャプションを設定するために使用する。 fieldset要素：グループ化する入力部品をまとめる。 legend要素：キャプションを指定する。 記述例 実行例

progress要素とは タスクの進捗状況を表示する場合に使用する。 記述例 【解説】 value属性にはタスクの進捗状況を指定する。※実際にはJaxaScriptなどの処理によって変化させる。 max属性にはタスク完了までの総作業量を指定する。 実行例

textarea要素とは textarea要素は複数行にわたる文章の入力欄を作成するために使用する。 textarea要素の主な属性 属性 説明 rows 表示領域の高さ(行数)を指定 cols 1行あたり入力可能な文字数(半角文字の文字数。全角の場合は2分の1となる。) placeholder …

select要素とは セレクトボックスを作成するために使用する。 option要素とは select要素の子要素であるoption要素は選択項目を作成するために使用する。 記述例 【解説】 size属性：ブラウザに同時に表示される項目数を指定できる。 option要素の中のvalue…

input要素とは form要素に含まれるように指定し、入力部分を定義するために使用する。 type要素とは 入力部分の種類を指定する。 type属性に指定できる主な値 属性 説明 text テキストボックスを定義 button ボタンを定義 checkbox チェックボックスを定義 r…

label要素とは 入力部分に対してキャプションをつける場合に使用する。※キャプションとは入力部分の項目名やタイトル。

form要素とは ブラウザに入力されたデータをWebサーバに送信するために使用する。 form要素の主な属性 属性 説明 action 送信先のURLを指定 method 送信方法をgetまたはpostで指定 enctype 送信データの形式をMIME typeで指定 novalidate バリデーション機能…

a要素とは ほかのwebページや、webページ内の指定した箇所に移動するためのハイパーリンクを作成するために使用する。 サンプルコード 【解説】 href属性には移動先を指定する。 a要素の内部には、ハイパーリンクを設定したい文字列を指定する。 target属性…

video要素とは 動画を再生するために使用 サンプルコード 【解説】 video要素の属性 属性 説明 src 動画ファイルのパス controls コントロール(再生ボタンなど)の表示 loop 繰り返し再生 poster 動画を再生できない場合に表示する画像 追加事項 video要素の…

id属性とは 要素に固有の識別子を一意に指定するグローバル属性 一意の識別名なため、ドキュメント内の複数の要素に同じ値を指定することはできない。 class属性とは 要素の種類・分類を指定するグローバル属性 種類・分類を表すため、id属性とは対照的に、…

picture要素とは その要素内のimg要素に対して複数のリソースを指定するための要素 picture要素内のsource要素のmedia属性に指定した、viewportの横幅などの条件に応じて、使用すべきリソースを切り替えることができる。 picture要素内に、source要素で表示…

表を構成する要素として、表全体、行、セルの3つが挙げられる。 列の結合の記述例 <table border="1"> <caption>タイトル</caption> <tr><th colspan="2">見出し</th></tr> <tr><td>ねこ</td><td>うさぎ</td></tr></table> ※colspan属性の値に結合したいセルの数を指定することで横に結合できる。 実行例 タイトル 見出し ねこ うさぎ 行の結合の記述例 <table> <caption>タイトル</caption <tr><th colspan="2">見出</th></table>…

いろいろな要素のまとめ code要素とは コンピュータコードの断片を表す要素 samp要素とは プラグラムやコンピューティングシステムからの出力を意味する。 kbd要素とは ユーザ入力を表す。 一般的にはキーボード入力を意味するが、音声入力やメニュー選択な…

em要素とは その内容を強調する際に使用する。 strong要素とは 重要、深刻、緊急などの意味を持ち、見出しや段落中の重要な箇所や緊急の通知や警告を表す。 small要素とは 免責事項、警告、法的規則、帰属やライセンス用件など、一般的に小さい文字で表記さ…

説明リストとは 用語とその説明の組み合わせのリスト。 主に、用語集や、質問と回答の表示などに使用する。 dl要素：説明リストを表す。 dt要素：用語を表す。 dd要素：用語に対する説明を表す。

figure要素とは ドキュメントの主な内容から参照される自己完結型の図表を表す。 完結したコンテンツであるため、メインのフローに影響を与えず、別ページや付録として表示できるイラスト、グラフ、写真などに使用する。 figcaption要素とは figure要素内に…

div要素とは ドキュメントをグループ化するための要素。 文書構造上の意味を何も持たない。 ほかに適切な要素がないときに使用されることが推奨される。

main要素とは そのドキュメントに固有で、中心的なコンテンツを表す要素。 HTML5.2ではドキュメント内に複数のmain要素が存在してもかまわない。 ※ナビゲーションリンク、著作権情報など複数のドキュメントで使用されるコンテンツは含まい。

ins要素とは ドキュメントに後から挿入されたテキストを意味する。 下線が適用される。 実行例 はてなブログ del要素とは ドキュメントから削除されたテキストを意味する。 打消し線が適用される。 実行例 はてなブログ ※下線や打消し線を引くことが目的であ…

ruby要素、rt要素、rp要素を使用することで振り仮名を振ることができる。 振り仮名の記述例① <ruby>熟語<rt>じゅくご</rt></ruby> 実行例 熟語じゅくご ※複数の文字にまとめて振り仮名を振るには、ruby要素内のテキストに対してrt要素で振り仮名をまとめて指定する。 振り仮名の記…