今回はHTML・CSS、Webの基礎知識のミニクイズを6問ご用意しました！頭の体操としてお気軽に挑戦してみてください。
正解がわからなかったトピックは、解説記事をサクッとチェックしてみてくださいね。
Q1. Webサイトで使われるファイル
あなたが担当しているWebサイトが「静的に作られている」場合、編集しなければならないのはどのファイルでしょうか？
A. CMS（管理画面）
B. HTML / CSS / 画像ファイルなど
C. データベース情報
・
・
・
正解は
B. HTML / CSS / 画像ファイルなど
管理画面（CMS）がない静的サイトでは、WebサイトはHTMLやCSS、画像ファイルなどの静的ファイルで構成されています。更新作業では、それらのファイルを直接編集する必要があり、「どこの、なにを編集すればよいのか」をまず確認することが大切です。
Q2. URLの構造
URLに「?q=shirts」のような文字列があるとき、「q=shirts」は何の部分でしょうか？
A. ポート番号
B. クエリーパラメーター
C. アンカー
・
・
・
正解は
B. クエリーパラメーター
「?」以降の部分は“クエリーパラメーター”で、「q=shirt」などの形式でブラウザーからWebサーバーになんらかのデータ（例：検索語）を送るために使われます。
Q3. HTMLの基本構造と文法
<img>や<input>タグのように、終了タグがないものは何と呼ばれるでしょうか？
A. 空要素
B. 親要素
C. 属性
・
・
・
正解は
A. 空要素
「終了タグがなく、コンテンツもないタグ」は「空要素」といいます。他にも<link>タグや、<meta>タグがあります。
Q4.開発ツール
開発ツールを使うと、表示されているWebページのHTML構造やCSSを確認できますが、これがWebページの編集に便利なのはなぜでしょうか？
A. 破壊的に編集できるから
B. 編集すべき要素の場所を的確に探し出せるから
C. サイトを保存できるから
・
・
・
正解は
B. 編集すべき要素の場所を的確に探し出せるから
開発ツールを使えば、編集すべきHTMLの場所を的確に、素早く見つけ出すことができます。HTML/CSSのソースコードや構成ファイルだけでなく、JavaScriptプログラムで発生するエラーなども表示されます。
Q5.画像の差し替え
開発ツールで、<img>タグのsrc属性に指定されているパスに、マウスポインタをホバーする（重ねる）と、何がわかるでしょうか？
A. 組み込みサイズ（画像の実サイズ）
B. サイト全体の画像一覧
C. 画像のURLだけ
・
・
・
正解は
A. 組み込みサイズ（画像の実サイズ）
開発ツールで src属性に指定されているパスにマウスポインタをホバーすると「組み込みサイズ」が表示され、画像の実サイズが確認できます。
画像差し替えの作業時には、差し替え前の画像と同じサイズの画像を用意することで、デザインの崩れを防ぐことができます。
Q6.CSSの仕組み
「カスケード規則」とはどのようなCSSの規則ですか？
A. 同じ要素には古いスタイルが優先される
B. フォントサイズだけが優先される
C. 後から読み込まれたスタイルが、前に読み込まれたスタイルを上書きする
・
・
・
正解は
C. 後から読み込まれたスタイルが、前に読み込まれたスタイルを上書きする
CSSは、先に読み込まれたものから、そしてソースコードの上のほうに書かれたものからどんどんスタイルを適用していきます。そして、後から出てきたスタイルは、先に出てきたスタイルを、プロパティ単位で上書きします。
基礎ができるようになったら
簡単なものから、難しいものまでありましたね。得意や苦手がわかるとスキルアップも捗るはず。
そして、エンジニアスタイルでは、HTMLの新連載が始まりました！HTMLやCSSを使い、Webサイトの更新・修正は一通りできるようになった。そこからもう一段できることを増やしたい、そんな方に向けた内容です。ぜひこちらもあわせてチェックしてみてください。
