テキストエディタの準備

Web サイトを構成する HTML や CSS などのテキストファイルを作成するには、テキストエディタが必要です。Mac にはテキストエディット、Windows にはメモ帳が、最初からインストールされていますが、この授業では無料で開発に便利な機能が豊富にある Microsoft の Visual Studio Code をおすすめします。

Visual Studio Codeのインストール

  1. Download ページから PC の OS に合わせてダウンロードする。

screenshot

  1. ダウンロードしたファイルをインストールする。

  • 圧縮ファイルがダウンロードされ、開いて「Visual Studio Code.app」というアプリケーションが取り出す。

    screenshot

  • 「アプリケーション」フォルダなどの開きやすい場所に移動しておく。圧縮ファイルは削除して問題ない。

  • セットアップ用のファイルがダウンロードされるので、開いてセットアップを開始する。

    screenshot

  • 途中で使用契約への同意が必要。インストールする場所などが選択できるが、特に変更する必要はない。

    screenshot

  • インストールが完了したら、スタートメニューからアプリケーションを起動できるようになる。セットアップ用のファイルは削除して問題ない。

Visual Studio Codeの日本語化

以下の記事が参考になります。

VSCode | Visual Studio Codeを日本語化する

ファイル、フォルダの作成

danger

  • 同じ Web サイトのファイルは一つのフォルダにまとめる。
  • Web 上であつかうフォルダやファイルの名前は、空白を含まない半角英数小文字で付ける。
  • ファイルの拡張子は必ずつける。コンピュータの設定によって表示されていないこともあるので、表示させておく。

演習 1

  1. デスクトップなど、自分で管理しやすい場所にフォルダを作成します。

folder

  1. Visual Studio Code で画面左のサイドバーの中から「エクスプローラー」を選び、先ほど作成したフォルダを開きます。サイドバーにフォルダの中が表示されるようになります（最初は何も入っていない）。

folder2

  1. 「新しいファイル」のアイコンをクリックして、HTML ファイルを作成します。ファイル名は「index.html」で作成してください。

folder3

  1. ファイルの内容を書き換えたら、保存をします。

  2. htmlファイルをWebブラウザで開いて、Webページを確認します。

HTML 入門

HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、Webページの文書構造を記述するための言語です。文書は、見出しや段落、箇条書きのリスト、画像など様々な役割の要素で構成されています。HTML は、文書の内容にタグというマークを付ける（マークアップする）ことで、要素の役割を示し、文書の構造を定義します。

例えば、以下のようなテキストがあったとします。

うちの猫は機嫌が悪い。

人間は、文字の大きさや前後の改行などから、この文が見出しなのか段落なのか、役割を読み取ることができますが、コンピュータに対しては正確に示す必要があります。このテキストが段落であることを示すためには、テキストを

<p>
と
</p>
のようなマークで囲みます。

<p>うちの猫は機嫌が悪い</p>

タグ

HTML で要素を表すには、タグと呼ばれるマークで内容を囲みます。タグには開始タグと終了タグがあります。終了タグには、タグ名の前に

/
が入ることに注意しましょう。タグには、見出しや段落、画像など、たくさんの種類があります。

element

属性

要素には、属性という要素に関する追加情報を与えることができます。属性は通常、画面に表示されません。属性は、開始タグのタグ名の後に半角スペースを空けて

属性名="値"
の形式で記入します。

attribute

入れ子の構造

要素の中に他の要素を入れて入れ子の構造（ネスト構造）にすることができます。

次の文は

<p>
要素の中に
<strong>
要素が入っており、文の一部を強調しています。

<p>私のネコは<strong>とっても</strong>機嫌が悪い。</p>

ただし、要素は正しく入れ子にしなければなりません。ある要素の中に開始タグが書かれた場合、その要素の中で終了タグを書く必要があります。

悪い例（

<strong>
要素の終了タグが
<p>
要素の終了タグの後にある）

<p>私のネコは<strong>とっても機嫌が悪い。</p></strong>

空要素

空要素 (empty elements) と呼ばれる内容を持たない要素もあります。空要素は、終了タグが不要です。例えば

<img>
要素は画像を表示する要素です。

<img src="logo.png" alt="ロゴ">

コメント

コメントは、HTML として解釈されない部分（無視される部分）のことです。コードに関するメモや注意を書いておくことができます。

<!-- コメント -->

HTMLの基本構造

HTMLの基本的な書き方はシンプルですが、実際の Web ページはどのような HTMLになっているでしょうか。ほぼ全てのWebページが、以下のような形で作られています。

<!DOCTYPE html>
<html>
  <head>
    <!-- ここには文書に関する情報を書く -->
  </head>
  <body>
    <!-- ここには画面に表示される内容を書く -->
  </body>
</html>

Web ページを構成する基本となる要素を紹介します。

文書に関する情報

<head>
要素の中には、以下のような文書に関する情報を記入します。

<head>
  <meta charset="utf-8">
  <title>タイトル</title>
</head>

見出しと段落

見出しを表す要素は、

<h1>
要素から
<h6>
要素まで段階あります。数字は順番や文字の大きさではなく、見出しの段階を表します。「h」は「heading」の「h」です。

<h1>
は題名、
<h2>
は章、
<h3>
は節、
<h4>
は項のような使い方です。

通常、

<h1>
要素は文書に 1 つだけ使います。また、
<h1>
要素の次に
<h3>
要素を使うなど段階を飛ばして使用することはせず、順番に使用します。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>さらに細かい見出し</h4>

段落を表す要素は、

<p>
要素です。通常の文章を書くときに、使用します。「p」は「paragraph」の「p」です。

<p>段落</p>

リスト

リストを表す要素には、順番なしのリストと順番付きのリストとがあります。

<ul>
  <li>リストの項目</li>
  <li>リストの項目</li>
  <li>リストの項目</li>
</ul>

リンク

他の HTML ファイルや文章へのリンクを示すのに用いられる。

<a href="https://example.com/">リンク</a>

href
属性には、リンクする URL やファイル名を指定します。リンク元のファイルとリンク先のファイルが同じフォルダ内にある場合は、ファイル名だけを記せば良いですが、異なるフォルダにある場合は、フォルダ名などを含めた場所（パス）を指定します。「a」は「anchor」の「a」です。

※ リンクやパスについては次週以降詳しく説明します。

画像

<img>
要素は、画像を表示します。「image」を略して「img」です。表示できるファイルの種類は

などです。

<img src="filename.png" alt="説明文" width="400">

src
属性には、画像ファイルの場所（パス）を入れます。画像ファイルが同じフォルダ内にある場合は、ファイル名だけを記せば良いです。
alt
属性には、Web ページが音声で読み上げられる場合、または、画像の読み込みに失敗した場合に使われるテキストを入れます。
width
属性は画像ぼ横幅をピクセル数で設定します。

※ 画像の扱いについては次週以降詳しく説明します。

演習 2

HTML ファイルを作成して、自己紹介の内容を書いてみる。自己紹介の項目は、自由に変更して OK。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自己紹介</title>
</head>

<body>
    <h1>自己紹介</h1>
    <h2>名前</h2>
    <p>〇〇 〇〇</p>
    <h2>出身</h2>
    <p>〇〇〇〇〇〇〇〇</p>
    <h2>好きなこと</h2>
    <ul>
        <li>〇〇〇〇〇</li>
        <li>〇〇〇〇〇</li>
        <li>〇〇〇〇〇</li>
    </ul>
    <h2>メッセージ</h2>
    <p>
        〇〇〇〇〇〇〇〇〇〇<br>
        〇〇〇〇〇〇〇〇〇〇<br>
        〇〇〇〇〇〇〇〇〇〇
    </p>
</body>

</html>

ショートカットキー

danger

ショートカットキー

⌘ S で保存
⌘ C でコピー
⌘ X でカット
⌘ V でペースト（貼り付け）
option Shift F でコード整列

提出方法：zip形式

Webページが入ったフォルダ（HTMLファイルやCSSファイル、画像ファイルが入ったフォルダ）を圧縮形式にして、1つのファイルとして扱うことができます。

Windowsの場合

zip

Macの場合

zip mac