詳細ページを作成する

花のページ「flour.html」ファイルを作る

先ほど作った「sozai.html」を開き、「ファイル」-「名前を付けて保存」する。

こうすることで、新規にファイルを作るより時短ができます。

「flour.html」で保存したのち、

・タイトルと見出しを変更する

・リンクも外して画像を追加する

・コピーライトの上に「素材集トップへ戻る」を追加する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>花の素材 / 素材集</title>
</head>
<body>
<div>
<h1>- 花の素材 -</h1>
<table>
<tr>
<td><img src="https://appli-base.net/images/html/flour1.png"></td>
<td><img src="https://appli-base.net/images/html/flour2.png"></td>
</tr>
</table>
<p><a href="sozai.html">素材集トップへ戻る</a></p>
<p><a href="index.html">Appli Base</a></p>
</div>
</body>
</html>

ブラウザで確認

野菜のページ「vegetable.html」ファイルを作る

先ほどと同じように作成してもいいのですが、違う方法で作成してみます。

「flour.html」を右クリックしてコピー

何もないところで右クリックして貼り付け

コピーが作成されます。

ファイル名をゆっくりクリックして、青色に反転させる。

ファイルを名入力する。

内容が似ているファイルを作成する場合は、このような方法でコピーすると時短になります。

vegetable.htmlを開き、タイトルと見出し、画像を修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>野菜の素材 / 素材集</title>
</head>
<body>
<div>
<h1>- 野菜の素材 -</h1>
<table>
<tr>
<td><img src="https://appli-base.net/images/html/vegetable1.png"></td>
<td><img src="https://appli-base.net/images/html/vegetable2.png"></td>
</tr>
</table>
<p><a href="sozai.html">素材集トップへ戻る</a></p>
<p><a href="index.html">Appli Base</a></p>
</div>
</body>
</html>

ブラウザで確認

これで詳細ページの制作は終わりですが、トップページともに装飾をしてみたいと思います。

2025/12/10