ウェブデザインA 第05回

前回は「内側・外側」「親要素・子要素」「囲う」という言葉の意味と、コーディングの省略記法であるEmmetの解説を行いました。
概念は最初の段階で覚えておいてほしいのですが、Emmetに関しては使いながら覚えていきます。
今回はCodePenから一旦離れ、Visual Studio Codeを使ってコーディングを行いましょう。

サンプルファイルのダウンロード

まずは以下のリンクをクリックし、今回使用するサンプルファイルをダウンロードして、
「右クリック > すべて展開 > 展開」で展開しておき、中にある「html文書ファイルの基本的な構成」フォルダをUSBメモリに移動しておきましょう。

サンプルファイル「Document_Structure.zip」(716B)

Visual Studio Codeでコーディング準備

次にVisual Studio Codeを起動して、以下の記事を参考に「index.html」のコーディング準備を行ってください。

Visual Studio Codeの起動とフォルダ準備。

なお記事内の「最上位フォルダ」は今回の場合「html文書ファイルの基本的な構成」フォルダにあたるため、
Visual Studio Codeのウィンドウには「html文書ファイルの基本的な構成」フォルダごとドロップして開いてください。
すると画面左のエクスプローラーに「index.html」が表示されますので、ダブルクリックして編集モードにします。

以上の編集する準備ができたら早速次の工程に進みましょう。

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

htmlファイルには必ず記述しなければいけない4つのブロックがあります。記述しながら解説します。

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

なおこちらは以下で課題提出を行います。

課題の提出

まずは提出条件です。

「index.html」ファイル編集時に「titleタグ」でコーディングを行った「<title>ウェブデザインA</title>」を、
「<title>氏名 ウェブデザインA</title>」と書き換えて保存Ctrl + Sする。

ではコーディングを行ったindex.htmlが入った「html文書ファイル基本構成」フォルダのデータをまるごとzip形式で圧縮してください。

「html文書ファイルの基本的な構成」フォルダをzip形式で圧縮

まず、「html文書ファイルの基本的な構成」フォルダ圧縮の手順は以下。

1. フォルダ操作で「html文書ファイルの基本的な構成」フォルダを右クリックして、
   「送る → 圧縮(zip形式フォルダー)」の順にクリックしてzipファイルを作る。
2. 圧縮したzipファイルのファイル名を次の③に変更する。(コピーペースト推奨)
3. html文書ファイルの基本的な構成

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。
zip形式以外のファイルだと送信の際にエラーが出て送信ができませんので、必ず「html文書ファイルの基本的な構成」フォルダをまるごと圧縮してzip形式で提出してください。

演習03 html文書ファイル基本構成課題提出フォーム

なお提出期限は、1週間後の授業開始前までとします。

まとめ

いかがでしたか?今回はhtmlファイルには必ず記述しなければいけない4つのブロックを解説しました。
記事内でも解説しましたが、この記述はどの案件でも同じようなコードになるため、部分的に書き換えて使用します。
ほとんどのコーダー0からは記述せず、テンプレートとして手元に持っておき、効率化を行っています。