HTML, CSS

kyokot 2023年11月10日カード68 いいね1

単語カード

blockquote要素についての説明として、適切なものを以下より1つ選択しなさい。
1 引用文として定義するためのものである。
2 作成者を定義するためものである。
3 インデントを指定するためのものである。
4 インライン要素である

1 blockquoteタグとは、そのタグで囲った箇所が【引用・転載】であることを示すタグです。
CSS における、メディアタイプとして、不適切なものを以下より1つ選択しなさい。
1 all
2 mobile
3 projection
4 screen

2
W3Cにおける HTML 4.01 Strict で定義されている要素はどれか。適切なものを以下より1つ選択しなさい。
1 APPLET
2 DIV
3 FONT
4 U

2 HTML 4.0 Strict の改訂版で、厳密型とも呼ばれます。 HTML 3.2, HTML 4.01 Transitionalにある、フォントや色といった、見た目に関する要素や属性がありません。また、NOFRAMES要素やtarget属性など、フレームに関する定義もありません。

この文書型では、文書の構造（あるいは構造上の機能）のみをマークアップし、表示などプレゼンテーションに関する情報は、スタイルシートに依存することになります。
短いセンテンスをインラインで引用する場合に使用する要素はどれか。適切なものを以下より1つ選択しなさい。
1 quote
2 blockquote
3 cite
4 q

q <q> は HTML の要素で、中に含まれるテキストが短いインラインの引用であることを示します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 <blockquote> 要素を使用してください。
CSSにおけるコード記述として、適切なものを以下より1つ選択しなさい。
1 @important url("sample.css")print;
2 @import url("sample.css")print;
3 @import src("sample.css")print;
4 @important src("sample.css")print;

2 cssから別のcssファイルを読み込む
@import url("CSSファイルのパス")
CSSにおいて次のコード記述があった場合の説明として、適切なものを以下より1つ選択しなさい。
border-color:gray navy

1 記述が誤っているので指定が反映されない。
2 左のボーダー色がgray、右のボーダー色がnavy
3 上のボーダー色がgray、右のボーダー色がnavy
4 上下のボーダー色がgray、左右のボーダー色がnavy

4
HTMLを記述したテキストファイル（ファイル名：sample.html）をウェブサーバに保存し、ウェブブラウザでアクセスしたところHTMLのソースコードがそのまま表示された。この場合に考えるられる原因について、適切なものを以下より1つ選択しなさい。
1 ウェブサーバの送信するContent-Typeが"text/plain"であった。
2 ウェブサーバの送信するContent-Typeが"text/html"であった。
3 ファイルパーミッションに実行権限が付加されていた。
4 DOCTYPE宣言に"HTML SOURCE"と記述した。

1 text/plain プレーンテキストデータ
text/html HTMLデータ
text/css CSSデータ
text/javascript JavaScriptデータ
application/json JSON形式のデータ
application/octet-stream 任意のバイナリデータ（EXEなどの実行ファイル）
JIS HTMLとは、(JIS X 4156 )のことである。

1
XHTML文書で先頭に記述するものとして、適切なものを以下より1つ選択しなさい。
1 XML宣言
2 DOCTYPE宣言
3 XHTML宣言
4 HTML要素
\

1
XHTML文書で推奨されるメディアタイプとして、適切なものを以下より1つ選択しなさい。

1 application/xhtml+xml
2 text/html
3 application/xml
4 text/xml

1 MIMEタイプとは
HTMLにおけるmeta要素の説明として、最も不適切なものを以下より1つ選択しなさい。

1 xmlns属性を使用して名前空間を指定することができる。
2 http-equiv属性とcontent属性を使用してMIMEタイプを指定することができる。
3 name属性とcontent属性を使用して説明文を指定することができる。
4 name属性とcontent属性を使用してキーワードを指定することができる。

１
CSSのコメントの記述として、適切なものを以下より1つ選択しなさい。
1 h1 {color: white;} /* 文字色を白に指定 */
p {color: gray;} /* 文字色をグレーに指定 */
2 h1 {color: white;} 
p {color: gray;} 
3 h1 {color: white;} /* 文字色を /* 白 */ に指定 */
p {color: gray;} /* 文字色を /* グレー */ に指定 */
4 h1 {color; white:} //文字色を白に指定
p {color; gray:} //文字色をグレーに指定

1
次のHTMLの記述において、図のように表示させるための適切なCSSの記述として、適切なものを以下より1つ選択しなさい。

<body>
　<div id="box1">box1 の内容</div>
　<div id="box2">box2 の内容</div>
　<div id="box3">box3 の内容</div>
</body>
1 #box1 { width: 200px; height: 300px; background-color: #FFFFCC; float: left; }
#box2 { width: 500px; height: 300px; background-color: #00FF33; margin-left: 200px; }
#box3 { width: 700px; height: 100px; background-color: #00FFFF; }
2 #box1 { width: 500px; height: 300px; background-color: #FFFFCC; float: left; }
#box2 { width: 200px; height: 300px; background-color: #00FF33; margin-left: 200px; }
#box3 { width: 700px; height: 100px; background-color: #00FFFF; }
3 #box1 { width: 200px; height: 300px; background-color: #FFFFCC; float: left; }
#box2 { width: 500px; height: 300px; background-color: #00FF33; }
#box3 { width: 700px; height: 100px; background-color: #00FFFF; }
4 #box1 { width: 200px; height: 300px; background-color: #FFFFCC; float: right; }
#box2 { width: 500px; height: 300px; background-color: #00FF33; margin-left: 200px; }
#box3 { width: 700px; height: 100px; background-color: #00FFFF; }

1
次のMIME Typeに関する記述として、不適切なものを以下より1つ選択しなさい。
1 XHTMLのMIME Typeはapplication/xhtml+xmlである。
2 RSSのMIME Typeはapplication/rss+xhtmlである。
3 AtomのMIME Typeはapplication/atom+xmlである。
4 RDFのMIME Typeはapplication/rdf+xmlである。

２
次の記述中の(　　)に当てはまる語句として、適切なものを以下より1つ選択しなさい。

ISO-HTML（ISO/IEC 15445:2000）は、W3CのHTML （　　）に基づいている。
1 4.01
2 3.2
3 1.0
4 2.0

1
CSSの説明において、(　　)に当てはまる語句として、適切なものを以下より1つ選択しなさい。

最も優先度が高いスタイル指定の方法は、（　　　）である。
1 ブラウザのデフォルト指定
2 style属性による指定
3 style要素による指定
4 link要素による指定

2
次のHTMLの記述の一部において、不適切なものを以下より1つ選択しなさい。

<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//JA">
<HTML LANG="JA">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=utf-8">
<TITLE>サンプル</TITLE>
<LINK HREF="sample.css" REL="stylesheet" TYPE="text/css">
</HEAD>
1 TITLE要素に日本語が使用されている。
2 DTDがHTML//JAになっている。
3 LANG属性がJAになっている。
4 大文字が使用されている。

2
次のHTMLの記述において、図のように表示させるための適切なCSSの記述を以下より1つ選択しなさい。
1 #container {width: 400px; margin-right: auto; margin-left: auto; height: 400px; background: #333333; position: relative; }
#container #box1 {background: #cccccc; height: 400px; width: 400px; position: absolute; right: 0px; top: 0px; }
2 #container {width: 400px; margin-right: auto; margin-left: auto; height: 400px; background: #333333; position: relative; } #container #box1 {background: #cccccc; height: 200px; width: 200px; position: absolute; right: 0px; top: 200px; }
3 #container {width: 400px; margin-right: auto; margin-left: auto; height: 400px; background: #cccccc; position: relative; }
#container #box1 {background: #333333; height: 200px; width: 200px; position: absolute; left: 0px; bottom: 0px; }
4 #container {width: 400px; margin-right: auto; margin-left: auto; height: 400px; background: #333333; position: relative; }
#container #box1 {background: #cccccc; height: 200px; width: 200px; position: absolute; left: 0px; bottom: 0px; }

4
次のHTMLの記述において、図のように表示させるための適切なCSSの記述を以下より1つ選択しなさい。ただし、div要素のid属性で指定されたbox1は、body要素の中央に配置されているものとする。

<body>
<div id="box1">box1 の内容
<div id="box2">box2 の内容</div>
</div>
</body>
1 #box1 {
width: 400px;
height: 400px;
margin: 0px auto;
padding: 0px;
background-color: #FFFFCC;
position: relative;
}
#box2 {
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
background-color: #00FF33;
position: absolute;
left: 200px;
top: 200px;
}
2 #box1 {
width: 400px;
height: 400px;
margin: 0px auto;
padding: 0px;
background-color: #FFFFCC;
position: absolute;
}
#box2 {
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
background-color: #00FF33;
position: absolute;
left: 200px;
top: 200px;
}
3 #box1 {
width: 400px;
height: 400px;
margin: 0px auto;
padding: 0px;
background-color: #FFFFCC;
position: relative;
left: 200px;
top: 200px;
}
#box2 {
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
background-color: #00FF33;
position: absolute;
}
4 #box1 {
width: 400px;
height: 400px;
margin: 0px;
padding: 0px;
background-color: #FFFFCC;
position: absolute;
}
#box2 {
width: 200px;
height: 200px;
margin: 0px;
padding: 0px;
background-color: #00FF33;
position: absolute;
left: 200px;
top: 200px;
}

1 absolute と relative
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。

文章の構造化とは、文章に要素を用いて見出しや段落などの意味づけを行うことである。

1
ユーザーに排他的な選択を行わせるものはどれか。適切なものを以下より1つ選択しなさい。
1 リセットボタン
2 チェックボックス
3 ラジオボタン
4 入力ボックス

3
HTML 4.01 Strictの記述において、適切なものを以下より1つ選択しなさい。

選択肢がない
引用に関する要素ではないものはどれか。適切なものを以下より1つ選択しなさい。
1 blockquote
2 q
3 p
4 cite

3 <q> citeとは
XHTMLのMIMEタイプはどれか。適切なものを以下より1つ選択しなさい。
1 A: text/html
2 A: html/xml
3 A: application/xhtml
4 A: application/xhtml+xml

4
ブロックレベルの引用に使用する要素はどれか。適切なものを以下より1つ選択しなさい。
1 blockquote
2 quote
3 q
4 inlinequote

1
CSSのborderプロパティで、破線を表す値はどれか。適切なものを以下より1つ選択しなさい。
1 solid
2 none
3 dashed
4 dotted

3
CSSファイルの中に、別のCSSファイルのスタイルを読み込むことができるものはどれか。適切なものを以下より1つ選択しなさい。
1 @media
2 @import
3 a
4 link

2
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。

HTML5では新たにウェブアプリケーション開発のためのAPIが提供されている。

1
CSS2.1に含まれるプロパティとして、適切なものを以下より1つ選択しなさい。
1 text-shadow
2 border-radius
3 background-color
4 gradient

3
CSS2.1に含まれないプロパティとして、適切なものを以下より1つ選択しなさい。
1 margin
2 padding
3 alpha
4 color

3
次のHTMLコードとCSSコードが適用された場合、文章はどのように表示されるか。適切なものを1つ選択しなさい。

p {color: red; }
# {color: blue; }
p {color: green; }

1 ソースコードという言葉だけ青くなり、他は赤くなる。
2 文章全体が緑色になる。
3 文章全体が赤くなる。
4 文章全体が青くなる。

HTMLがないんだけど
HTML5 で新しく追加された要素はどれか。適切なものを以下より1つ選択しなさい。

1 div
2 h6
3 blockquote
4 embed

4 embedとは
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。

HTML5ではimg要素のalt属性はどのような場合でも記述しなくてよい。

2
link要素の中に以下のような属性の記述があった場合、最も関連が深い用語を以下より1つ選択しなさい。

media="screen and (min-width:800px)"

1 メディアタイプ指定
2 メディアクエリ
3 メディア属性セレクタ
4 代替スタイルシート

2
CSS2.1に含まれないプロパティはどれか。適切なものを以下より1つ選択しなさい。

1 background-image
2 display
3 zoom
4 height

3
HTML5に含まれない要素はどれか。適切なものを以下より1つ選択しなさい。
1 navi
2 section
3 video
4 article

1 articleとは
CSS2.1に含まれないプロパティはどれか。適切なものを以下より1つ選択しなさい。
1 border-radius
2 display
3 color
4 height

1
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。

HTML5の文書には、SVG要素を直接含むことができる。

1
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。

HTML5では、装飾のための画像のalt属性は省略しなければならない。

1
2

2
HTML5において追加された要素はどれか。適切なものを以下より1つ選択しなさい。
1 tt
2 body
3 figure
4 basefont

3
「拡張子が『.png』である画像を表示させるimg要素」を適用対象とするCSSセレクタとして、適切なものを以下より1つ選択しなさい。
1 img[src~=”.png”]
2 img[src$=”.png”]
3 img[src^=”.png”]
4 img[src|=”.png”]

3
メディアクエリにおいて、スマートフォンやタブレットなどの画面が縦向き(画面の幅よりも高さの方が長くなる向き) のときに適用させるための「メディア特性と値の組合せ」として、適切なものを以下より1つ選択しなさい。
1 direction:portrait
2 direction: landscape
3 orientation: portrait
4 orientation: landscape

3
次のHTML内のul要素を、水平方向に並べて表示するためのCSSの指定として、適切なものを以下より1つ選択しなさい。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title> ウェブデザイン技能検定</title>
</head>
<body>
<h1> ウェブデザイン技能検定</h1>
<ul id=”menu”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”skills.html”>Skills</a></li>
<li><a href=”faq.html”>FAQ</a></li>
<li><a href=”ablout.html”>About</a></li>
</ul>
</body>
</html>
1 #menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
}
2 #menu ul li {
display: block;
}
#menu ul li a {
display: inline;
float: left;
}
3 #menu li {
display: inline;
}
ul#menu li a {
display: block;
float: left;
}
4 ul#menu {
display: block;
}
ul#menu li a {
float: left;
}

3
ウェブデザインにおけるCSSの使用に関して、最も適切なものを以下より1つ選択しなさい。
1 デバイスにより違うレイアウトとなるようなCSSの使用法は推奨されない。
2 表示用とは別に印刷用のCSSを指定することは推奨されない。
3 スマートフォンでの表示用にピクセル指定で固定幅レイアウトとなるようなCSSの使用法は推奨されない。
4 いかなる場合でも背景色と文字色のコントラストを高く保つことは推奨されない。

4
HTML5において使用可能である要素はどれか。適切なものを以下より1つ選択しなさい。
1 u
2 tt
3 small
4 acronym

3 acronymとは
HTML5でウェブ標準に準拠したウェブページを作成する場合、使用を避けるべき要素はどれか。適切なものを以下より1つ選択しなさい。
1 hr
2 div
3 big
4 sup

3
HTML5において、廃止されていない要素はどれか、適切なものを以下より1つ選択しなさい。
1 center
2 font
3 strong
4 frame

3
HTML5において、フレージング・コンテンツではないものはどれか、適切なものを以下より1つ選択しなさい。
1 a
2 b
3 p
4 q

3 フレージングコンテンツとは
HTMLにおいて、W3C Superseded Recommendationに相当しないものはどれか。以下より1つ選択しなさい。
1 HTML3.2
2 HTML4.01
3 HTML5
4 HTML5.2

4
HTMLにおいて、MathML やSVG 要素を用いてドキュメント内にグラフィックスを表現できるものはどれか、適切なものを以下より1つ選択しなさい。
1 HTML2.0
2 HTML3.2
3 HTML4.01
4 HTML5

4
HTML5の説明において、適切でないものはどれか、以下より１つ選択しなさい。
1 終了タグが省略可能なものがある
2 a要素にはdiv要素を含めることができる
3 dl要素の内部にdiv要素を使用できる
4 table要素のsummary属性を使用できる

4
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。 aside要素は、広告などの記事の掲載にも適している

1
以下の文について、正しいと思われる場合は1を、誤っていると思われる場合は2を選択しなさい。 HTML5.1において、manifest属性は廃止された属性である

1
HTML5.2において、img 要素のalt 属性に関する説明で適切なものはどれか、以下より１つ選択しなさい。
1 見た目をテキストに置き換えたものである
2 画像の見た目を説明したものである
3 機能をテキストに置き換えたものである
4 表現をテキストに置き換えたものである

3
次のHTMLの記述を説明するもので適切でないものはどれか。以下より1つ選択しなさい。
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" strokewidth="
5" ></rect>

1 四角形を表示するソースである
2 一辺が30ｐｘの正方形である
3 四角形は黒で塗り潰されている
4 黒い枠がついている

3 HTML rectタグとは
次のHTMLの記述を説明するもので適切でないものはどれか。以下より1つ選択しなさい。
<circle cx=""50"" cy=""50"" r=""30"" stroke=""black"" fill=""transparent"" stroke-width=""5"" ></circle>
1 正円を表示するソースである
2 直径が50ｐｘの正円である
3 塗り色は透明である
4 黒い枠がついている

2
次のHTMLの記述を説明するもので適切でないものはどれか。以下より1つ選択しなさい。
<video controls>
<source src=""my_movie.mp4"" type=""video/mp4"">
<source src=""my_movie.webm"" type=""video/webm"">
</video>
1 動画を表示するソースである
2 動画再生のためのインタフェース付きで表示される
3 MP4の動画が再生できない場合WebMの動画を再生する
4 control属性はvideo要素にしか利用できない

4
SVGファイルのMIMEタイプはどれか、適切なものを以下より１つ選択しなさい。

1 text/svg+xml
2 text/svg
3 image/svg+xml
4 image/svg

3
CSSの値において、inheritを説明するもので、適切なものはどれか。以下より１つ選択しなさい。
1 親要素の値を継承することを指定するものである
2 親要素の値を継承しないことを指定するものである
3 親要素の継承がない場合にのみ使用するものである
4 親要素の継承がない場合は適用されない

1 css inheritとは
CSSの記述において、疑似要素であるものはどれか、適切なものを以下より１つ選択しなさい。
1 :hover
2 ::before
3 :first-child
4 :focus

2 css 疑似要素とは
CSSの記述において、疑似クラスnth-child( )の説明で適切ではないものはどれか、以下より１つ選択しなさい。
1 引数にoddを指定すると奇数番目の要素を選択する
2 引数にevenを指定すると偶数番目の要素を選択する
3 ()の中に、要素の位置を選択する引数を指定する
4 ()の中に指定する引数に数値は使用できない

4
CSSの記述において、フォントの指定に関する説明で、適切なものはどれか、いかより１つ選択しなさい。
1 左に記述されたフォントから順番に適用される
2 フォント名の場合はダブルクォーテーションで囲まない
3 総称ファミリ名の場合はダブルクォーテーションで囲む
4 日本語のフォント名は使用できない

1
CSSの記述において、verticalalignプロパティの初期値はどれか、適切なものを１つ選択しなさい。
1 top
2 baseline
3 bottom
4 text-bottom

2
CSSの記述において、表示された文字に打消し線を表示したい場合の、text-decorationプロパティの値はどれか、適切なものを１つ選択しなさい
1 none
2 underline
3 overline
4 line-through

4
CSSの記述において、単位vwが意味するものはどれか、適切なものを以下より１つ選択しなさい。
1 viewport width
2 vertical width
3 virtual width
4 view width

1
CSSの記述において、box-sizing プロパティのデフォルトの値はどれか、適切なものを以下より１つ選択しなさい。

1 content
2 border
3 content-box
4 border-box

3
CSSの次の記述において、表示幅400px 以下の端末と、表示幅900px 以上の端末で読み込むCSS ファイルを切り替えるものはどれか、適切なものを１つ選択しなさい。
1
<link rel="stylesheet" href="sp.css" type="text/css" media="screen and (max-width: 900px)">
<link rel="stylesheet" href="common.css" type="text/css" media="screen and (min-width:400px)">
2
<link rel="stylesheet" href="sp.css" type="text/css" media="screen and (max-width: 300px)">
　<link rel="stylesheet" href="common.css" type="text/css" media="screen and (min-width:1000px)">
3
<link rel="stylesheet" href="sp.css" type="text/css" media="screen and (min-width: 400px)">
　<link rel="stylesheet" href="common.css" type="text/css" media="screen and (max-width:900px)">
4
<link rel="stylesheet" href="sp.css" type="text/css" media="screen and (max-width: 400px)">
<link rel="stylesheet" href="common.css" type="text/css" media="screen and (min-width:900px)">

4
CSSの次の記述において、ビューポートの幅が1100px の場合に適用されるスタイルはどの記述によるものか、適切なものを１つ選択しなさい。
1 min-width:1000px
2 min-width:1200px
3 min-width:1400px
4 min-width:1600px

1