2022ウェブデザイン第5回

準備:ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説:
トップページに写真を配置する

1) 画像(*)を用意して、imagesフォルダに保存しておく。

*配置する画像は,あらかじめPhotoshopなどを使って最適な大きさにリサイズしておきます。
今回は、画像の幅が400pixcelあれば良いので、その大きさにPhotoshop上で画素数を減らしておきます。
(不必要に大きな画素数のまま表示させると、表示に時間がかかったり、サーバの容量を圧迫することになる)

2)「index.html」トップページの本文の手前に、次の一行を追加します。

<p><img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

src=”images/XXXX.jpg”の箇所のXXXX.jpgは、自分で用意した画像のファイル名に変更しておく。
alt=”画像の説明文”の箇所は、画像が表示されなかった場合に備えて、画像の説明文を記載しておく。
widthとheightで、それぞれ画像の幅と高さを指定することができる。

3)サイトのタイトルを、文字ではなく画像で表示するように変更する。
「index.html」トップページのタイトルのところを、次にように書き換えます。

<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">

4)「about.html」の本文中に、写真を配置する。
「about.html」の2箇所に,次の行を追加します。(追加箇所はソースコードを参照すること)

<img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />
<img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />

5)写真が表示される位置を、「style.css」で指定する。
今回は,写真が本文の右側に表示される箇所(photo-r)と、写真が本文の左側に表示される箇所(photo-l)の
2つのスタイルを、「style.css」の中に書き込みます。

右寄せの写真の配置:

img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

左寄せの写真の配置:

img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

ソースコード
ファイル名:「index.html」

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

<head>
<meta charset="UTF-8">

(中略)
<!-- サイトの見出しとその説明 -->
<h1>
<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">
</h1>
<p>愛知淑徳大学の魅力を紹介します。</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<!-- トップページに写真を配置する -->
<p>
<img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

(後略)

ファイル名:「about.html」

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

<head>
<meta charset="UTF-8">

(中略)

<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>
<p><img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />
本文<br/ >
本文</p>

<h3>小見出し</h3>
<p><img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />
本文<br/ >
本文<br/ >
本文</p>

<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

</div>
<!-- div containerここまで -->

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

</html>

ファイル名:「style.css」

@charset "utf-8";

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

body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.png);
}

(中略)

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */
img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

/* 左寄せで配置する画像はclass photo-lにする */
img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

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

(後略)

表の作成

「index.html」をコピーアンドペーストして、「class.html」と名付けて、「index.html」等と
同じフォルダ内(同じディレクトリ)に置く。

「class.html」内に表示する表を制作する。

HTMLでの表の作成の考え方
HTMLでは,<table>というタグを使って表を作成します。表の行を増やす場合には<tr>〜</tr>を使います。
表の列を増やす場合には,見出しの行には<th>〜</th>を,その他の行のには<td>〜</td>を使います。

今回の例では,3行×2列の表を作成します。
まず、<table>〜</table>と書いてから、その中に<tr>〜</tr>(1行目)のタグを書き、
その中にさらに<th>〜</th>(見出しの列)、<td>〜</td>(見出し以外の列)と中身の列を
書き込んでいくとよいでしょう。

「style.css」を使って、表の線の幅や背景色などの見た目の設定をする。
CSSファイル内に,新たにtable{ }(表全体の見た目の設定)と,th{ }(見出しの列の見た目の設定),td{ }(見出し以外の列の見た目の設定)を書いていきます。

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;

border-collapse: separate;
}
th {
padding: 8px;
width: 150px;
text-align: left;

vertical-align: top;

background-color: #ffefd5;
border: solid 1px #ffcc66;
}
td {
padding:8px;
border: solid 1px #ffcc66;
}

ソースコード
ファイル名:「class.html」

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

<head>
<meta charset="UTF-8">

(中略)
<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>

<table summary="表の説明分">
<tr>
<th>表の見出し1</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し2</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し3</th>
<td>表の本文</td>
</tr>
</table>

<p>本文</p>

(後略)

ファイル名:「style.css」

(中略)

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
clear: both;
}

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;
border-collapse: separate;
}

th {
padding: 8px;
width: 150px;
text-align: left;
vertical-align: top;
background-color: #ffefd5;
border: solid 1px #ffcc66;
}

td {
padding: 8px;
border: solid 1px #ffcc66;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */

(後略)

 

制作するWebページのテーマを考える

次回の授業以降は、各自が独自のテーマを設定し、そのテーマをもとにWebページのデザインを進めていきます。

特定の団体・企業・学校・グループ・イベントなどのテーマをひとつ決めて,それを紹介するためのウェブサイトを制作する。

●制作のテーマについて
団体・企業・学校・グループ・イベントごとなど,なにかひとつのテーマを決めて,それを紹介するためのウェブサイトを制作する。テーマとする団体等は,実在のものでも架空のものでも,どちらでも構わない。
自分のためではなく,他者が見て興味を持つことができるウェブサイトを制作すること。また,どのような人が見るためのウェブサイトであるか,ターゲットを明確にすること。

まずはじめに、制作のテーマについて考えていきましょう。その際、伝えたいメッセージや、ウェブページ制作の素材となる文書や画像などを豊富に集めることができるテーマを選択するのがポイントになります。

課題
制作のテーマを3案考えて、アイディアをまとめてください。
まとめ方:
・3案それぞれのアイディアに、わかりやすいタイトルをつける。
・アイディアごとに200文字程度の解説をつける。

課題提出方法 
次回、5月24日(火)の授業でテーマ案をもとに企画書を作成していきます。

2022ウェブデザイン第4回

準備:ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説:
メニューの設定
スタイルシートに、以下のように記述を加える。
1)リンクの文字に表示される下線を消すために、「text-decoration: none」を指定します。
2)リンクの文字(メニュー)が一行に表示されるように、「display: inline」などを指定します。
3)リンクの文字の色を変えるには、「a(リンクがある文字)」「a:visited(訪れたことがあるリンクの文字)」「a:hover(カーソルが乗っている状態のリンクの文字)」をスタイルシートに記入します。
ここでは、「a(リンクがある文字)」を濃い青(#0000cd)に、「a:visited(訪れたことがあるリンクの文字)」を水色(#6495ed)に指定します。「a:hover(カーソルが乗っている状態のリンクの文字)」は、背景に青い色がつくようにbackground-colorを使って指定します。

a …リンクの文字
a:visited …訪れたことがあるリンクの文字
a:hover …カーソルが乗っている状態のリンクの文字

ページ全体を罫線で囲み背景に色をつける
ページ全体の見え方の指定をするために、指定したい部分に目印をつけます。
ここでは、「index.html」の中に<div>タグを使って<container>というid属性の目印をつけます。その部分の見え方の指定は、「style.css」でおこないます。
背景模様のもとになる画像には、「back.jpg」というファイル名をつけ、「index.html」などと同じディレクトリに「images」というフォルダを作成して、その中に入れておきます。今後使用する画像も、この「images」フォルダに入れていきます。
背景模様になる画像は,繰り返し表示されるので,パターンの一部だけを作成して画像として保存します。

タイトルまわりに色をつける
「about.html」のタイトルまわりを設定するために,<div>タグを使って<header>という名前のid属性を指定します。
id属性が<header>に指定されている箇所の指示を、「style.css」に書き込みます。

見出しに装飾をする
「about.html」の<h2>見出しと<h3>見出しの設定を、それぞれ「style.css」の中に書き込みます。
<h2>見出しには、左端に■が表示されるようにします。■印の表示には、枠線の左側だけを表示するという方法を使います。

【borderで指定できる線の種類】
solid …実線
double …二重線
dashed …破線
dotted …点線

【borderで指定する線の位置】
border …上下左右を囲む
border-top …上に線を表示する
border-right …右に線を表示する
border-bottom …下に線を表示する
border-left …左に線を表示する

<h3>見出しには,左端に画像のマークをつけ,下線を表示するようにします。マークは,「mark.png」というファイル名で,「images」フォルダの中に入れておきます。

 

ソースコード:
「index.html」

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

<head>
<meta charset="UTF-8">

[中略]

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

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

[中略]

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

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

</html>

 

「about.html」

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

<head>
<meta charset="UTF-8">

[中略]

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

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- ここからdiv header -->
<div id="header">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

</div>
<!-- div headerここまで -->

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>

[中略]

<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

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

</html>

 

「style.css」ソースコード

@charset  "utf-8";

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

body  {
  color:  #444444; 
  background-color:  #87cefa; 
  background-image:  url(images/back2.png); 
}

/* コンテンツ全体(id属性=container)の指定 */
div#container  { 
  border:  solid  2px  #6495ed; 
  padding:  20px; 
  background-color:  #ffffff; 
  width:  800px; 
  margin-left:  auto; 
  margin-right:  auto; 
}

/* タイトルまわり(id属性=header)の指定 */
div#header  { 
  background-color:  #87cefa; 
  padding:  5px  20px; 
}

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

h2  {
  font-size:  22px; 
  font-family:  sans-serif; 
  color:  #191970; 
  font-weight:  normal; 
  border-left:  solid  14px  #87cefa; 
  padding-left:  5px; 
}

h3  {
  font-size:  18px; 
  font-family:  sans-serif; 
  color:  #4169e1; 
  border-bottom:  solid  2px  #4169e1; 
  padding-bottom:  3px; 
  background-image:  url(images/mark.png); 
  background-repeat:  no-repeat; 
  background-position:  0px  6px; 
  padding-left:  20px; 
}

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

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

/* メニューのリンクの文字色の設定 */
a  {
  color:  #0000cd; 
}

a:visited  {
  color:  #6495ed; 
}

a:hover  {
  color:  #ffffe0; 
  background-color:  #4169e1; 
}

/* リスト(メニュー)関係の設定 */
li  a  { 
  text-decoration:  none; 
} 

li  { 
  display:  inline; 
  padding-right:  10px; 
  font-size:  16px; 
  font-family:  Verdana,  Helvetica,  sans-serif; 
}

ul  { 
  list-style-type:  none; 
  margin-left:  0; 
  padding-left:  0; 
  background-color:  #ffefd5; 
  padding:  3px  20px; 
}

2022ウェブデザイン第3回

文字の表示について

前回までに作成したファイル「index.html」と「style.css」を,メモ帳で開きます。

ソースコード01_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>

ソースコード01_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-size: 数値px;
サイズの値はピクセルです。数値を変えてサイズを変更してみましょう。

②文字の書体
font-family: font-familyの種類;
文字の書体を他の種類に変更してみましょう。
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

③文字の太さ
font-weight: font-weightの種類;
文字の太さを他の種類に変更してみましょう。
【font-weightの種類】※コンピュータ環境によって反映されない場合があります。
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

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

⑤文字の行間隔
line-height: 数値;
文字の行間隔を、数値を変えて変更してみましょう。

リンクの設定
リンク(クリックすると他のページに移動する)を作成します。

<a href="リンク先のページ.html">リンクを設定したい文字列</a>

上のように記述することで,そのリンクをクリックしたときにどのウェブページを表示するのかを指定します。

記載例)

<a href="about.html">このサイトについて</a>

リストの設定
今回のウェブサイトでは,リンクをリスト形式で記述し、リンクを4つ用意することにします。
リスト形式にしたい部分は以下のタグで囲みます。

<ul>〜</ul>

リストのひとつひとつの要素は以下のタグで囲みます。

<li>〜</li>

リスト形式の記述例は以下のようになります。

<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>

リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを,「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は,文字コードの指定(「UTF-8」)を忘れないようにしましょう。

リンクの記述
以下のようにソースコード内にメニュー(リンク)のリストを挿入しましょう。

ソースコード02_01

ファイル名:「index.html」

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

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

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

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

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>説明文</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

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

</html>

ソースコード02_02

ファイル名:「about.html」 ※「index.html」を複製し,必要な部分だけ書き換えます。

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

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

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

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

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>解説</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<h2>中見出し</h2>
<p>説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>
</body>
<!-- bodyここまで -->

</html>

完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。

2022ウェブデザイン第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ブラウザで開いて確認する。

2022ウェブデザイン第1回

このWEBページは、愛知淑徳大学創造表現学部メディアプロデュース専攻 ウェブデザイン第1回の授業資料になります。
この授業では、HTMLやCSSといった、基本的な言語=コードを用いてウェブデザインの制作を進めていきます。
各自でテーマを選定し、調査や素材集めを進めたうえで、ウェブデザインのレイアウトを進め、HTMLとCSSを用いてコーディングを進めて完成させます。

完成したウェブサイトは、授業内でプレゼンテーションしてもらいます。

授業計画
第1回  ガイダンス、HTMLとは、ソースコードの記述
第2回  HTMLとCSSの基礎1:タグとは、CSSとは
第3回  HTMLとCSSの基礎2:スタイルの定義
第4回  HTMLとCSSの基礎3:リンクとナビゲーション
第5回  HTMLとCSSの基礎4:スタイルの調整
第6回  HTMLとCSSの基礎5:画像の配置、リストとテーブル
第7回  企画書作成
第8回〜第13回 課題制作
第14回・第15回 講評会

課題と評価
第1課題 練習用WEBページの制作:20%
企画書 独自制作のWEBページのための企画・計画:10%
第2課題 企画を元にしたWEBページの制作:30%
講評会*: 発表30%+相互評価10%

*講評会は定期試験に準ずる扱いとします。

ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し,それをWebブラウザで開いて,Webページとして表示されるかどうかを試します。

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

ソースコード01

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

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

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

<body>
こんにちは!
</body>
</html>
練習課題

ソースコードが完成したら、bodyタグで囲まれた箇所<body>〜</body>に、
文章を加えてみましょう。

加える文章:本授業への抱負

2021ウェブデザイン第6回

企画書制作の準備
ウェブデザインを進めていくための企画書を制作していきます。ワークシートに沿って、企画書を制作していきましょう。
以下にワークシートの制作例を掲載します。

ポイントは、ウェブサイトのテーマにおいて、どのような目的のウェブサイトを構築するのかを明確にしておくことです。
みなさんが扱う、団体・企業・学校・グループ・イベントごとなどのテーマをもとに、どのようなウェブサイトを制作するのか、
制作のテーマを決定しましょう。
また、その際、制作テーマのねらいや、想定する利用者像を明確にしておきましょう。

課題
制作のテーマを1案に絞り込み、ワークシートを参考にウェブサイトの制作テーマに落とし込みましょう。
また、制作テーマのコンセプトと、想定する利用者についてまとめましょう。
まとめ方:
・制作テーマを100字程度でまとめる。
・制作テーマのコンセプトを200字程度でまとめる。
・想定する利用者像を具体的に記述する。(年齢、性別、職業、趣味など)
課題提出方法 
CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 企画書提出スレッドに
PDF形式の文書を提出してください。 
A4サイズ 縦位置・横書き 
提出締切 
11月15日(月)まで

2021ウェブデザイン第5回

準備:ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説:
トップページに写真を配置する

1) 画像(*)を用意して、imagesフォルダに保存しておく。

*配置する画像は,あらかじめPhotoshopなどを使って最適な大きさにリサイズしておきます。
今回は、画像の幅が400pixcelあれば良いので、その大きさにPhotoshop上で画素数を減らしておきます。
(不必要に大きな画素数のまま表示させると、表示に時間がかかったり、サーバの容量を圧迫することになる)

2)「index.html」トップページの本文の手前に、次の一行を追加します。

<p><img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

src=”images/XXXX.jpg”の箇所のXXXX.jpgは、自分で用意した画像のファイル名に変更しておく。
alt=”画像の説明文”の箇所は、画像が表示されなかった場合に備えて、画像の説明文を記載しておく。
widthとheightで、それぞれ画像の幅と高さを指定することができる。

3)サイトのタイトルを、文字ではなく画像で表示するように変更する。
「index.html」トップページのタイトルのところを、次にように書き換えます。

<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">

4)「about.html」の本文中に、写真を配置する。
「about.html」の2箇所に,次の行を追加します。(追加箇所はソースコードを参照すること)

<img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />
<img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />

5)写真が表示される位置を、「style.css」で指定する。
今回は,写真が本文の右側に表示される箇所(photo-r)と、写真が本文の左側に表示される箇所(photo-l)の
2つのスタイルを、「style.css」の中に書き込みます。

右寄せの写真の配置:

img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

左寄せの写真の配置:

img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

ソースコード
ファイル名:「index.html」

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

<head>
<meta charset="UTF-8">

(中略)
<!-- サイトの見出しとその説明 -->
<h1>
<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">
</h1>
<p>愛知淑徳大学の魅力を紹介します。</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<!-- トップページに写真を配置する -->
<p>
<img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

(後略)

ファイル名:「about.html」

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

<head>
<meta charset="UTF-8">

(中略)

<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>
<p><img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />
本文<br/ >
本文</p>

<h3>小見出し</h3>
<p><img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />
本文<br/ >
本文<br/ >
本文</p>

<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

</div>
<!-- div containerここまで -->

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

</html>

ファイル名:「style.css」

@charset "utf-8";

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

body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.png);
}

(中略)

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */
img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

/* 左寄せで配置する画像はclass photo-lにする */
img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

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

(後略)

表の作成

「index.html」をコピーアンドペーストして、「class.html」と名付けて、「index.html」等と
同じフォルダ内(同じディレクトリ)に置く。

「class.html」内に表示する表を制作する。

HTMLでの表の作成の考え方
HTMLでは,<table>というタグを使って表を作成します。表の行を増やす場合には<tr>〜</tr>を使います。
表の列を増やす場合には,見出しの行には<th>〜</th>を,その他の行のには<td>〜</td>を使います。

今回の例では,3行×2列の表を作成します。
まず、<table>〜</table>と書いてから、その中に<tr>〜</tr>(1行目)のタグを書き、
その中にさらに<th>〜</th>(見出しの列)、<td>〜</td>(見出し以外の列)と中身の列を
書き込んでいくとよいでしょう。

「style.css」を使って、表の線の幅や背景色などの見た目の設定をする。
CSSファイル内に,新たにtable{ }(表全体の見た目の設定)と,th{ }(見出しの列の見た目の設定),td{ }(見出し以外の列の見た目の設定)を書いていきます。

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;

border-collapse: separate;
}
th {
padding: 8px;
width: 150px;
text-align: left;

vertical-align: top;

background-color: #ffefd5;
border: solid 1px #ffcc66;
}
td {
padding:8px;
border: solid 1px #ffcc66;
}

ソースコード
ファイル名:「class.html」

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

<head>
<meta charset="UTF-8">

(中略)
<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>

<table summary="表の説明分">
<tr>
<th>表の見出し1</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し2</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し3</th>
<td>表の本文</td>
</tr>
</table>

<p>本文</p>

(後略)

ファイル名:「style.css」

(中略)

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
clear: both;
}

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;
border-collapse: separate;
}

th {
padding: 8px;
width: 150px;
text-align: left;
vertical-align: top;
background-color: #ffefd5;
border: solid 1px #ffcc66;
}

td {
padding: 8px;
border: solid 1px #ffcc66;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */

(後略)

 

制作するWebページのテーマを考える

次回の授業以降は、各自が独自のテーマを設定し、そのテーマをもとにWebページのデザインを進めていきます。

特定の団体・企業・学校・グループ・イベントなどのテーマをひとつ決めて,それを紹介するためのウェブサイトを制作する。

●制作のテーマについて
団体・企業・学校・グループ・イベントごとなど,なにかひとつのテーマを決めて,それを紹介するためのウェブサイトを制作する。テーマとする団体等は,実在のものでも架空のものでも,どちらでも構わない。
自分のためではなく,他者が見て興味を持つことができるウェブサイトを制作すること。また,どのような人が見るためのウェブサイトであるか,ターゲットを明確にすること。

まずはじめに、制作のテーマについて考えていきましょう。その際、伝えたいメッセージや、ウェブページ制作の素材となる文書や画像などを豊富に集めることができるテーマを選択するのがポイントになります。

課題
制作のテーマを3案考えて、アイディアをまとめてください。
まとめ方:
・3案それぞれのアイディアに、わかりやすいタイトルをつける。
・アイディアごとに200文字程度の解説をつける。

課題提出方法 
次回、11月9日(火)の授業でテーマ案をもとに企画書を作成していきます。

2021ウェブデザイン第4回

準備:ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説:
メニューの設定
スタイルシートに、以下のように記述を加える。
1)リンクの文字に表示される下線を消すために、「text-decoration: none」を指定します。
2)リンクの文字(メニュー)が一行に表示されるように、「display: inline」などを指定します。
3)リンクの文字の色を変えるには、「a(リンクがある文字)」「a:visited(訪れたことがあるリンクの文字)」「a:hover(カーソルが乗っている状態のリンクの文字)」をスタイルシートに記入します。
ここでは、「a(リンクがある文字)」を濃い青(#0000cd)に、「a:visited(訪れたことがあるリンクの文字)」を水色(#6495ed)に指定します。「a:hover(カーソルが乗っている状態のリンクの文字)」は、背景に青い色がつくようにbackground-colorを使って指定します。

a …リンクの文字
a:visited …訪れたことがあるリンクの文字
a:hover …カーソルが乗っている状態のリンクの文字

ページ全体を罫線で囲み背景に色をつける
ページ全体の見え方の指定をするために、指定したい部分に目印をつけます。
ここでは、「index.html」の中に<div>タグを使って<container>というid属性の目印をつけます。その部分の見え方の指定は、「style.css」でおこないます。
背景模様のもとになる画像には、「back.jpg」というファイル名をつけ、「index.html」などと同じディレクトリに「images」というフォルダを作成して、その中に入れておきます。今後使用する画像も、この「images」フォルダに入れていきます。
背景模様になる画像は,繰り返し表示されるので,パターンの一部だけを作成して画像として保存します。

タイトルまわりに色をつける
「about.html」のタイトルまわりを設定するために,<div>タグを使って<header>という名前のid属性を指定します。
id属性が<header>に指定されている箇所の指示を、「style.css」に書き込みます。

見出しに装飾をする
「about.html」の<h2>見出しと<h3>見出しの設定を、それぞれ「style.css」の中に書き込みます。
<h2>見出しには、左端に■が表示されるようにします。■印の表示には、枠線の左側だけを表示するという方法を使います。

【borderで指定できる線の種類】
solid …実線
double …二重線
dashed …破線
dotted …点線

【borderで指定する線の位置】
border …上下左右を囲む
border-top …上に線を表示する
border-right …右に線を表示する
border-bottom …下に線を表示する
border-left …左に線を表示する

<h3>見出しには,左端に画像のマークをつけ,下線を表示するようにします。マークは,「mark.png」というファイル名で,「images」フォルダの中に入れておきます。

 

ソースコード:
「index.html」

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

<head>
<meta charset="UTF-8">

[中略]

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

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

[中略]

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

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

</html>

 

「about.html」

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

<head>
<meta charset="UTF-8">

[中略]

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

<!-- ここからbody -->
<body>

<!-- ここからdiv container -->
<div id="container">

<!-- ここからdiv header -->
<div id="header">

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>本文</p>

</div>
<!-- div headerここまで -->

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>

[中略]

<address>制作者:自分の名前</address>

</div>
<!-- div containerここまで -->

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

</html>

 

「style.css」ソースコード

@charset  "utf-8";

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

body  {
  color:  #444444; 
  background-color:  #87cefa; 
  background-image:  url(images/back2.png); 
}

/* コンテンツ全体(id属性=container)の指定 */
div#container  { 
  border:  solid  2px  #6495ed; 
  padding:  20px; 
  background-color:  #ffffff; 
  width:  800px; 
  margin-left:  auto; 
  margin-right:  auto; 
}

/* タイトルまわり(id属性=header)の指定 */
div#header  { 
  background-color:  #87cefa; 
  padding:  5px  20px; 
}

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

h2  {
  font-size:  22px; 
  font-family:  sans-serif; 
  color:  #191970; 
  font-weight:  normal; 
  border-left:  solid  14px  #87cefa; 
  padding-left:  5px; 
}

h3  {
  font-size:  18px; 
  font-family:  sans-serif; 
  color:  #4169e1; 
  border-bottom:  solid  2px  #4169e1; 
  padding-bottom:  3px; 
  background-image:  url(images/mark.png); 
  background-repeat:  no-repeat; 
  background-position:  0px  6px; 
  padding-left:  20px; 
}

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

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

/* メニューのリンクの文字色の設定 */
a  {
  color:  #0000cd; 
}

a:visited  {
  color:  #6495ed; 
}

a:hover  {
  color:  #ffffe0; 
  background-color:  #4169e1; 
}

/* リスト(メニュー)関係の設定 */
li  a  { 
  text-decoration:  none; 
} 

li  { 
  display:  inline; 
  padding-right:  10px; 
  font-size:  16px; 
  font-family:  Verdana,  Helvetica,  sans-serif; 
}

ul  { 
  list-style-type:  none; 
  margin-left:  0; 
  padding-left:  0; 
  background-color:  #ffefd5; 
  padding:  3px  20px; 
}

2021ウェブデザイン第3回

文字の表示について

前回までに作成したファイル「index.html」と「style.css」を,メモ帳で開きます。

ソースコード01_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>

ソースコード01_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-size: 数値px;
サイズの値はピクセルです。数値を変えてサイズを変更してみましょう。

②文字の書体
font-family: font-familyの種類;
文字の書体を他の種類に変更してみましょう。
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

③文字の太さ
font-weight: font-weightの種類;
文字の太さを他の種類に変更してみましょう。
【font-weightの種類】※コンピュータ環境によって反映されない場合があります。
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

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

⑤文字の行間隔
line-height: 数値;
文字の行間隔を、数値を変えて変更してみましょう。

リンクの設定
リンク(クリックすると他のページに移動する)を作成します。

<a href="リンク先のページ.html">リンクを設定したい文字列</a>

上のように記述することで,そのリンクをクリックしたときにどのウェブページを表示するのかを指定します。

記載例)

<a href="about.html">このサイトについて</a>

リストの設定
今回のウェブサイトでは,リンクをリスト形式で記述し、リンクを4つ用意することにします。
リスト形式にしたい部分は以下のタグで囲みます。

<ul>〜</ul>

リストのひとつひとつの要素は以下のタグで囲みます。

<li>〜</li>

リスト形式の記述例は以下のようになります。

<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>

リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを,「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は,文字コードの指定(「UTF-8」)を忘れないようにしましょう。

リンクの記述
以下のようにソースコード内にメニュー(リンク)のリストを挿入しましょう。

ソースコード02_01

ファイル名:「index.html」

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

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

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

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

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>説明文</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>

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

</html>

ソースコード02_02

ファイル名:「about.html」 ※「index.html」を複製し,必要な部分だけ書き換えます。

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

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

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

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

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>解説</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ1</a></li>
<li><a href="class.html">コンテンツ2</a></li>
</ul>

<h2>中見出し</h2>
<p>説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者:自分の名前(愛知淑徳大学創造表現学部)</address>
</body>
<!-- bodyここまで -->

</html>

完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。

2021ウェブデザイン第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ブラウザで開いて確認する。