ウェブサイトの“書き方”⑤~コンテンツページを作る

June 6th,2015
コンテンツページを作る
コンテンツページ
前回はウェブサイトの“表紙”となる“ホームページ”を作りました。
表紙があったら中身がないといけません。
今回はコンテンツのページを作ります。
"ホームページ"の時と同様、はじめにファイルを作ります。
ただし、ファイル名は半角英数字であれば自由につけてかまいません。
コンテンツページを編集する
HTML文書の基本の形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書のタイトル</title>
</head>
<body>

文書の内容

</body>
</html>
まずはウェブページのタイトルを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ</title>
</head>
<body>

文書の内容

</body>
</html>
あとはウェブページの内容を作っていきます。
とりあえず文字だけ書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ</title>
</head>
<body>

トップに戻る

黄色いフルーツバナナ
バナナについての解説。

目次

バナナの特徴
バナナの産地
バナナの保存方法
バナナの栄養素

バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。

バナナの木
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。

バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの産地
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。

バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

トップに戻る

&copy; copyright 2015 Frouts wo taberu

</body>
</html>
あとはタグを使っていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>

<p>トップに戻る</p>

<h1>黄色いフルーツバナナ</h1>
<p>バナナについての解説。</p>

<h2>目次</h2>
<ul>
<li>バナナの特徴</li>
<li>バナナの産地</li>
<li>バナナの保存方法</li>
<li>バナナの栄養素</li>
</ul>

<h2>バナナの特徴</h2>
<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>

<h3>バナナの木</h3>
<p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p>

<h3>バナナの果実</h3>
<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>

<h2>バナナの産地</h2>
<p>バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。</p>

<h2>バナナの保存方法</h2>
<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>

<h2>バナナの栄養素</h2>
<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>

<p>トップに戻る</p>

<p>&copy; copyright 2015 Frouts wo taberu</p>

</body>
</html>
前回も見出しタグを使用しましたが、今回は“<h3>”タグまで使用しています。
見出しタグは同じ番号のものを複数使うとそれぞれ同じランクの見出しになります。
つまり、今回は“<h2>”、“<h3>”を複数使っていますが、それぞれ同じタグがつけられた見出しは同じランクとなります。
他のタグは前回も使っているものです。
わからないものがあればもう一度確認しましょう。
形になったらブラウザで開いてみます。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク