ウェブデザインA 第06回

ウェブデザインA 第06回

2025年11月07日 /最終更新:2025年11月12日
読了目安:約4分

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

ウェブデザインA 第06回

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

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

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

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

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

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

  1. 記述が足りない
  2. 記述が違う
  3. ファイルを保存していない or 記述自体がない
  4. 間違いではないが整理したほうがよい

[コーディングの基礎] html文書ファイルの基本的な構成

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

  1. 最優秀記述

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

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

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

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

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

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

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

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

では学んだEmmetを早速使ってコードを記述してみましょう。
ひとまずVisual Studio Codeを起動しておきましょう。

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

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

次回は[BASIC]完成まで

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