CSS入門とサンプル


HOME > CSS > CSSを使ったサイトを作ってみよう

素材サイトを修正する

フォルダーを作成する

まずフォルダーを作成します。


ファイルを修正する

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

Copyright 2023 Appli Base All Rights Reserved.

Yes:3071 Total:68346 Today:127

single_css