ジョージの毎日

一日一日が特別な一日

夏休み自由研究パート9 「文章の聖地パート2」

こんにちは。ジョージです。

f:id:kaseinosyounen:20160724182717j:plain

今日はいよいよ普通の文章にいろいろつけ足していきます。

 

それではタグなどを使って整地する文章をタグなしで一度書きます。

ちなみに文章のお題は「グルメサイト」でやります。

 

おいしいごはん!

ーホーム

ーこのサイトについて

ープロフィール

 

今月のおいしいごはん

おいしいごはん#12

至極のTKG

 

新着のおいしいごはん

 

おいしいごはん#32

はもしゃぶ

 

おいしいごはん#31

スリランカカレー

 

おすすめレシピ本

-BOOK1

-BOOK2

-BOOK3

 

このサイトは@georgeによって運営されております。

 

 

以上で今回いじる文なのですが、

これで終了・・・。だと思いますよね?

これをそのままメモ帳に書けば

終了だと思いますよね?

これをそのままウェブページに移すとこうなります。

 

おいしいごはん!ーホームーこのサイトについてープロフィール今月のおいしいごはんおいしいごはん#12至極のTKG新着のおいしいごはんおいしいごはん#32はもしゃぶおいしいごはん#31スリランカカレーおすすめレシピ本-BOOK1-BOOK2-BOOK3このサイトは@georgeによって運営されております。

 

となります。

おかしいですよねww

まあ「文章の聖地」というものがなかったらこれもおかしくなくなるんですけど

HTML文章にはこの問題を解決するタグがあります。

っていうのを昨日やりました。

(正確には昨日書いたところのもっと精密に説明したvr.)

昨日の記事

 

 

それでは実際にやっていきましょう。

まず最初に昨日やった<header>と<nav>を使います。

この二つの意味は、<body>内の一番上のところという意味。

次に<nav>はそのサイトのナビゲーション。用は説明。

それでは最初のところをいじります。

 

<body>

<header>

おいしいごはん

<nav>

ーホーム

ーこのサイトについて

ープロフィール

</nav>

</header>

 

</body>

 

となります。これでウェブサイトには

 

おいしいごはん

 

ーホーム

ーこのサイトについて

ープロフィール

 

っとなります。

 

 

 

 

 

っとでも思っていたのか!!

すいません。一度いってみたかっただけなので

気にしないでください。

 

一行が終わったよ。とかそういう意味をつけるときは

<p>タグで囲まないといけないのを忘れないでください。

 

<body>

<header>

<p>おいしいごはん</p>

<nav>

<p>―ホーム</p>

<p>ーこのサイトについて</p>

<p>ープロフィール</p>

</header>

</nav>

</body>

 

ちなみに題名の「おいしいごはん」を大きくしたいときは

<h1>で囲ってあげてください。

 

<h1>おいしいごはん</h1>

 

わかりにくくいろんなことを一気に言ってしまってすいません。

まとめると今の題名のところで使うタグは

①、<header>

②、<nav>

③、<p>

④、<h・・・>(h1からh6まであるので文字の大きさは六段階選べます。)

 

です。この先の文で使うのは③と④番です。

 

続いてまあ・・・。<header>(頭)で一番上はやったので次は一番下をやっていきます。

なので<footer>(足)の部分。このサイトは・・・。のところを

やっていきます。

 

ここも簡単です。

 

<footer>

<p>このサイトは@georgeによって運営されております</p>

</footer>

 

<footer>は<header>と同じで一つ違うところは文章全体の下の部分に

書くことだけです。

あとははじめと同じで<p>で囲んだだけです。

 

次に副次的な内容の”おすすめレシピ本”に手を加えます。

どこが副次的なのかというと、このグルメサイトが本当に

あったとしたらこのおすすめレシピ本は広告だからです。

それでは今まで通りやっていきましょう。

副次的なものを囲むときは<aside>タグをつけます。

 

<aside>

<h2><p>おすすめレシピ本</p></h2>

<p>BOOK1</p>

<p>BOOK2</p>

<p>BOOK3</p>

</aside>

 

これでばっちりです。

もういちいち説明はいいですよね?

今回変わったのは<aside>と<h1>だったのが<h2>になっただけです。

 

次についに本文に入ります。

次は、<section>タグを使います。

忘れていると思いますが、パート8で

習ったものです。やっと今使う時が来たみたいです。

 

<section>

<h2><p>おいしいごはん</p></h2>

<p>今月のおいしいごはん#12</p>

<p>至極のTKG</p>

</section>

 

こうやって使います。

今頃ですが、どんなにメモ帳の中で行を変えても<p>に囲まれたところが

一行として認識されるので自分でどんなに長い一行も書けます。

 

次に本文のスリランカカレーも同じ要領で囲っていきます。

 

<section>

<h2><p>新着のおいしいごはん</p></h2>

<p>おいしいごはん#32</p>

<p>はもしゃぶ</p>

<p>おいしいごはん</p>

<p>スリランカカレー</p>

</section>

 

 これでスリランカカレーも終わりです。

とこれで終わりです。

それじゃあいままで書いたものをそのまま

書いていきます。

 

<body>

<header>

<h1><p>おいしいごはん</p></h1>

<nav>

<p>ホーム</p>

<p>このサイトについて</p>

<p>プロフィール</p>

</nav>

</header>

 

<section>

<h2><p>今月のおいしいごはん</p></h2>

<p>おいしいごはん</p>

<p>至極のTKG</p>

</section>

 

<section>

<h2><p>新着のおいしいごはん</p></h2>

<p>おいしいごはん#32</p>

<p>はもしゃぶ</p>

<pre>

<p>おいしいごはん#31</p>

<p>スリランカカレー</p>

</section>

 

<aside>

<h2><p>おすすめレシピ本</p></h2>

<p>BOOK1</p>

<p>BOOK2</p>

<p>BOOK3</p>

</aside>

 

<footer>

このサイトは@georgeによって運営されています

</footer>

</body>

 

とてもながいですがこれでようやく今月のおいしいごはん。

だのいろいろと書く場所を作っただけなので

これでまだまだ始まりの始まりの始まりってところです。

それでは明日はまあ自分のなかでの

今月のおいしいごはんとかを記入していきたいと思います。

 

それじゃあまた。