2023ウェブデザイン第2回

おさらい
前回の授業では、かんたんなソースコードを自分で書いてコンピュータ上に保存し,それをWebブラウザで開いて,Webページとして表示しました。ここまでの作業手順をもう一度、確認しておきましょう。

作業手順
① PCを起動し,デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を,自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら,書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら,「ファイル」>「名前を付けて保存」で,「学籍番号」フォルダ内に保存する。
・ファイル名:学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード:UTF-8
・保存先:「デスクトップ」>「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が,「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし,「プログラムから開く」>「Internet Explorer」を選択する。
⑧ Internet Explorer(Webブラウザ)が起動し,今作成したファイルがウェブページとして表示されれば成功です。

ソースコード01

ファイル名:「学籍番号.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>

<body>
こんにちは!
</body>
</html>

 

ウェブサイトの制作
ソースコードを元に,新しい行を追加していきます。

作業手順
① 作成したファイル「学籍番号.html」を複製して,別のファイルをつくる。複製したファイルの名称を,「index.html」に変更する。
② 「index.html」を,メモ帳で開く。
③ どの行になにが書いてあるのかを自分で覚えておくために,コメントを記入する。
・タグの構造やページ構成をわかりやすくするため,ソースコードの中に覚え書きとして書いておくテキストを,「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは, <!– と –> で囲います。
・<!– と –> で囲われた中身は,ブラウザで開いたときには表示されません。
④ 新しく制作するWebページの見出しと本文を記入する。
・ここでは,<h1> 〜 </h1>,<p> 〜 </p>というタグで中身を区切ります。
・このタグは,後で文字のサイズなどを指定するときに,目印として必要になります。
⑤ このWebページの制作者の情報を,ページの末尾に記入する。
・制作者情報は,<address> 〜 </address>というタグで区切るという決まりがあります。

ソースコード02_01

ファイル名:「index.html」

<!DOCTYPE html>
<html lang="ja">

<!-- ここからhead -->
<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトルを記述しましょう</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>
<!-- サイトの見出しとその説明 -->
<h1>サイトの見出し</h1>
<p>本文を記述します。</p>
<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部メディアプロデュース専攻)</address>

</body>
<!-- bodyここまで -->
</html>

⑥ 文字の大きさや色を指定するため,スタイルシートを作成し,HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し,そのファイルの中にスタイルを記述します。
・スタイルシートには,「style.css」というファイル名をつけて,「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには,<link>というタグを<head>の中に記入します。
⑦ 作成したスタイルシートの中に,スタイルを書き込む。
・スタイルは,CSSというスタイル言語を使って指定します。
・スタイルシートでの色の指定は,「#○○○○○○」という英数字でおこないます。この英数字は,RGBの数値を16進数であらわしたものです。
・「#000000」は,赤・緑・青すべてが0(点灯しない)なので,画面の表示色は黒になります。「#ffffff」は,赤・緑・青すべてがf(もっとも明るい)なので,画面の表示色は白になります。
・どのような色になるのかを調べたい場合は,http://www.colordic.org/ などを参照。

ソースコード02_02

ファイル名:「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
}

h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

address {
font-size: 14px;
font-style: normal;
}

【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示

⑧ 以上の変更が反映されているかどうか,Webブラウザで開いて確認する。