いざマークアップその2

いざマークアップその2

それでは前回の続きでッ…、

今回はヘッダーとフッターを除いた、コンテンツ内を
分かり易く、テキストのマークアップで表現してみます。

では実際に文章で記載しますと！！

<h1>クリスマス特集</h1>

<article>
クリスマスは英語の「Christmas」ですが、…。
</article>

<h2>クリスマスにオススメラインナップ</h2>

<ul>
<li>奥の松～～～～…</li>
<li>吉乃川にごり酒～～～…</li>
<li>赤城山スパークリング～～～…</li>
<li>菊盛春一輪～～～…</li>
</ul>

<ul>
<li>吉乃川スパークリング～～～～…</li>
<li>誉国光柚子酒～～～…</li>
<li>譽国光梅酒～～～…</li>
<li>木内梅酒～～～…</li>
</ul>

</section>

<h2>クリスマスにオススメラインナップ</h2>

<ul>
<li>吉乃川昌和蔵～～～～…</li>
<li>吉乃川吟醸生～～～…</li>
<li>朝日山ゆく年くる年～～～…</li>
<li>にごり酒セット～～～…</li>
<li>朝日山にごり酒～～～～…</li>
<li>菊盛しぼりたて新酒～～～…</li>
<li>香る、久保田～～～…</li>
<li>群馬泉初しぼり～～～…</li>
</ul>

</section>

<h2>サンタさんがッ選ぶならコレ！</h2>

<ul>
<li>ごうじの恵～～～～…</li>
<li>リーデル酒テイスター～～～…</li>
</ul>

</section>

HTML5を文章でマークアップしますとこんな感じになります。
簡単でしょッ…。

まずは、コレに慣れることが大事で、
この文章構造が、しっかりと作成できないと、
後々SEOにも影響してきてしまいます。

お友達に説明するときなどは、大まかにニュアンスが伝われば、
大よその内容を伝えることが出来ますが、
HTMLで伝える相手は、コンピューターになりますので、
基本を押さえたルールが大事になってきます…。

さらにココから今回は、
多少複雑に見えるかもしれませんが、前回お見せしたソースコードの
装飾であるCSSを削除した、ソースコードを記載してみます…。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クリスマス特集！</title>
</head>
 
<body>

 
<h1><img src="images/christmas_main_title.png" width="100%" alt="クリスマス特集"></h1>

 
<article>
クリスマスは英語の「Christmas」ですが、これは「キリスト（Christ）のミサ（mass）」という意味です。
他の言語で言えば、フランス語の「Noel」とイタリア語の「Natale」は、共に「誕生日」を意味するラテン語から来ています。ドイツ語では「Weihnacht」と呼ばれ、これは「聖夜（キリストが生まれた夜）」という意味です。これでわかりますね。つまり、クリスマスとはイエス・キリストが約2000年前にこの世に生まれたことをお祝いする日なのです。そんなクリスマスに、ちょうどイイお酒を地酒の加登屋スタッフが厳選致しました。地酒専門店ですが、今回は少し変わったお酒のご紹介です。クリスマス・イブに大好きなあの人と一緒にお召し上がり頂ければ幸いです...。</article>

<section> 

<h2><img src="images/con_title1sp.png" width="100%"></h2>
 
<ul>
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/1155470/">
<img src="images/item1.png" width="100%">

<div>
<p>奥の松 純米大吟醸<br>
スパークリング720ml</p>
<p>発泡性のある純米大吟醸の贅沢な香りと味わい。冷やして楽しむ、新しいスパークリング日本酒です。</p>
<p>5,500円（税込）</p>
<p><img src="images/botton.jpg"></p>

</div><!--descrBack-->
</a>
</li>

<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000349/">
<img src="images/item2_2.png" width="100%">

<div>
<p>吉乃川<br>
甘酒仕立てにごり酒720ml</p>
<p>新潟県産の新米を100％の麹でつくった吉乃川こだわりの甘酒をベースに仕立てた冬季限定のにごり酒。</p>
<p>935円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10001941/">
<img src="images/item3.png" width="100%">

<div>
<p>赤城山 純米<br>
ｽﾊﾟｰｸﾘﾝｸﾞ300ml×6本ｾｯﾄ</p>
<p>近藤酒造特有のドライタイプの酒に、炭酸を封じ込めた、のど越し爽やかな和風シャンパンです。</p>
<p>送料無料4,480円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000320/">
<img src="images/item4.png" width="100%">

<div>
<p>菊盛 純米吟醸<br>
にごり酒「春一輪」720ml</p>
<p>酵母が活きた状態で瓶詰。瓶内2次醗酵にによりシャンパン風の炭酸ガスが含まれ、爽やかな風味が特徴。</p>
<p>1,485円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>

</ul>
 
<ul>
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10002143/">
<img src="images/item5.png" width="100%">

<div>
<p>吉乃川「酒蔵の淡雪」<br>
ｽﾊﾟｰｸﾘﾝｸﾞ300ml×5本ｾｯﾄ</p>
<p>果実のような爽やかな香りと、麹本来の甘みを存分に引き出したスパークリングタイプの日本酒です。</p>
<p>送料無料3,360円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>
 
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10002040/">
<img src="images/item6.png" width="100%">
<div>
<p>誉国光 日本酒仕込みの<br>
柚子酒 720ml</p>
<p>日本酒の原酒と群馬産の柚子で造った、ちょっと贅沢な柚子酒です。ゆず本来の旨味と香りがバツグン！</p>
<p>1,650円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000099/">
<img src="images/item7.png" width="100%">
<div>
<p>誉国光 日本酒仕込みの<br>
梅酒 720ml</p>
<p>川場産の梅を酒蔵譽國光の日本酒で仕込みました！口当たり良く甘さが嬉しい味わいに仕上げました。</p>
<p>1,650円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000317/">
<img src="images/item8.png" width="100%">
<div>
<p>日本一に輝いた極上梅酒<br>
木内梅酒 500ml</p>
<p>日本一に選ばれた極上梅酒。自家製スピリッツに梅を漬け込んで造り上げた唯一の味わいと余韻。</p>
<p>1,100円（税込）</p>
<p><img src="images/botton.jpg" /></p>

</div><!--descrBack-->
</a></li>

</ul>

</section> 
 
 
<section> 

<h2><img src="images/con_title2sp.png" width="100%"></h2>
 
<ul>
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000351/">
<img src="images/con2_item1.png" width="100%" alt="" />
<p>年に一度の<br>
限定酒！</p>
<img src="images/con2_item1pc.jpg" width="100%" alt="">
<p><img src="images/syouwa_name.png" /></p>  
<p>吉乃川、年に一度の超限定酒！最高峰の味わいを</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000186/">
<img src="images/con2_item2.png" width="100%" alt="">              
<p>スッキリとした上品な果実を思わせる贅沢な生酒</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/1087013/">
<img src="images/con2_item3.png" width="100%" alt="">              
<p>淡麗辛口の中にも新鮮さと力強さを加えた限定酒！</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10001979/">
<img src="images/con2_item4.png" width="100%" alt="">              
<p>ホワイトクリスマスにはコレ！限定にごり3本セット</p>
</a>
</li>
 
<li class="wow animated fadeIn" data-wow-delay="1.2s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10002159/">
<img src="images/con2_item5.png?=11" width="100%" alt="" />              
<p>久保田で人気の朝日酒造のにごり！朝日山 純米にごり</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10000382/">
<img src="images/con2_item6.png" width="100%" alt="">              
<p>こだわりの菊盛 味わい重視のしぼりたて純米吟醸酒。</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10002152/">
<img class="sp" src="images/con2_item7.png" width="100%" alt="">
<p>人気の久保田<br>限定酒！</p>
<img class="pc" src="images/con2_item7pc.jpg" width="100%" alt="">
<p><img src="images/kubota_name.png" /></p>  
<p>久保田の限定酒！甘味と酸味が調和した上品な味わい</p>
</a>
</li>
 
<li>
<a href="https://item.rakuten.co.jp/sake-kadoya/10001566/">
<img src="images/con2_item8.png" width="100%" alt="">              
<p>搾りたての力強さがギッチリ詰まった「初しぼり」</p>
</a>
</li>
 
</ul>
 
</section>
 
<section>
<h2><img src="images/con_title3sp.png" width="100%"></h2>
 
<ul>
<li><a href="https://www.rakuten.ne.jp/gold/sake-kadoya/kouji_M/"><img src="images/con3_item1.png"></a></li>
<li><a href="https://item.rakuten.co.jp/sake-kadoya/10001704/"><img src="images/con3_item2.png"></a></li>
</ul>
 
</section> 

 
</body>
</html>

前回よりはシンプルですが、まだまだ複雑です…。

ここで押さえておきたいポイントは、<li>タグと<p>タグと<div>タグになります。
このタグは、すべてアウトライン要素ですが、<li>タグの中に入れ子にしても問題ございません。

現段階では、HTMLタグにはアウトライン要素とインライン要素があることを
覚えておきましょう…。
後々、CSSに深く関係してきます。

■CSSとは？
スタイルシートとCSS
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

とりあえず、今回はクリスマス特集のメインコンテンツのデザインが出来上がるまでを
進めていこうと思います。

という事で、続きはまた次回…。