試験直前チェック特集HTMLとCSS編

シェアする

スポンサーリンク

ウェブデザイン技能検定試験学科HTMLとCSS編

試験日も近づいてきましたが、やはり学科の勉強が中心になっているかと思います。
HTML、CSSの範囲をどういうふうに勉強すればいいのかリクエストをいただいたので、この範囲に特化してまとめてみました。

HTML

HTMLのバージョン

HTML4.01、XHTML1.0、HTML5、この3つの特徴、記述ルールなどを押さえておきます。
HTML文書には先頭にDOCTYPE宣言(文書型宣言)といってどのバージョンのHTML言語で記述するのか明示する決まりになっています。
HTML4.01とXHTML1.0にはさらにStrict型、Transitional型、(Frameset型)があり、Strict型が仕様に従って厳密に記述することが求められている文書型です。

まずは3つのバージョンのDOCTYPE宣言の記述が理解できるようにします。
例えばHTML5のDOCTYPE宣言は<!DOCTYPE html>ですね。

記述ルール

いちばん厳しいのはXHTMLです。

  • 要素、属性の記述には小文字を使用する
  • 終了タグは省略不可
  • 属性の値は必ず引用符で括る
  • 視覚的な指示はCSSで行う

HTML4.01は緩いので大文字が混在していても終了タグが抜けていても文法的にはエラーになりません。HTML5はHTML4.01、XHTML1.0どちらの書き方でもよい、となっているので、XHTMLのルールを押さえておけば対応できると思います。

要素と属性

HTML4.01 とXHTML1.0は要素をそのタイプによってブロックレベル要素とインライン要素に分類します。ブロックレベル要素は親要素の幅いっぱいに配置され、上下に改行が入るという特徴があり、インライン要素は行内の一部として表示される要素になります。

検定ではどちらのタイプかを問う問題が過去に出題されています。主な要素の分類を押さえておきましょう。

ブロックレベル要素・・p、h1、h2、h3、h4、h5、h6、ul、ol、dl、blockquote、table、address、divなど

インライン要素・・a、em、strong、img、span、smallなど

HTML5ではブロック・インラインの分類が廃止され、コンテンツカテゴリが採用されています。主に7つのカテゴリに分類されますが、相互に重複しているという特徴があります。どのカテゴリに属するかという出題はないようですが、ざっくりとみておきましょう。

  • メタデータ・コンテンツ・・主にhead内に記述される文書のmeta情報を表す要素(meta、script、style、link、titleなど)
  • フロー・コンテンツ・・コンテンツとして表示されるほとんどの要素
  • セクショニング・コンテンツ・・セクション(章・節)を構成する要素(section、article、aside、nav)
  • ヘッディング・コンテンツ・・見出しとなる要素(h1~h6)
  • フレージング・コンテンツ・・段落内で使用するような要素(従来のインラインなど)
  • エンベッディング・コンテンツ・・画像・音声・動画などの外部ファイルを埋め込むための要素(img、iframe、audio、video、canvas、svgなど)
  • インタラクティブ・コンテンツ・・ユーザーが操作できる要素(a、input、button、textareaなど)

HTML5には新しく追加された要素が多くあります。昨年正式に勧告されたこともあり出題が増えている傾向にあります。追加されたおもな要素は覚えておきましょう。特にセクショニング・コンテンツの4つとheader、footer、audio、videoなど新しく追加された要素は要チェックです。

属性に関する出題もあります。すべてを細かく覚えるのは大変ですが、サイトを作ったことがあればそれほど迷わないのではないかと思いますが・・

過去にこんな出題が・・(26年度2回)
HTML5において、video要素の属性でないものはどれか。

  • preload
  • autoplay
  • loop
  • rewind

正解は4です。

新しく追加された要素だけではなく、意味の変わった要素も覚えておく必要があります。

  • strong・・「より強い強調」から「重要なテキスト」に
  • em・・・・「強調」から「アクセントをつけて強調するテキスト」に
  • b・・・・「太字」から「キーワードや固有名詞など、他と区別したいテキスト」に
  • i・・・・「斜体」から「代替音声や気分など、質が異なるテキスト」に
  • small・・「文字を小さく」から「注釈・細目、補足的なコメント」に

使い方が変わった要素もいくつかあります。

a・・name属性は廃止となった。target属性が非推奨ではなくなった。divなどのブロック領域に対してリンクを貼ることができるようになった。

hr・・水平線として使われていたが、セクション内の段落で話題が変わる所に使用するようになった。

※alt属性に関してはいろんな形で出題されているのであわせて勉強しておきましょう。

廃止された要素も・・・basefont、big、center、font、strikeなど
もともとあまり使っていない要素ばかりですね。
table要素のsummary属性も使わない方がよいとされています。

CSS

サイト構築には必須なのでさまざまな角度から出題されています。バージョンもCSS2.0とCSS3の両方の知識が必要です。
記述方法として大きく分けて3つ、インライン、内部、外部があります。一般的には外部スタイルシートでの出題になります。
<head>内での記述もチェックポイント。最近メディアタイプを問う出題がありました。CSS3のメディアクエリも内容とともに押さえておくべき。

セレクタの種類

タイプセレクタ・・・ 要素名

ユニバーサルセレクタ・・・*(全称セレクタ)すべての要素

クラスセレクタ・・・.class(先頭を「.」から記述する 複数の要素に適用できる)

IDセレクタ・・・#id(先頭を「#」から記述する 1つの要素を特定する)

属性セレクタ・・・[属性]要素の属性によってスタイルを適用
[属性名:”値”]属性とその値が一致する要素にのみスタイルを適用

複数セレクタ・・・複数の要素に同じスタイルをまとめて指定する場合はセレクタを半角カンマで区切って記述する

子孫セレクタ・・・特定の要素の子要素または子孫の要素にスタイルを適用させる。半角スペースを入れて記述する

子セレクタ(直下セレクタ)・・・特定の要素の直下にある要素に適用させる要素名との間に「>」を入れる

疑似クラス・・・リンク疑似クラスの:link、:visited、:hover、:activeや構造疑似クラスの:first-child、:last-child、:first-of-type、:last-of-typeなども。(他にもまだあるのでさっと見ておくとよいかもしれません)

プロパティとRGBカラーコード

プロパティを問う問題、過去問題から見ると、

  • 要素のボックス全体を半透明にするCSSプロパティはどれか。
  • CSSのvisibilityプロパティを用いて、要素を非表示にしたい。その場合に指定する値として適切なものはどれか。

などけっこう細かいところからも出題されていますね。

カラーコードに関する問題もよく出ています。
基本の白#ffffff、黒#000000、赤#ff0000、青#0000ff、黄#ffff00、などよく使うシンプルなものは覚えておきます。
CSSでの記述形式では、カラーコードだけではなくCSS3のrgba()の書き方も覚えておくと役立つかもしれません。たとえばrgba(255,255,255,0.5)は白の50%半透明の指定になります。

今後CSS3の出題が増えるのではないかと予想されます。新しいプロパティもひととおり押さえておきましょう。主なものとしては、text-shadow、box-shadow border-radius linear-gradient opacity など。他にもたくさんあります。ひょっとして変形やアニメーションのプロパティなども今後は登場するかもしれませんね。

正しい記述を選択するもの、スタイルの優先度を問うものなどは、実際に記述に慣れていれば問題ないと思いますが、優先度でたまに引っかかる方がいます。idとclassはどちらが優先?など基本的なところは・・・大丈夫ですね。

過去問題から・・

「こんにちは」の文字は何色になるでしょうか。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル文書</title>
<style>
body{color:black;}
#top{color:red;}
.sample{color:green;}
p{color:blue;}
</style>
</head>
<body>
<p id="top" class="sample">こんにちは</p>
</body>
</html>
スポンサーリンク

シェアする

フォローする