素材サイトを修正する
フォルダーを作成する
まずフォルダーを作成します。
ファイルを修正する
sozai.html、flour.html、vegetable.htmlの<table>や装飾を削除します。
素材サイトのファイルをコピーして修正しても良いのですが、 文字列の配置も変更していますので、面倒な方は↓をコピーしてください。
[sozai.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>素材集</title>
</head>
<body>
<div>
<h1>- 素材集 -</h1>
<p>イラストをクリックしてください</p>
<p>花の素材</p>
<p><a href="flour.html"><img src="img/flour1.png"></a></p>
<p>野菜の素材</p>
<p><a href="vegetable.html"><img src="img/vegetable1.png"></a></p>
<p><a href="index.php">Appli Base</a></p>
</div>
</body>
</html>
[flour.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>花の素材 / 素材集</title>
</head>
<body>
<div>
<h1>- 花の素材 -</h1>
<p><img src="img/flour1.png"></p>
<p><img src="img/flour2.png"></p>
<p><a href="sozai.html">素材集トップへ戻る</a></p>
<p><a href="index.php">Appli Base</a></p>
</div>
</body>
</html>
[vegetable.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>野菜の素材 / 素材集</title>
</head>
<body>
<div>
<h1>- 野菜の素材 -</h1>
<p><img src="img/vegetable1.png"></p>
<p><img src="img/vegetable2.png"></p>
<p><a href="sozai.html">素材集トップへ戻る</a></p>
<p><a href="index.php">Appli Base</a></p>
</div>
</body>
</html>
各ページをブラウザで確認するとこのようになります。
最終更新日:2023/07/21