1. リンク

リンクをクリックして別のページへ移動することができます。リンクを作成するには

• リンク先がインターネット上別のWebページの場合は URL を入れます。

  例：Googleへのリンク

  <a href="https://www.google.com/">Google</a>

• リンク先が自分が作成している同じフォルダにある場合は、相対パスを入れます。

  例：自分が作成しているポートフォリオサイトの作品ページへのリンク

  <a href="works.html">Works</a>

2. パス

パスとは

パスとは、コンピュータ上でのファイルの場所を表すものです。パスには絶対パスと相対パスの 2 種類の表し方があります。Webでは基本的に相対パスを使います。

絶対パス

コンピュータのファイルシステムは階層構造になっています。絶対パスは、階層構造の基点となる場所からのファイルの場所を表す書き方です。そのコンピュータ内での場所なので、別のコンピュータにファイルを移動させた場合は、変わってしまいます。Web サイトで使うファイルは、Web サーバーにファイルをアップロードすることが前提なので、絶対パスは使用しません。

相対パス

相対パスは、あるファイルからのファイルの場所を表す書き方です。2 つのファイルの位置関係によって決まるので、2 つのファイルの位置関係さえ保っておけば、別のコンピュータにファイルを移動させても変化しません。Web サイトで使うファイルは、Web サーバーにファイルをアップロードすることが前提なので、相対パスを使用します。

相対パスのルール

• 同じフォルダにある場合は名前を使用します。
  例）page-1.html
• フォルダに入っている場合はフォルダ名とファイル名をスラッシュで区切って書きます。
  例）pages/page-2.html
• 上の階層にある場合はフォルダ名の代わりにドット2つ「..」を書きます。
  例）../index.html
• これらを組み合わせます。
  例1）../../index.html
  例2）../a/page-a.html

3. 演習

リンクとパスを理解するために、以下のような構造のファイルを使って演習を行います。zipファイルをダウンロードしたら解凍してデスクトップに移動し、Visual Studio Codeでフォルダを開きます。

ファイルは移動させないで、以下ができるようにコードを書き加えてみましょう。

0. 「index.html」に CSS ファイル「style.css」を適用させる。
1. 「index.html」から「page-1.html」に移動するリンクを作成する。
2. 「page-1.html」から「index.html」に移動するリンクを作成する。
3. 「index.html」から「page-2.html」に移動するリンクを作成する。
4. 「page-2.html」から「index.html」に移動するリンクを作成する。
5. 「index.html」から「page-a.html」に移動するリンクを作成する。
6. 「page-a.html」から「index.html」に移動するリンクを作成する。
7. 「page-a.html」から「page-b.html」に移動するリンクを作成する。

次の 4 つは自力で考えてみましょう。

8. 「index.html」から「page-b.html」に移動するリンクを作成する。
9. 「page-b.html」から「index.html」に移動するリンクを作成する。
10. 「page-b.html」から「page-a.html」に移動するリンクを作成する。
11. 全てのページに CSS ファイル「style.css」を適用させる。

4. いろいろなCSSの書き方

CSSなどでHTMLの要素を選択するセレクタには、以下のようにたくさんの種類があります。

参考：CSS セレクター - CSS: カスケーディングスタイルシート | MDN

全称セレクタ

全称セレクタはユニバーサルセレクタとも呼ばれ、セレクタに

/* 全ての要素に適用する */

* {
  box-sizing: border-box;
}

要素セレクタ

要素セレクタは、

/* 要素の名前でスタイルを適用する */

body {
  margin: 0;
}

img {
  max-width: 100%;
}

classセレクタ

classセレクタは、特定の

例：

htmlでclass属性をつける

<p class="sub">段落</p>

cssでclassセレクタを指定する

/* class属性で要素を指定する */

.sub {
    color: gray;
}

idセレクタ

idセレクタは、特定の

例：

htmlでid属性をつける

<h1 id="title">タイトル</h1>

cssでidセレクタを指定する

/* id属性で要素を指定する */

#title {
  background-color: #ffeeee;
}

複数セレクタ

複数のセレクタを

/* 複数の要素にスタイルを適用する */

ul, ol {
  padding-left: 1.5rem;
}

子孫セレクタ

複数のセレクタをスペースを開けて書くと、ある要素の中に含まれる特定の要素だけにスタイルを適用することができます。

/* 例：ul要素の中のli要素 */

ul li {
  list-style: none;
}

その他

このほかにも、セレクタには様々な要素の指定方法があります。

• 属性セレクター
• 疑似クラスと疑似要素
• 結合子

セレクタの優先順位

基本的にCSSは上から順番に読み込まれていくので、後に書かれている内容で上書きされます。

ただし、セレクタの書き方には詳細度と呼ばれる優先順位があり、優先順位の高いものが適用されます。セレクタの書き方を組み合わせると複雑になりますが、以下の原則を覚えておきましょう。

参考：カスケードを理解する

CSSの読み込みについて

5. div要素とspan要素

HTMLは基本的に、内容によって適切な要素にする（適切なタグで囲う）必要がありますが、デザインのためにいくつかの要素をグループ化したり、特定の部分だけデザインを変えたりしたい場合があります。

そういった場合は、特定の意味を持たない要素である

HTMLの

<!-- 要素をグループ化できる -->

<div>
  <h1>
    見出し
  </h1>
  <p>
    本文
  </p>
</div>

HTMLの

<p>
  文章の中の<span>一部分だけ</span>を囲むことができる。
</p>

中央寄せのテクニック

中央寄せのテクニックを紹介しておきます。HTMLで中央寄せしたい要素を

<div class="container">
  <!-- 中央寄せしたい内容 -->
</div>

.container {
    width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

6. 中間課題