いざマークアップその1

いざマークアップその1

前回はワイヤーフレームについて記載いたしました…。
ワイヤフレーム、慣れてしまえば簡単ですが、
始めのうちは、なかなか難しい作業になります。

そこで、今回のマークアップでは、
前回書き込みました、やる事を完全に決めてから行う！

コレを分かり易く行うには、どうしたものかと考えてみました。

そこで、すでにある私がXHTMLで作成した、クリスマス特集の、
コンテンツをHTML5で、マークアップを初めの段階から作成し直しながら
説明したいと思います。

まずは既存の
・クリスマス特集
https://www.rakuten.ne.jp/gold/sake-kadoya/christmas/

↑コチラのページの、ヘッダーとフッターを除いた
メインコンテンツのHTMLを下記にHTML5でそのまま記載します。

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

<body>
<div id="wrapper">
<div id="main_title">

<div class="cont">

<div id="main_Ttitle" class="wow animated zoomInDown" data-wow-duration="2.0s">
<p><img src="images/christmas_main_title.png" width="100%" /></p>
<p id="sub_title"><img src="images/christmas_sub_title.png" width="100%" /></p>

</div>

<p class="img"><img src="images/christmas_main1.jpg" width="100%" alt="クリスマス特集" /></p>
<p id="hiiragi" class="wow animated bounceInDown" data-wow-duration="2.0s" data-wow-delay="1.5s"><img src="images/hiiragi.png?=123" /></p>


<p id="main_description" class="typist"></p>
</div><!--.cont-->

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

<div id="contents1">
<div class="con_title"><img src="images/con_title1sp.png" width="100%" /></div>

<ul class="clearfix">
<li class="wow animated fadeInDown">
<a href="https://item.rakuten.co.jp/sake-kadoya/1155470/">
<img src="images/item1.png" width="100%" />
<div class="descrBack">
<div class="item_name description">奥の松 純米大吟醸<br />
スパークリング720ml</div>
<div class="item_description description">発泡性のある純米大吟醸の贅沢な香りと味わい。冷やして楽しむ、新しいスパークリング日本酒です。</div>
<div class="item_price align_r description">5,500円（税込）</div>
<div class="align_r description"><img src="images/botton.jpg" /></div></div><!--descrBack-->
</a></li>


<li class="wow animated fadeInDown" data-wow-delay="0.5s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10000349/">
<img src="images/item2_2.png" width="100%" />
<div class="descrBack">
<div class="item_name description">吉乃川<br />
甘酒仕立てにごり酒720ml</div>
<div class="item_description description">
新潟県産の新米を100％の麹でつくった吉乃川こだわりの甘酒をベースに仕立てた冬季限定のにごり酒。</div>
<div class="item_price align_r description">935円（税込）</div>
<div class="align_r description"><img src="images/botton.jpg" /></div></div><!--descrBack-->
</a></li>

<li class="wow animated fadeInDown" data-wow-delay="1.0s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10001941/">
<img src="images/item3.png" width="100%" />
<div class="descrBack">
<div class="item_name description">赤城山 純米<br />
ｽﾊﾟｰｸﾘﾝｸﾞ300ml×6本ｾｯﾄ</div>
<div class="item_description description">近藤酒造特有のドライタイプの酒に、炭酸を封じ込めた、のど越し爽やかな和風シャンパンです。</div>
<div class="item_price align_r description">送料無料4,480円（税込）</div>
<div class="align_r description"><img src="images/botton.jpg" /></div></div><!--descrBack-->
</a></li>

<li class="wow animated fadeInDown" data-wow-delay="1.5s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10000320/">
<img src="images/item4.png" width="100%" />
<div class="descrBack">
<div class="item_name description">菊盛 純米吟醸<br />
にごり酒「春一輪」720ml</div>
<div class="item_description description">酵母が活きた状態で瓶詰。瓶内2次醗酵にによりシャンパン風の炭酸ガスが含まれ、爽やかな風味が特徴。</div>
<div class="item_price align_r description">1,485円（税込）</div>
<div class="align_r description"><img src="images/botton.jpg" /></div></div><!--descrBack-->
</a></li>
</ul>

<ul class="clearfix" id="con1second">
<li class="wow animated swing" data-wow-duration="2.0s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10002143/">
<img class="yuki" src="images/item5.png" width="100%" />
<div class="descrBack">
<div class="item_name description">吉乃川「酒蔵の淡雪」<br />
ｽﾊﾟｰｸﾘﾝｸﾞ300ml×5本ｾｯﾄ</div>
<div class="item_description description">果実のような爽やかな香りと、麹本来の甘みを存分に引き出したスパークリングタイプの日本酒です。</div>
<div class="item_price align_r description">送料無料3,360円（税込）</div>
<div class="align_r description"><img src="images/botton.jpg" /></div></div><!--descrBack-->
</a></li>


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

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

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


<div id="contents2">
<div class="con_title"><img src="images/con_title2sp.png" width="100%" /></div>

<ul class="clearfix">
<li class="wow animated fadeInDown m_over">
<a href="https://item.rakuten.co.jp/sake-kadoya/10000351/">
<img class="sp" src="images/con2_item1.png" width="100%" alt="" /><div class="mask"><div class="caption">年に一度の<br />
限定酒！</div></div><img class="pc" src="images/con2_item1pc.jpg" width="100%" alt="" />
<div class="name"><img src="images/syouwa_name.png?=1" /></div>  
<p>吉乃川、年に一度の超限定酒！最高峰の味わいを</p></a>
</li>

<li class="wow animated fadeIn" data-wow-delay="0.3s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10000186/">
<img src="images/con2_item2.png" width="100%" alt="" />              
<p>スッキリとした上品な果実を思わせる贅沢な生酒</p></a>
</li>

<li class="wow animated fadeIn" data-wow-delay="0.6s">
<a href="https://item.rakuten.co.jp/sake-kadoya/1087013/">
<img src="images/con2_item3.png" width="100%" alt="" />              
<p>淡麗辛口の中にも新鮮さと力強さを加えた限定酒！</p></a>
</li>

<li class="wow animated fadeIn" data-wow-delay="0.9s">
<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 class="wow animated fadeIn" data-wow-delay="1.5s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10000382/">
<img src="images/con2_item6.png" width="100%" alt="" />              
<p>こだわりの菊盛 味わい重視のしぼりたて純米吟醸酒。</p></a>
</li>

<li class="wow animated fadeInDown m_over" data-wow-delay="1.8s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10002152/">
<img class="sp" src="images/con2_item7.png" width="100%" alt="" /><div class="mask"><div class="caption">人気の久保田<br />
限定酒！</div></div><img class="pc" src="images/con2_item7pc.jpg" width="100%" alt="" />
<div class="name"><img src="images/kubota_name.png" /></div>  
<p>久保田の限定酒！甘味と酸味が調和した上品な味わい</p></a>
</li>

<li class="wow animated fadeIn" data-wow-delay="2.1s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10001566/">
<img src="images/con2_item8.png" width="100%" alt="" />              
<p>搾りたての力強さがギッチリ詰まった「初しぼり」</p></a>
</li>

</ul>

</div><!--contents2-->
<div id="contents3">
<div class="con_title"><img src="images/con_title3sp.png" width="100%" /></div>

<ul class="clearfix">
<li class="wow animated zoomInUp" data-wow-delay="2.0s" data-wow-duration="1.5s">
<a href="https://www.rakuten.ne.jp/gold/sake-kadoya/kouji_M/"><img src="images/con3_item1.png" /></a></li>
<li class="wow animated zoomInUp" data-wow-delay="2.3s" data-wow-duration="1.5s">
<a href="https://item.rakuten.co.jp/sake-kadoya/10001704/"><img src="images/con3_item2.png" /></a></li>
</ul>
<p id="sori_santa" class="wow animated fadeOutRightBig" data-wow-delay="1.0s" data-wow-duration="2.0s"><img src="images/santa.png?=1" /></p>

</div><!--contents3-->
</div><!--wrapper-->

</body>
</html>

現段階では、CSS3などでアニメーションを付ける為に、
複数のIDやClassが、記載されています。

また、XHTMLで作成しているため、
HTMLでのマークアップがDivタグが、多用されていることが見て取れるかともいます。

HTML5で、マークアップをし直すと、
Divタグが減り、HTMLタグが増えてくるかと思います。

この辺りは、一からマークアップの手順を考えて、
初心者の方であれば、文章に置き換えてからマークアップを行うと、
適切なマークアップが可能かと思います。

そこで、順をおってマークアップのご説明。

・テキスト文章を分かり易くHTML構造に置き換える

・実際にHTMLで、マークアップを行う

コレでページ自体は完成いたしませんが、
一気にCSS、ジャバスクリプトなども記載すると、
難易度がグッとアップしてしまいますので、あえて分けて記載していきます。

それでは、また次回…。