ウェブデザインA 第06回

ウェブデザインA 第06回

2026年11月06日 /最終更新:2026年11月06日
読了目安:約4分

「id」と「class」、ブラウザ幅とコンテンツ幅について解説します。

ウェブデザインA 第06回

前回はhtmlファイルには必ず記述しなければいけない基本的な構成を解説しました。

今回は、以前から登場していたhtmlタグについていた「id=”◯◯”」や「class=”◯◯”」の意味とその記述方法、
またhtmlタグを記述する上で理解が必要なブラウザ幅とコンテンツ幅の説明を行います。
さらに今回から本格的にVisual Studio Codeを使ったコーディングを始めていきます。

html文書ファイル基本構成の提出課題の訂正

前回提出した課題の確認をして必要があれば間違った点を訂正していきたいと思います。

まずはVisual Studio Codeを起動し、「Ctrl + K → Ctrl + O」で前回作った「html文書ファイル基本構成フォルダ」フォルダを選択して開き、
エクスプローラーパネルにある「index.html」をダブルクリックして編集モードで開いてください。
(不明の場合・・・起動とフォルダ準備手順)

今回の提出物の訂正点が以下です。

  1. フォルダ名などが指示通りになっていない
  2. 記述がない・足りない・多い・違う
  3. 半角と全角が入り混じっている
  4. ファイルを保存していない or 記述自体がない
  5. 間違いではないが整理したほうがよい

訂正したらindex.htmlをCtrl + Sして一旦Visual Studio Codeを閉じておきましょう。

また、指示以上の記述をしてくれていた最優秀コードを紹介します。

  1. 最優秀記述

ここで昨年度、指示以上の記述をしてくれて、最優秀コードに選出した学生のコードを紹介します。

2025年度最優秀コード作品

htmlタグの属性「id」「class」とは

まずは「id」と「class」から解説を行いましょう。
以下の記事をCtrl + クリックください。

[コーディングの基礎]「id」と「class」

ブラウザ幅とコンテンツ幅

次に「ブラウザ幅」と「コンテンツ幅」に関して解説を行います。
以下の記事をCtrl + クリックください。

[コーディングの基礎] ブラウザ幅とコンテンツ幅

Webサイトコーディング[BASIC] その1

では学んだEmmetを早速使ってコードを記述するため、再びVisual Studio Codeを起動しておきましょう。

今回は以下の記事の1ページ目(できれば2ページ目)までの学習を行います。
ただ可能な限りゆっくりと解説していきますので、確実についてきてください。
以下の記事を開いてみましょう。

[コーディングの実践]BASIC

次回は[BASIC]完成まで

今回はここまで。
引き続き次回もコーディングを行い、完成までを行いたいと思います。