未経験者向け

HTML/CSS講座　BOOKNS-オリジナルテキスト

著者｜長島 広幸 講師

この書籍の概要

HTML/CSSの基礎を学び、ウェブ制作の世界へ！
初めての方でも安心して学べる内容で、自分のウェブページを作成し、公開する方法をBOOKNSオリジナルテキストで学べます！
基本的なHTML構文から、CSSを使ったデザインの応用まで、実践的なスキルを段階的に習得することが可能です。

実際に手を動かして学べる！
HTMLでウェブページの基本構造を作成し、CSSでデザインを加える工程を実際にコードを書きながら学びます。
レスポンシブデザインや基本的なSEOの考え方にも触れ、魅力的で機能的なウェブサイトを作れるようになります。

こんな方におすすめ

・HTML/CSSを基礎から学びたい方
・自分のウェブサイトを作って公開したい方
・デザインやプログラミングのスキルを身につけたい方

講座詳細を見る
  • 目次
  • 練習問題
  • 著者プロフィール

第0章

Webシステムの概要/環境構築

  1. Webシステムの概要
  2. テキストエディタと開発者ツール

第1章

HTML/CSS基礎

  1. HTMLとは
  2. HTML要素と属性
  3. グローバル属性
  4. CSSとは
  5. セレクタの種類
  6. CSSの優先度とカスケード
  7. コンテンツカテゴリとボックスモデル

第2章

様々なHTML要素

  1. ページの詳細構造を示す要素
  2. メタ情報を示す要素・属性
  3. テキスト・特定領域を示す要素・属性
  4. リストを示す要素・属性
  5. テーブルを示す要素・属性
  6. フォームを示す要素・属性
  7. 画像・動画・音声を示す要素・属性

第3章

様々なCSSプロパティ

  1. テキストとフォントに関するプロパティ
  2. 背景に関するプロパティ
  3. ボックスに関するプロパティ①
  4. ボックスに関するプロパティ②

第4章

レイアウトデザインの基礎

  1. マルチデバイス対応とレスポンシブデザイン
  2. グリッドレイアウト
  3. フレキシブルレイアウト

次のURLに関する説明として誤っている選択肢を1つ選んでください。 
	
https://www.example.com:8443/path/to/resource?query=param#fragment

  1. httpsプロトコルを使用している
  2. www.example.comの部分はFQDNと呼ばれる
  3. ?query=param#fragmentの部分はクエリパラメータと呼ばれる
  4. ポート番号として8443を使用している

【正解】3 
設問中のURLは次のような構造となっています。

https:// → プロトコル(URLスキーム)
www.example.com → FQDN(ホスト名+ドメイン名)
:8443 → ポート番号
/path/to/resource → サーバー内の特定のリソースへのパス
?query=param → クエリパラメータ（オプション)
#fragment → フラグメント識別子（オプション, ページ内の特定の位置を指す）

以上のことから、クエリパラメータとは?query=paramの部分であり、選択肢3は誤りとなります。

次のHTML文書の文字コードをUTF-8に設定する方法として、最も適切な選択肢を1つ選んでください。
	
<!DOCTYPE html>
<html>
<head>
	<meta charset="[空欄①]">
	<title>[空欄②]</title>
</head>
<body>
	<h1>[空欄③]</h1>
	<p>[空欄④]</p>
</body>
</html>

  1. [空欄①]にUTF-8を指定する
  2. [空欄②]にUTF-8を指定する
  3. [空欄③]にUTF-8を指定する
  4. [空欄④]にUTF-8を指定する

【正解】1 
正解は1です。
HTMLのmetaタグでは、次のように記述することで文字コードを指定することが可能です。
<meta charset="UTF-8">
2: titleタグはブラウザのタブなどに表示されるウェブページのタイトルを指定するためのタグです。
3: h1タグは見出しを表現するためのタグです。
4: pタグは段落を表現するためのタグです。

CSSの適用ルールに関する説明として、誤っている選択肢を1つ選んでください。

  1. iidセレクタが1個だけ指定されているセレクタよりも、classセレクタが10個指定されているセレクタの方が優先される
  2. !importantを付けたスタイルは他のどのスタイルよりも優先される
  3. 親要素に適用されたスタイルは、子要素にも受け継がれる
  4. 詳細度が同じ場合は後に読み込まれるスタイルの方が優先される

【正解】1 
誤っている選択肢は1です。
詳細度による優先順位を考える場合は、
a.idセレクタの数
b.classセレクタ・属性セレクタ・擬似クラスの数
c.タグセレクタ、擬似要素の数
の3項目を使って、(a, b, c)という詳細度を算出します。

ここで、次の2つのセレクタの詳細度を比較します。
① idセレクタが1個だけ指定されているセレクタ: 詳細度(1, 0, 0)
② classセレクタが10個指定されているセレクタ: 詳細度(0, 10, 0)

詳細度を比較する際は、まず1列目から比較します。
この時、①の詳細度は1列目が1、②の詳細度は1列目が0となっているため、より大きな数字をもった①のスタイルが優先される事になります。
②の詳細度は2列目が10となっていますが、1列目の値で差がついてしまっているため、2列目の値は優先度計算においては無視されます。

なお、(1, 0, 0)と(1, 10, 0)のように、1列目が同じ値だった場合には2列目の数字で優先度が比較されるようになっています。
この場合には、classセレクタなどが多く指定されているスタイルがより優先されることになります。

セマンティックHTMLを使用するメリットとして最も不適切な選択肢を1つ選んでください。

  1. 可読性が向上する
  2. サイトパフォーマンスが大幅に向上する
  3. アクセシビリティが向上する
  4. 検索エンジンが文書を適切に解釈することができるようになる

【正解】2 
セマンティックHTMLの「セマンティック」とは、日本語で「意味」という言葉に該当します。
HTML要素をその意味・役割に応じて適切に使用する事で、明確に構造化されたWebページを作り上げることができるようになります。

このようなセマンティックHTMLを意識することで、文書の構造が分かりやすくなり、HTMLコードの可読性が向上するというメリットがあります。
また、文書構造が明確になることで、スクリーンリーダーなどの支援技術や検索エンジンなどによってHTML文書が適切に解釈されるようになる、というメリットも存在します。
(なお、検索エンジンに適切に解釈されるHTMLコンテンツを作成するなどして、検索ランキング上位に表示されるようにする取り組みのことをSEO対策と呼んだりします)

セマンティックHTMLには、直接的にサイトパフォーマンスを大幅に向上させるような効果はないため、選択肢Bが誤りです。

メタ情報を示す要素の説明として誤っている選択肢を1つ選んでください。

  1. title要素はSEOの観点で特に重要である
  2. link要素はJavaScriptを記述するために使用される
  3. meta要素では文書の文字エンコーディングが指定できる
  4. style要素はCSSを記述するために使用される

【正解】2 
title要素はブラウザのタブや検索エンジンの結果ページに使用されるタイトルを指定するための要素です。
ページの内容を簡潔に示す情報として扱われるため、SEOの観点でも非常に重要な意味を持ちます。

link要素は外部スタイルシートやサイトのアイコンを指定するために使用される要素です。
JavaScriptを記述するために使用されるのはscript要素なので、選択肢Bは誤りです。

meta要素はHTML文書のメタデータを定義するために使用される要素です。
charset属性とあわせて使用することで、文書の文字エンコーディングを指定することが可能です。

style要素はページ内にインラインでCSSを記述するために使用される要素です。
link要素はスタイルシートを外部ファイルとして管理するのに対し、style要素はスタイルシートをHTML文書内部で管理するという特徴があります。

CSSにおける色の指定方法として誤っている選択肢を1つ選んでください。

  1. color: red
  2. color: ff0011
  3. color: rgb(255, 0, 0)
  4. color: rgba(255, 0, 0, 0.5)

【正解】2 
CSSを使用した色の指定方法には大きく3種類が存在します。

1．キーワードによる指定
予め決められた色の名前を記述することで、色を指定します。
例) red, blue

2.16進数カラーコードによる指定
16進数を使ったカラーコードで色を指定します。この指定方法では、先頭に#を付ける必要があります。
例) #ff0000, #00ff00

3.関数による指定
rgb関数やrgba関数を使って色を指定します。
rgb関数では赤緑青の強度を設定するのに対し、rgba関数では赤緑青の強度に加え、透明度を設定する必要があります。
例) rgb(255, 0, 0), rgba(0, 0, 255, 0.5)

選択肢Bは16進数を使ったカラーコードを使用しているにもかかわらず、#記号が使用されていないため誤りです。

ある要素をビューポートの上部に常に固定させておく場合に指定するプロパティとして、最も適切な選択肢を1つ選んでください。

  1. position:absolute; top: 0px;
  2. position:fixed; top: 0px;
  3. position:fixed; bottom: 0px;
  4. position:absolute; bottom: 0px;

【正解】2 
positionはボックスの位置を指定するために使用するプロパティです。
選択肢内で指定されているabsoluteはボックスの「最も近い親要素」を基準にして位置を指定する際に使用され、
fixedは「ビューポート(表示領域)」を基準にして位置を指定する際に使用されます。

このうちfixedに関しては、画面をスクロールしても常に同じ位置に固定されるという特徴があるため、Webサイトのヘッダーなどに使用されることが多いです。

マルチデバイス対応に関する説明として誤っている選択肢を2つ選んでください。

  1. レスポンシブデザインでは、どのデバイスにおいても同じHTML・CSSを使用する
  2. ダイナミックサービングでは、デバイスごとに異なるURLを使用する
  3. セパレートURLでは、デバイスごとに異なるURLを使用するが、使用するHTML・CSSは同じである
  4. レスポンシブデザインとダイナミックサービングはSEOに関して有利である

【正解】2,3 
設問の選択肢では、3つのマルチデバイス対応方法が挙げられています。

レスポンシブデザイン: 同じURLと同じHTML・CSSを使用します。デバイスが変わってもURLが変わらないためSEO面で有利です。
また、HTML・CSSを複数用意する必要がないため管理しやすいというメリットがあります。

ダイナミックサービング: 同じURLを使用しますが、利用するデバイスごとに使用するHTML・CSSを変えます。
URLは変わらないためSEO面で有利なのはレスポンシブデザインと同じですが、複数のHTML・CSSを維持する手間が発生します。
その分、デバイスごとに最適化されたHTML・CSSを使用することができるため、パフォーマンスが向上するメリットがあります。

セパレートURL: デバイスごとに異なるURLを使用します。
URLが変わってしまうためSEO面では不利ですが、モバイル版とデスクトップ版で全く異なるサイトを用意する必要があるケースなどで使用されることがあります。

フレックスボックスに関する説明として、誤っている選択肢を1つ選んでください。

  1. フレックスボックス全体を表す親要素をフレックスコンテナと呼ぶ
  2. フレックスコンテナ内に配置する子要素をフレックスアイテムと呼ぶ
  3. フレックスアイテムがコンテナの幅を超えた場合に折り返すかどうかを指定する場合は「flex-wrap」プロパティを使用する
  4. フレックスボックスを使用する場合は、フレックスコンテナに対し「display:flex」または「display:flex-inline」を指定する必要がある

【正解】4 
1,2: 正しい記述です。フレックスボックスを使ったレイアウトでは、親要素となる「フレックスコンテナ」の中に「フレックスアイテム」と呼ばれる子要素を配置します。
3: 正しい記述です。「flex-wrap」プロパティに「no-wrap」を指定すると折り返しがなくなり、「wrap」を指定すると折り返して次の行に配置されるようになります。
4: フレックスコンテナに対して設定すべきプロパティは「display:flex」または「display:inline-flex」となります。
以上から誤っている選択肢はDです。

次のファイル拡張子とHTML要素が正しい関連付けとなるように紐づけてください。
img , video , audio

  1. JPEG
  2. MP3
  3. PNG
  4. MP4
  5. WAV

【正解】img＝1,3　video＝4　audio＝2,5 
解説
img要素は画像を表示するために使用される要素です。
HTMLで使用できる画像ファイルの種類としては、PNGやJPEG形式が挙げられます。

video要素は動画を表示するために使用される要素です。
HTMLで使用できる動画ファイルの種類としては、MP4やWebM形式が挙げられます。

audio要素は音声を再生するために使用される要素です。
HTMLで使用できる音声ファイルの種類としては、MP3やWAV形式が挙げられます。

長島 広幸（ながしま ひろゆき）

長島 広幸（ながしま ひろゆき）
担当講座
LPIC
実務実績
LPIC level1,Java Silver,CCNA

長島講師はこんな人

IT未経験の生徒にも分かりやすい、丁寧できめ細やかな授業を心がけている。その明るく親しみやすい性格は、生徒からの人気も高い。
インフラ系の授業を得意とし、LPICやCCNAといった資格取得を目指す生徒に寄り添った授業を行う。

BOOKNS（ブックネス）とは、エンジニア育成に特化した定額制のオンライン学習サービスです。
開校20年の歴史をもつITスクール、システムアーキテクチュアナレッジのノウハウが詰まったオンライン教材に、現役講師によるコーチング・試験対策までをオールインワンにした、人材育成サービスの決定版！

お得な
サブスクリプションプランを
ご用意

法人　1ヶ月あたり

5,000 税抜
円/人（税込 5,500円）

個人　1ヶ月あたり

3,000 税抜
円/人（税込 3,300円）

※一部サービスのご利用には別途追加料金が発生致します。