HTML 02 / Workshop

HTMLの
Work

Live Server img / ol / ul / a CSS

CH 01XBP用のホームページを作成

XBPのHPの構成

ブートキャンプでホームディレクトリの中に mygit フォルダを作り、その中に xbp フォルダを作りました。デザイン演習Ⅰ・Ⅱフォルダ（de12）の中を編集していきます。

ホームディレクトリ
└── mygit
    └── xbp
xbpフォルダの中のde12フォルダの構成

CH 02Work① 文字を書く

test.html に文字を書いて Live Server で確認します（動画：Live Serverの使い方）。

段落などの塊ごとに div タグで括って書いていきます。div は division（分割）の略です。改行は br タグを使います。

<div>
    ああああああ<br>
    12345678<br>
    いいいいいい
</div>

CH 03Work② 画像の挿入

test.html に images フォルダの画像を挿入します。画像の表示には img タグ（image の略）を使い、src 属性（source の略）にファイルパスを書きます。width 属性は幅で、% で指定すると画面に対する割合になります。

画像を表示(30%)<br>
<img src="./images/testimage.png" width="30%">
画像を表示(40%)<br>
<img src="./images/testimage.png" width="40%">
見え方 画像を表示(30%)
テスト画像
画像を表示(40%)
テスト画像

画像サイズに関する注意

スマホやデジカメの写真は印刷向けに解像度が高く、ファイルが大きくなっています。HPの表示にはそこまで必要なく、むしろ表示に時間がかかるので、GitHubにプッシュする写真は 1MB（1024KB）以下に落とします。

サイズの変更方法：Mac（doyolab） ／ Windows（外部サイト）

CH 04Work③ 箇条書き

番号付きの箇条書きは ol タグ（ordered list）、番号なしは ul タグ（unordered list）。各項目は li タグ（list）で括ります。

<ol>
    <li>ああああああ</li>
    <li>いいいいいい</li>
</ol>

<ul>
    <li>あああああ</li>
    <li>いいいいいいい</li>
</ul>
見え方
  1. ああああああ
  2. いいいいいい
  • あああああ
  • いいいいいいい

CH 05Work④ リンク

リンクは a タグ（Anchor）で作り、href 属性（hypertext reference）にリンク先を書きます。target="_blank" を付けると新しいタブで開き、付けないと同じタブで開きます。

<a href="./index.html">デザイン演習Ⅰ・Ⅱトップページ</a>
<a href="../index.html">XBPトップページ</a>
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a>
<a href="./files/test.pdf" target="_blank">pdfファイル</a>
見え方 デザイン演習Ⅰ・Ⅱトップページ … 同じ階層（フォルダ）の index.html に移動
XBPトップページ … 「../」はひとつ上の階層を意味する
Yahoo … 新しいタブでYahooを開く
pdfファイル … files フォルダの test.pdf を新しいタブで開く

外部サイトに関して

外部サイトにリンクを貼る場合は、自分のサイトではないことを明記します。

動画に関して

動画ファイルは重いので、GitHubには絶対にプッシュしません（最悪、リポジトリが壊れます）。動画は YouTube にアップしてリンクを貼るか、埋め込みコードを発行して HTML に貼り付けます。参考：YouTubeヘルプ

CH 06Work⑤ タイトル

test.html の head の部分にある title を、自分なりのタイトルに変更します。結果はブラウザのタブの表示で確認できます。

<title>XBPのページ</title>

CH 07Work⑥ スタイルシートの設定

CSSファイルは HTML のいろいろな書式を決めておくファイルで、読み込むとタグごとの書式が反映されます。head の部分で css フォルダの style.css を読み込みます。

<link rel="stylesheet" href="./css/style.css">

読み込みがうまくいけば、test.html の背景や右側の余白が整います。

CH 08宿題

  1. 1.html というファイルを作る（test.html をコピーすると簡単）。
  2. 1.html に一回目の授業のポイントを、画像やリンクなどを交えて、自分で見返してわかるようにできるだけ詳しく・良いデザインでまとめる。
  3. de12 フォルダ直下の index.html の演習ノートの下に、番号なし箇条書きで「第1回」と書き、1.html にリンクさせる。
  4. GitHubにプッシュする。
  5. 余裕があれば、インターネットなどで調べてデザインを自分なりに変更する（ただしトップページは各回のページに飛べる箇条書きのままにする）。