HTMLとCSSの記述組み合わせ3パターンを簡易設定で整理してみました。
■一番簡単なHTMLだけの記述
作成するデータが1ファイルだけだったら、これもアリですが、CSSを知ってしまうとめんどうに感じマスね。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body bgcolor="midnightblue">
<table width="640" height="480" align="center">
<tr>
<td align="center" valign="middle" bgcolor="royalblue">
<H2><font color="white">
Clip art of graceful goldfish</font></H2>
<!-- 画像はindex.htmlと同じ階層にある
picフォルダー内の640×480pxサイズ -->
<img src="pic/picture.jpg" width="500" alt="金魚の画像">
</td>
</tr>
</table>
</body>
</html>
<!-- index.html -->
表示結果
実は640×480pxで指定したボックスが、なぜか636×476pxになっていました
■CSSを別途作成し手HTMLで読み込む
HTMLデータ作成の基本ですね。
/* rule.css */
@charset "UTF-8";
body {
text-align: center;
background-color: midnightblue;
}
.mainbox {
width: 640px;
height: 480px;
margin: 10px auto;
background-color: royalblue;
}
.f_sizu24 {
padding: 27px;
font-size: 24px;
font-weight: bold;
color: white;
}
/* rule.css */
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- cssファイルを指定 -->
<link rel="stylesheet" type="text/css" href="rule.css">
</head>
<body>
<div class="mainbox">
<div class="f_sizu24">
Clip art of graceful goldfish
</div>
<!-- 画像はindex.htmlと同じ階層にある
picフォルダー内の640×480pxサイズ -->
<img src="pic/picture.jpg" width="500" alt="金魚の画像">
</div>
</body>
</html>
<!-- index.html -->
表示結果。「一番簡単なHTMLだけの記述」での表示とテキスト行間が若干異なります。
■HTML内にCSSを記述
作成するデータが1ファイルだけで、CSS記述が解れば、これもアリですね。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- <style>~</style>にcssを記述 -->
<style>
body {
text-align: center;
background-color: midnightblue;
}
.mainbox {
width: 640px;
height: 480px;
margin: 10px auto;
background-color: royalblue;
}
.f_sizu24 {
padding: 27px;
font-size: 24px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div class="mainbox">
<div class="f_sizu24">
Clip art of graceful goldfish
</div>
<!-- 画像はindex.htmlと同じ階層にある
picフォルダー内の640×480pxサイズ -->
<img src="pic/picture.jpg" width="500" alt="金魚の画像">
</div>
</body>
</html>
<!-- index.html -->
表示結果。「CSSを別途作成してHTMLで読み込む」と全く同じです。
