10807 words
54 minutes
HTML5プロフェッショナル認定Level1 マイナビ
2017-04-01
書籍
教科書
/
HTML

HTML5プロフェッショナル認定Level1 マイナビ#

2017_04_html5

学んだこと#

  • HTML/CSSの基礎
  • HTML要素、CSSのクラス、疑似クラスなど
  • セレクタの優先順位
  • 手を動かしながら、実際にサンプルページを自分で作成しつつ少しずつ覚えた

手に取った理由#

  • HTML5/CSSを活用したWeb開発のための知識習得
  • 資格認定の為

学習メモ#

######################################################################
# HTML5認定試験対策メモ
######################################################################




■Chapter1  HTMLの基礎知識
■====================================================================


■1-1.HTML5の基本文法
・空要素(void element)には終了タグを指定できない
・空要素のタグの>の直前にはスラッシュを入れても良い
・空白文字
半角スペース、タブ、改行(CR,LF,FFを含む)を纏めて空白文字と言います。
・属性を指定する際に「=」の前後には空白文字を入れることができ、属性値を
囲う引用符(「"」または「'」)は省略することが出来ます


・属性値を囲う引用符が省略できるのはその文書がHTML構文で書かれていて
属性値に空白文字の他に「=」「"」「'」「>」「<」「`(グレーブアクセント)」を含んでない場合に限ります
また属性値がからの場合は省略出来ません。


・HTML5文書の先頭にはオプションでBOM(バイトオーダーマーク)を入れることができる


・DOCTYPE宣言
ブラウザの表示モードを「標準モード」にする目的で指定することになっている


・文字参照
ソースコード内にそのまま記入出来ない文字などをテキストに書き入れられるようにするために、
HTMLでは文字参照という特別な書式を利用することが出来ます。


・グローバル属性
すべての要素に共通して指定できる属性のこと




◆練習問題
◆====================================================================
①HTML5のDOCTYPE宣言として妥当なもの
②状況によっては開始タグと終了タグの両方を省略できるものはどれか
・html
・head
・body
・colgroup
・tbody
のみ！
③空要素のタグ指定方法
/の後ろに空白スペースを記入できない
空要素には終了タグを記入できな
④DOCTYPE宣言の中でHTML5では使用できないもの


⑤HTML5のコメント記述方法として正しくないもの
「<!--」「-->」は続けて書く必要がある
コメント内部のテキストは - で終了することは出来ない


⑥論理型属性であるhidden属性の指定方法として間違っているものを選択
<div hidden="true"> ～ </div>
引用符も省略できるが、true,falseで指定することはできない


⑦HTML5のclass属性またはid属性の値の指定方法として間違っているものはどれか
id=""
id="abc xyz"
id属性は空文字は許さない
id属性は空白を含むことが出来ない




⑧HTML5で利用可能な属性のうち、任意の要素に指定可能でないものはどれか
data属性：object要素にしか指定できない










■Chapter2  HTML5で追加された要素
■====================================================================
◯セクショニングルート
・body要素
・blockquote要素
・fieldset要素
・figure要素
・td要素


◯セクションを表す要素の種類
・section
・article
記事を始めとする、「それだけで全部の/それだけで完結している」セクションを表す場合に使用します
単独で配布・再利用可能なコンテンツに対して使用し、記事のほかにもブログのコメントやフォーラムの投稿、
インタラクティブなウィジェットやガジェットなどをマークアップする際にも利用できます。
・aside
前後の内容とほぼ関係がなく、それらとは分離されたものであると考えられるセクション
・nav
そのページにおけるナビゲーションのリンクを含むセクションを表す場合に使用します。


◯構造を示す要素
・header要素


・footer要素


・main要素
main要素の内容には、そのページに特有のコンテンツのみを入れ、サイト内の複数のページで共有しているナビゲーションや
ロゴ、検索フォーム、著作権情報などのコンテンツは含めないようにする
main要素は1つのHTML文書につき1つしか配置出来ない


◯テキスト
・mark要素
黄色いマーカー線で表示して目立たせる
オリジナルの文書がそうなっていたわけではないが、
それを引用した人が読者に注目してもらいたいので目立つようにする場合などにも使用されます
その他、検索結果の一覧で、検索に使用した単語を目立つようにする場合などにも使用されます


・data要素
人が普通に読み取り可能な要素内容とともに機会読み取りが可能なデータも提供する要素
機械読み取りが可能なデータは、必須属性であるvalue属性の値として指定します


・time要素
data要素を日時での使用に特化させた要素


・wbr要素
通常、英単語やURLなどはいくら長くてもその途中で行を折り返すことはアリません。
英単語やURLの途中でも行を折り返すことができるようにする要素です。


・bdi要素
特定の範囲のテキストだけを意図的に分離・独立させることができる


◯ルビ
・ruby要素


・rt要素
ルビ(ひらがな)として小さい文字を表示させるテキスト
ruby関連要素の終了タグは省略可能


・rb要素
漢字の部分を示すための要素
なくてもいいが、細かく分ける場合は必要
<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>
<ruby><rb>漢字<rt>かんじ</ruby>
<ruby><rb>漢</rb><rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>
<ruby>漢<rb>字<rt>かん<rt>じ</ruby>


・rp要素
ルビ未対応のブラウザで表示させるときに、()カッコくくりでルビを表示させるための要素


<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
<ruby>漢字<rp>(<rt>かんじ<rp>)</ruby>
<ruby><rb>漢</rb><rb>字</rb><rp>(</rp><rt>かん</rt><rt>じ</rt><rp>)</rp></ruby>
<ruby>漢<rb>字<rp>(<rt>かん<rt>じ<rp>)</ruby>




・rtc要素
rt要素をグループ化する要素
ルビは↑だけでなく下(左)にもつけることが出来ます。


<ruby>漢字<rt>かんじ</rt></ruby>


◯動画・音声
・video要素
動画を再生させるための要素


・audio要素
音声を再生させるための要素


・source要素
代替データとして異なる形式のデータも併せて指定しておきたい場合


・track要素
動悸させる外部のテキストトラック(字幕などのテキストデータ)を指定する場合に使用します。


・embed要素
プラグインを使用する外部コンテンツを組み込む際に使用される要素




◯フォーム
・meter要素
メーターとして使用する要素です。
特定の範囲内での位置を示す場合に使用します。


・progress要素
タスク(コンピュータが行っている作業)の進み具合を表すための専用要素


・datalist要素
input要素にサジェスト機能を追加する(入力候補の選択肢を与える)要素
datalist要素の中に入れたoption要素が選択肢となります。


<p>
  <label>
    取得したい資格：
    <input type="text" name="c" list="certifications">
    <datalist id ="certifications">
      <option value="HTML5プロフェッショナル認定試験">
      <option value="ウェブデザイン技能検定">
    </datalist>
  </label>
</p>


・output要素
計算結果やユーザーの操作による結果を示すための要素
<form onsubmit="return false" oninput="sum.value=a.valueAsNumber+b.valueAsNumber">
  <input name="a" type="number"> +
  <input name="b" type="number"> =
  <output for="a b" name="sum"></output>
</form>




・keygen要素
公開鍵暗号における公開鍵・秘密鍵のペアを生成するフォーム部品
フォームを送信すると秘密鍵はローカルに保存され、公開鍵はサーバーに送られます
この要素は空要素です。




◯その他の新要素
・figure要素
figureという英単語は、図・図表、挿絵などの意味を持つ
それがメインコンテンツの本文から参照される図版のようなコンテンツであることを示します
具体的な要素内容としては、図表・写真・イラストソースコードの一部のような、
それ自身がまとまった一つの完結した内容になっているFlow content(一般コンテンツ)を入れます


<p>
CSSを使用すると、影を表示させることが出来ます。(<a href="#">図版01</a>)
</p>
<figure id ="fig01">
<figcaption>図版01：CSSでボックスに影を表示させる例</figcaption>
<pre><code>.sample {
  box-shadow: 3px 3px 10px #999;
  }</code></pre>
</figure>


・figcaption
figure要素で表す図版のキャプションや説明文部分をマークアップするための専用要素
figure要素の一番前か一番後ろにしか配置できない点に注意する


・template要素
その範囲がスクリプトによって生成(複製・挿入)される部分であることを示す要素


・canvas要素
スクリプトによって描画するビットマップの動的なグラフィックとなる要素












■Chapter3  HTML5で変更・廃止された要素
■====================================================================


◯HTML5で変更された要素
・hr要素
従来：横罫線を表示させるための空要素
コンテンツの内部的に「段落レベルで主題が変わるところ(区切り・変わり目)」を示す
話題が変わるところや、物語の場面が変わる所など


セクションはそれ自体が主題の区切りを示す為、セクショントセクションの間にhr要素を入れる必要はアリません
hr要素はセクション内部の段落レベルでの区切りを示すために使用します。


・small要素
従来：テキストを小さなフォントサイズで表示させるためのものでした
「一般的に小さな文字で示される付帯情報」をマークアップする為に使用します。
具体的には、Copyrightの表記や帰属、免責事項、警告と言った部分で使用されます




・strong要素
従来：em要素よりも強い協調を示す要素
「重要性」「重大性」「緊急性」のあるコンテンツをマークアップするために使用します


strong要素が重なれば重なる程その度合は強くなります。


・b要素
従来：テキストを太字で表示させるためのもの
重要性やその他の特別な意味合いは持たずに、実用的な意味で目立たせたほうが良いと思われる部分をマークアップする為に使用
具体的には、レビュー記事における製品名、概要説明に於けるキーワード、記事のリード文など


・i要素
従来：テキストをイタリックで表示させるためのもの
学名のほか英文中での船名、専門用語、言語が異なっている部分、小説などにおける頭のなかで考えていることの表現など、
普通のテキストとは違う性質のものに切り替わっているような部分を示す


・s要素
従来：取り消し線を引いた状態で表示させるためのもの
既に正しい情報ではなくなった部分、関係のない情報となってしまった部分を表すために使用します。


文書の編集によって削除された部分はs要素を使用せずに、del要素を使用します。




・u要素
従来：テキストに河川を引いた状態で表示させるための要素
耳で聞いてもわからないけれども表示上は明確に示される、テキスト以外で注釈的な表現をする
範囲をマークアップするために使用します。
用途は、中国語でテキストが固有名詞であることを示す場合や、スペルミスの箇所を示す場合などと限定的で、一般的なページでは
ほとんど利用されない要素


リンク付き要素とかぶってしまうため、それらの要素と混在するのは避けられる。




◯HTML5で廃止された要素
・center要素やfont要素といった表示指定の要素派廃止された
・small要素は利用可能だが、big要素は廃止された
・s要素は利用可能だが、strike要素は廃止された






◯HTML5で廃止された属性
・alignやbgcolorといった表示指定の属性は基本的にすべて廃止された
・一部の要素を覗いてname属性は廃止され、代わりにid属性が使用される
・あまり使われていなかった属性、他の機能で代用可能な属性の多くも廃止された






■Chapter4  HTML4.01以前からある要素
■====================================================================
◯基本構造
▼ココが重要
・html要素のversion属性は廃止され、新しくmanifest属性が追加された
・HTML5では、titile要素がなくても良いケースがある
・address要素はもっとも近いarticle要素またはbody要素の問合せ先


▼html要素
manifest属性：アプリケーションキャッシュマニフェスト(キャッシュさせるファイル、させないファイルなどの情報を
明記したテキスト形式のファイル)を指定するための属性


・補足
html要素の開始と終了タグは、その直後にコメントがなければ省略することも可能


・注意
HTML5にはHTML構文とXHTML構文がアリますが、タグの省略が可能なのはHTML構文だけである


▼head要素
HTML文書のMetadata content(文書情報コンテンツ)を入れるための要素


▼body要素
HTML文書のコンテンツを入れるための要素です。


▼title要素
HTML文書のタイトル、または名前であることを示す要素
head要素の中に記載する。


title要素は1つのhtml文書につき1つしか配置できない点に注意してください。




▼base要素
HTML文書内で指定されている相対URLの基準にするURLを設定する為の要素です。
必ずhead要素内で使用
target属性を使用することでデフォルトの表示先(ブラウジングコンテキスト)を
設定しておくことも出来ます。


・ブラウジングコンテキスト
HTML5の仕様書では、HTML文書を表示させるウィンドウやタブ、インラインフレームなどのことを
ブラウジングコンテキストと呼んでいます。


・注意
1つのHTML文書につき1つまで
少なくともhref属性かtarget属性のいずれか一方を指定する必要がある
base要素で指定した基準URLはhtml属性のmanifest属性で指定する
アプリケーションキャッシュマニフェストのURLには影響を与えない点に注意


▼meta要素
様々な種類のメタデータを指定できる要素
・メタデータ
あるデータに関するデータのことを指す一般的な用語で、
HTML文書でいうと、「HTML文書自身に関する情報」のことです。
HTMLのhead要素内に入れられる要素は基本的にすべてメタデータであるといえます。


・プラグマディレクティブ/プラグマ指示子
HTML文書の状態や挙動を支持する命令のこと
たとえばブラウザへの再読込や他文書への移動の命令、デフォルトのスタイルシート言語やスクリプト言語の設定、
文字コードの宣言などがこれに当たります。
meta要素にhttp-equiv属性が指定されているとき、そのmeta要素はプラグマディレクティブとなります。


▼address要素
自分自身に最も近いarticle要素またはbody要素の内容に関する問い合わせ先を示す要素


・ココに注意
address要素の内容に入れられるのは、問合せ先の情報だけです。
著作権情報や更新日のような問合せ以外の情報は入れられませんので注意してください


▼div要素
予め決められた役割や意味を持たない要素です。
似た要素としてspan要素があります
違いはインライン要素/ブロックライン要素でしたが、
HTML5ではそのような分類はされなくなりました。




▼span要素


◯テキスト
・h1～h6要素はセクションの見出しを表す
・blockquote要素の内部には、footer要素やcite要素を配置できる
・cite要素は作品のタイトル・作者名・参照先URLのいずれかを示す


▼h1～h6要素
セクションの見出しとなる要素


▼p要素
段落を表す要素


▼blockquote要素
要素内容が引用してきた文書であることを示す
ブロックレベル要素：blockquote
インライン要素　　：q
指定できる属性：cite属性




▼q要素
その要素内容が引用してきた文書であることを示す
インライン要素で使用


指定できる属性：cite属性


▼cite要素
創作物に言及する際にそのタイトルを示すための要素
要素内容には、作品の題名か作者の名前(個人・団体・組織も可)、参照先のURLのいづれかを含めなければなりません。


▼ins要素
文書に追加した部分(inserted text)を示す為に使用


◯指摘できる属性
・cite
・datetime


ins要素のコンテンツモデルはトランスペアレント


▼del要素
文書から削除した部分を示す


del要素のコンテンツモデル派トランスペアレント


▼em要素
強調されている部分を示すための要素


▼br要素
その位置で改行さえるための空要素
改行がコンテンツの一部であるような部分で使用します。
余白をとるために使用したり、段落のように見せるために改行として使用するものではアリません。




▼abbr要素
略語であることを示す。
省略していない状態の言葉を示すには、title属性を指定する。


※注意
title属性は補足情報を提供するグローバル属性ですが、
abbr要素で使用する場合、「省略してない状態の言葉を示す」以外の用途には使用できない点に注意


・すべての略語に対してabbr要素を指定する必要はない。使いたいときだけ！
・abbr要素の他にacronym要素も以前はあったが、使い分けに混乱が生じたので、廃止になった




▼dfn要素
その部分が定義の対象となっている用語であることを示す。


▼pre要素
その要素内容であるテキストが整形済み(performatted)であることを示す要素
ここで言う整形とは、半角スペースやタブ、改行を使って表示を整えているという意味で、
pre要素の要素内容は入力されているとおりにそのまま表示されます。
ただし具体的にどのように表示させるかはCSSで指定可能です。
・ソースコード
・アスキーアート
・メール内容


※注意
HTML構文の場合、pre要素の開始タグ直後にある改行は取り除かれる事になっている




▼code要素
その部分がコンピュータで使用されるソースコードであるということを示す要素


▼samp要素
コンピュータのプログラムやシステムからの(サンプル)出力であることを示す


▼kbd要素
ユーザーが入力する内容であることを示す要素


▼var要素
その部分が変数(variable)であることを示す要素


▼bdo要素
Unicodeの双方向アルゴリズムの文字表記の方向を上書きして指定する
要素内容のテキストを左から右へと表示するのか、右から左へと表示するのかをグローバル属性であるdir属性を使って設定する要素


▼sup要素
その部分が上付き文字要素であることを示す


▼sub要素
その部分が下付き文字要素であることを示す












◯リスト
※ココが重要
・HTML5ではul要素 / ol要素 / dl要素の内容はからでもOK
・HTML5のdl要素で用語をの定義をする場合、dfn要素も必要になる
・HTML5のdl要素は、会話・対談を表す場合には使用できない


▼ul要素
箇条書きのようなリスト


▼ol要素
連番つけられた項目を持つリスト


※指定可能な属性
・type
・start
・reversed


▼li要素
リストの各項目人なる要素


▼dl要素
内容となる各項目が「名前(dt要素)」「値(dd要素)」のペアになっている形式のリスト


※注意
・HTML5ではdl要素の要素内容はからでもOK。また必要に応じてtemplate要素とscript要素を配置することもできる


以前：dl要素 definition listを意味
HTML5:dl要素 description listを意味
これによってdl要素から「定義」の意味がなくなった為、dl要素を「用語の定義」に使用する場合には、
次のようにdfn要素(定義対象の用語であることを示す要素)を追加する必要がある点に注意


▼dt要素
名前(用語)などを示す


▼dd要素
値(説明文等)




◯リンク
※重要
・a要素のコンテンツモデル派条件付きのトランスペアレント
・a要素にはdownload属性が追加されている
・link要素にはsizes属性とcrossorigin属性が追加されている


▼a要素
要素内容がハイパーリンクになります。


▼link要素
関連する別の文書やファイルなどを示すための空要素href属性とrel属性は必ず指定する必要があります。
href属性とrel属性は必ず指定する必要があります。


◯画像とオブジェクト
※重要
・HTML5では、特別なケースにおいてはimg要素のalt属性を省略できる
・HTML5では、width属性とheight属性に％値は指定できない
・map要素とobject要素のコンテンツモデルはトランスペアレント


▼img要素
src属性で指定したアドレスの画像を表示させる空要素


▼map要素
イメージマップを定義するための要素


▼area要素
イメージマップでリンクする領域を定義する空要素


▼object要素
様々な形式の外部データを組み込むための要素
画像や別のHTML文書、プラグインを使用するデータなども組み込むことが出来ます。


▼param要素
object要素によって呼び出されるプラグインのパラメータを設定する要素


◯フォーム
※重要
・HTML5では、フォーム関連の属性が多数追加されている
・input要素で作成可能な部品の種類は、HTML5になって約2倍に増えた
・form要素の外部にある部品でも、form要素に関連付けることが可能となった
▼form要素
フォーム関連の要素をとりまとめ、ユーザーが入力・選択したデータをサーバーに送信するための要素


▼input要素
type属性で指定したキーワードによって様々な種類の入力・選択用部品となる要素


▼textarea要素
複数行のテキストフィールドとなる要素


▼button要素
要素内容がそのままラベルとして表示されるボタン


▼select要素
選択肢の中から選ぶ形式のフォーム部品になる要素


▼option要素
select要素またはdatalist要素の選択肢となる要素


▼optgroup要素
option要素をグループ化してそこにグループの名前をつける要素


▼label要素
その要素内容であるラベルとフォーム部品とを関連付けるための要素


▼fieldset要素
フォーム関連の要素をグループ化するための専用要素


▼legend要素
fieldset要素によってグループ化されたフォーム関連要素のグループ名(キャプション)を表示させるための要素
枠で囲われるやつね！




◯テーブル
※重要
・table要素のborder属性は、レイアウト用のテーブルではないことを示す
・tfoot要素は、tbody要素の前にでも後ろにでも配置できる
・table要素内で使用する要素の多くは、終了タグを省略できる


▼table要素
表形式のデータを表すための要素


※注意
table要素のborder属性は以前は表の線の太さを指定するために使用されていましたが、
HTML5ではレイアウト用のテーブルではないことを示す目的で使用されます。
その為、値には1か空文字以外は指定できなくなっている点に注意！！


※説明補足
HTML5の仕様書には、「テーブルをレイアウトのために使用するべきではない」と明確に記載されている
また、「もし、テーブルをレイアウトの為に使用するのであれば、role="presentation"を指定しなければならない」
とも書かれています。


▼tr要素
表の横一列を表すために使用


▼th要素
表の見出し用のセルを表すために使用


▼td要素
データ用のセルを表す要素


▼thead要素
見出しとなっているtr要素をグループ化する要素
簡単に言えば表のヘッダーを表す要素


▼tbody要素
表の本体部分を表す


▼tfoot要素
表のフッター部分を表す


※注意
以前はtfoot要素は必ずtbody要素よりも前に配置する必要が有りました。
HTML5ではtfoot要素はtbody要素の前でも後ろでも配置出来ます。
ただし1つのtable要素内に複数のtfoot要素を配置することは出来ません。


▼caption要素
table要素のキャプション(表のタイトル)となる要素




▼col要素
span属性のないcolgroup要素内に配置して、1列分以上の縦列を表す空要素
col要素にspan属性を指定していなければ、１列分の縦列を表し、span属性を指定して値に１以上の整数を指定していればその列分の
縦列となります。


▼colgroup要素
1列分以上の縦列をグループ化する要素
※注意
colgroup要素にspan属性を指定している場合は、colgroup要素の要素内容は空にします。
span属性を指定していない場合は、0個以上のcol要素かtemplate要素を入れます。




◯その他
※重要
・iframe要素のsrcdoc属性には、HTML文書全体を記入できる
・script要素のtype属性のデフォルト値は「text/javascript」で省略も可能
・noscript要素はXHTML構文では使用できない


▼iframe要素
HTML文書の中で、別の文書を表示させる領域(ブラウジングコンテキスト)となる要素
「iframe」は「inline frame(インラインフレーム)」の略




▼script要素
HTML文書内にスクリプトまたはデータブロックを組み込む為の要素


▼noscript要素
スクリプトが向こうの場合に利用されるコンテンツを要素内容としてもつ要素


















■Chapter5  CSSの基礎知識
■====================================================================


◯CSSの基本文法と組み込み方
※重要
・CSSの書式には自由に空白文字を入れられるが、セレクタだけは例外
・HTML5では、link要素とstyle要素のtype属性が省略可能となった
・link要素とstyle要素のmedia属性と@importにはメディアクエリが指定可能


▼基本的な書式と各部の名称


▼link要素でHTMLに組み込む
head要素の中にlink要素を指定してHTMLに埋め込む方法


▼style要素でHTMLに読み込む
要素内容としてスタイルシート言語を組み込むことのできる要素


▼style属性でHTMLに組み込む
グローバル属性であるstyle属性を指定して、その値としてCSSを組み込む方法


▼@importでCSSに組み込む
@importの書式を使用することで、CSSの中で更に外部スタイルシートを読み込ませる事もできます。
最も簡単な方法は、次のように@importの後に外部スタイルシートのURLを文字列として指定する方法
文字列として指定するので、ダブルクォーテーションまたはシングルクォーテーションが必要です。


@import "style.css";


@import url(style.css);


URLの後には、link要素やstyle要素で指定可能なメディア型やメディアクエリを指定することもできる
@import "style.css" screen, print;




◯セレクタ
※重要
・属例セレクタと結合子の記号はしっかりと覚える
・擬似クラスの式「an+b」の指定方法をしっかりと覚える
・疑似要素の先頭のコロンはCSS3から2つになった




▼セレクタの種類と組み合わせのルール


▼タイプセレクタ
要素名をそのまま使って適用先を示すシンプルセレクタをタイプセレクタと言います。


▼ユニバーサルセレクタ
要素名の代わりに(*)を指定すると、すべての要素が適用対象となります。


▼クラスセレクタ


▼IDセレクタ


▼属性セレクタ　NEW!!
特定の属性が指定されている要素、またhあ特定の属性に特定の値が指定されている要素を適用対象として指定できるのが属性セレクタです。


img[src$=".jpg"] { border: 3px solid #f00 }




▼リンク関連の擬似クラス
ある要素が特定の状態にあるときなどに限定して適用対象とするのが擬似クラス
CSS3では23種類の擬似クラスが定義されていますが、はじめに使用頻度の高いリンク関連の擬似クラスを説明
・:link     リンク先をまだ見ていない
・:visited  リンク先を既に見た状態
・:hover    カーソルが上にある状態
・:active   マウスのボタン等が押されている状態


※注意
同時になる状態がある場合は、後に指定されたほうが有効になるので、
基本的に上記の順序で指定しなければならない！！




▼その他の擬似クラス


▼疑似要素
要素ではない部分(タグのつけられていない範囲)を適用対象とする
CSS3では次の4種類の疑似要素が定義されている


・::first-line     ブロックレベル要素の一行目
・::first-letter   ブロックレベル要素の1文字目
・::before         要素の直前にコンテンツを追加
・::after          要素の直後にコンテンツを追加




▼結合子
組み合わせたシンプルセレクタ同士を区切って使用する結合子には次の4種類がある


・空白文字  セレクタAの中に含まれているセレクタB
・>         セレクタAの直接の子要素であるセレクタB


・+         セレクタAの直後に現れるセレクタB
・~         セレクタAよりも後に現れるセレクタB




◯CSS適用の優先順位
※重要
・ユーザーエージェント・ユーザー・制作者の優先度は!importantで逆転する
・詳細度が最も高いのはstyle属性による指定
・セレクタの詳細度は、IDセレクタ・属性系セレクタ・要素系セレクタの3桁で示す


▼CSSの指定元による優先順位




▼!importantで優先順位を高くする


▼セレクタの詳細度による優先順位の計算方法












































































■Chapter6  CSS3の主な新機能
■====================================================================
◯色
※重要
・CSS3からは色の値が指定可能なすべての箇所でtransparentが使用可能
・不透明度は0.0~1.0までの単位をつけない数値で指定する
・hslは、hue(色相)・saturation(彩度)・lightness(明度)の意味


▼色を示す値：16進数


▼色を示す値：キーワード


▼色を示す値：rgb(),rgba()
rgb()という関数形式の書式を使用すると、RGBの値を10進数のまま指定可能


▼色を示す値：hsl(), hsla()
直感的に色を指定したり変更できるようにするために作られたもの




▼colorプロパティ
テキストの文字色を設定するプロパティです。




▼opacityプロパティ
要素の不透明度を設定するプロパティ




◯背景
※重要
・CSS3では複数の背景画像が指定できる
・CSS3では背景の表示領域を変更できる
・CSS3では背景画像のサイズが指定できる


▼ボックスの構造


▼長さを表す単位


▼background-colorプロパティ
ボックスの背景色を設定するプロパティ


▼background-imageプロパティ


▼background-clipプロパティ
背景をボックスのどの領域に表示させるのかを設定するプロパティ


▼background-repeatプロパティ
背景画像を縦または横に繰り返し表示させるかどうかを設定するプロパティ


▼background-sizeプロパティ
背景画像の表示サイズを設定するプロパティ
1つ目が幅　2つ目が高さ


▼background-originプロパティ
clipの画像版プロパティ的なもの


※注意
背景色も含めた背景の表示範囲を設定するbackground-clipプロパティの初期値は


▼background-positionプロパティ
背景画像を表示させる領域内での画像の配置位置を設定するプロパティ


▼background-attachmentプロパティ
背景画像を表示領域に固定して、ページの内容をスクロールしても動かないようにすることができる


▼backgroundプロパティ
背景関連のプロパティの値を纏めて指定できる


※注意
backgroundプロパティで指定されていない値は現状が維持されるのではなく初期値に戻されるので注意
backgroundプロパティの値もカンマで区切ることで、複数の背景画像のレイヤーを指定できます。
その際に、background-colorプロパティは一番下のレイヤー(書式上はカンマで区切られた一番右側の値)にしか指定できません




◯アニメーション
※重要
・transform関連プロパティでは、ボックスの回転・拡大縮小・移動などを行う
・トランジションは、値の切り替わりを滑らかに連続した動きで見せる機能
・アニメーションは、キーフレームでトランジションを連続実行させるようなもの


▼回転・拡大縮小・移動など
transformプロパティを使用すると、要素のボックスを回転させたり、
拡大縮小させたり、移動させることなどが出来ます。
しかもそれらは平面的な2次元空間だけでなく3次元空間デモ行える様になっているため、立体的な3D表現も可能




▼transformプロパティ
要素のボックスを回転・拡大縮小・移動・変形さえるプロパティ
値は関数形式になっており、空白文字で区切って必要なだけ指定できます。


▼transform-originプロパティ
transformプロパティの原点を指定するプロパティ


1つ目は横方向の位置
2つ目は縦方向の位置


transform-origin: top loft;
transform: translate(200px, 100px) scale(1.5, 1,5) rotate(45deg);




▼CSS3のトランジションとは
例えば、セレクタの:hoverを使って表示を変更すると、その表示は瞬時に切り替わります。
それを連続した動きで滑らかに変化させるのがCSS3のトランジション




▼transition-propertyプロパティ
「どのプロパティ」の値が変更されたときにトランジションを実行させるのかを設定するプロパティ


▼transition-durationプロパティ
どれだけの時間をかけて変化させるのかを設定する


▼transition-timing-functionプロパティ
トランジション機能で表示を変化させる際、最初から最後まで一定のスピードになっていると、
変化の種類によっては機械的で不自然な印象を与えてしまいます。
そこでゆっくりと変化を開始して徐々にスピードを上げ、だんだんとスピードを落としながら終了すると言ったように
様々なパターンで速度に変化をつけられるようになっています。
その指定を行うのがtransition-timing-functionプロパティです。


▼transition-delayプロパティ
トランジションの開始を遅らせるプロパティ


▼transitionプロパティ
トランジション関連のプロパティの値を纏めて指定できるプロパティ


▼CSS3のアニメーションとは
CSS3のアニメーションとは、ひとことで言ってしまえばトランジションを連続して実行させるようなもの


キーフレームを指定する


▼@keyframes
css3のアニメーションでは、決められた時間の中の度のタイミングでどの値がどう変化するのかをキーフレームと呼ばれる
書式で記入します。


@keyframes 名前 {
  0% {
     プロパティ: 値;
     プロパティ: 値;
     …
  }
  ?% {
     プロパティ: 値;
     プロパティ: 値;
     …
  }
  ?% {
     プロパティ: 値;
     プロパティ: 値;
     …
  }
  100% {
     プロパティ: 値;
     プロパティ: 値;
     …
  }




}




※補足説明
キーフレームの「0%」は「from」、「100%」は「to」と書くことも出来ます。


▼animation-nameプロパティ
アニメーションを実行させるためには、キーフレームを名前で指定し、
アニメーションの再生時間を指定する必要がアリます。animation-nameプロパティは、
キーフレームを名前で指定して実行させるためのプロパティ


▼animation-durationプロパティ
アニメーションの再生時間を設定するプロパティ
transition-durationプロパティと同様に値には時間を設定します。初期値は0sです。




▼animation-timing-functionプロパティ
アニメーションの再生速度の変化パターンを設定するのがanimation-timing-functionプロパティ




▼animation-delayプロパティ
アニメーションの再生を遅らせるプロパティ


▼animation-iteration-countプロパティ
アニメーションを何回繰り返して再生させるのかを設定するプロパティ
初期値は１
inifiniteを指定すると、止めるかウィンドウを閉じるまで再生を繰り返します。




▼animation-directionプロパティ
再生の際に逆再生させるかどうか、または繰り返し再生する中で度のタイミングで逆再生させるのかを設定するプロパティ
初期値はnormalです。




▼animation-paly-stateプロパティ
アニメーションの再生を一時停止させる際に使用するプロパティ
pauseを指定すると一時停止し、runningを指定すると再生が開始されます。


初期値はrunningです。




▼animation-fill-modeプロパティ
animation-delayプロパティによって再生の開始が遅延されている間の表示、及び再生終了後の表示を設定するプロパティ
初期値はnone


▼animationプロパティ
アニメーション関連のプロパティを纏めて指定できるプロパティ




◯マルチカラムとフレキシブルボックス
※重要
・CSS3のマルチカラムレイアウトはボックスの内部を複数の段に分割する
・columnsプロパティで段数を指定するだけで段組みになる。
・display: flex;を指定すると、その子要素は左から順に横に並ぶ


▼マルチカラムレイアウト
複数のボックスを横に並べるタイプのレイアウトではなく、
１つのボックスの内部を複数の段に分割するタイプのレイアウトです。


▼column-countプロパティ
何段組するのかを設定するプロパティ
値には段数を１以上の整数で指定しまうす。
初期値はautoです。


body { column-count: 3; }


▼column-width
段の幅を設定するプロパティ
初期値はauto


▼columnsプロパティ
column-countプロパティとcolumn-widthプロパティを纏めて指定できるプロパティ




▼column-gapプロパティ
段と段の間隔を指定する
初期値はnormal 1em




▼column-ruleプロパティ
段と段の感化kの中央にはボックスのボーダーと同様の線を表示させることが出来ます。
その線種・色・太さを個別に設定するのが次の３つのプロパティ
・column-rule-styleプロパティ
・column-rule-colorプロパティ
・column-rule-widthプロパティ


纏めて設定できるのがcolumn-ruleプロパティです。




▼column-spanプロパティ
指定された要素を段の中におさめて表示させるのではなく、
段組が設定されているボックスの幅いっぱいに(すべての段をまたいで)表示させるプロパティです。
値にはallとnoneが指定でき、初期値はnoneです。


▼フレキシブルボックスレイアウト




◯その他の新機能
※重要
・border-radiusの角丸の値は、角を1/4円に見立てたときの半径を指定する
・box-shadowとtext-shadowの影の指定方法はほぼおなじ
・グラデーション指定の基本形は、方向または中心位置と色を２色指定すればOK


▼border-radiusプロパティ
ボックスの角を丸くするプロパティ


▼box-shadowプロパティ
ボックスに影を表示させるプロパティ


▼text-shadowプロパティ
テキストに影を表示させるプロパティ


▼直線上のグラデーション
CSSの書式で画像が指定可能なところであれば、url()の代わりにlinear-gradient()またはradial-gradient()という関数を使用して
グラデーションを表示させることができる


background: linear-gradient(#ddd, #333);


▼放射状のグラデーション














































■Chapter7  CSSの各種プロパティと値
■====================================================================
◯フォント
※重要
・Webフォントを使用するには、@font-face{} の書式を指定する
・CSS3では、font-variantは関連プロパティの値を一括指定するプロパティ
・fontプロパティは、値の指定順序に注意する


▼Webフォント
@font-faceという書式を使用してWeb上にあるフォントを指定することで、そのフォントがインストールされていない
環境でもそのフォントを表示させられるようになります。




▼font-familyプロパティ
フォントの種類を設定するプロパティ
フォントはより前に(左側に)指定されているものが優先して適用されますので、キーワードは最後に指定するように
p{
   font-family: "メイリオ", "ヒラギノ角ゴ pro W3", Helvetica, sans-serif;


}


▼font-sizeプロパティ
フォントサイズを設定することができる
初期値はmidiumです。


▼font-weightプロパティ
太さの異なる書体を選択するためのプロパティ
初期値はnormal
400が標準の太さ




▼font-styleプロパティ
同じフォントファミリーの中のイタリックまたは斜体の書体を選択するためのプロパティ


・italic   イタリック体専用にデザインされたフォントで表示。ない場合「oblique」と同様
・oblique  斜体で表示。ない場合標準のフォントを斜めに変換して表示
・normal   イタリック体や斜体ではない標準のフォントで表示


▼font-variantプロパティ


▼fontプロパティ
フォント関連プロパティの値を纏めて指定できるプロパティ


◯テキスト
※重要
・CSS3からは、下線・上線・取消線の色や線種が指定できる
・word-breakプロパティは、行の折り返しに関する設定をする
・hyphensプロパティは、ハイフネーションに関する設定をする


▼text-decoration関連のプロパティ


▼word-breakプロパティ
行の折り返しに関する設定


▼hyphensプロパティ
ハイフネーションの設定を行うプロパティ


▼white-spaceプロパティ
「連続する空白文字を１つの半角スペースに変換するかどうか」と「自動的な行の繰り返しを行うかどうか」を制御する


▼text-alignプロパティ
ブロックレベル要素に指定し、その内容の行揃えを設定


▼vertical-alignプロパティ
インライン要素の縦方向の位置を設定する


▼line-heightプロパティ
行の高さを設定するプロパティ


▼text-indentプロパティ
ブロックレベル要素の１行目のインデントを設定する


▼letter-spacingプロパティ
文字間隔を設定するプロパティ


▼word-spacingプロパティ
単語と単語の間隔を設定するプロパティ


▼text-transformプロパティ
アルファベットの大文字小文字を変換して表示させるプロパティ


▼directionプロパティ
文字表記の方向を設定する


ltr：左から右
rtl：右から左


▼unicode-bidiプロパティ
文字表記の方向に関する指示を組み込んだり上書きすることのできるプロパティ
よくわからない。。。




◯ボックス
※重要
・幅と高さの適用される領域は、box-sizingプロパティで設定する
・clearプロパティはブロックレベルの要素に指定する
・displayプロパティは、テーブル関連・ルビ関連の表示形式も指定できる


▼margin関連プロパティ


▼padding関連プロパティ
HTML5プロフェッショナル認定Level1 マイナビ
https://tutttuwi.github.io/posts/2017_04_html5プロフェッショナル認定_マイナビ/
Author
Tomoaki Tsutsui
Published at
2017-04-01
License
CC BY-NC-SA 4.0
SEの基本
ORACLE MASTER Oracle Database12c DBA Bronze
© 2026 Tomoaki Tsutsui. All Rights Reserved. / RSS / Sitemap