※回答一覧

 出題者   カテゴリ   作成日

赤間　公太郎		 ウェブ制作担当 2015-01-29 16:02:31
 問題   ヒント   回答数 
■html5の文章構造化

section,article,navなどhtml5ではマークアップを厳密化し、より分かりやすい文章にすることを考えています。
xhtmlで記述された下の文章をhtml5に移行するときにあなたはどのようなマークアップを行いますか?

文章をそのままコピーして、追加・修正するマークアップを入れてもらってもいいですし、該当箇所だけを修正してもらっても構いません。

==▼ここから▼==

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTMLサンプル</title>
<meta name="author" content="MR税理士事務所" />
<meta name="description" content="仙台を中心に法人の会計・財務をサポートします。" />
<meta name="keywords" content="税理士,帳簿作成,会計" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/common.css" type="text/css" rel="stylesheet" media="all" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
<!--[if lt IE 9]><script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1 id="logo"><a href="/"><img src="img/site-logo.png" alt="MR税理士事務所" /></a></h1>
<p>お電話からのお問い合わせ　<span>022-000-0000</span>(受付時間　9:00?18:00　土日祝除く)</p>
<!--/#header--></div>
<div id="global-navi">
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/info/">事務所案内</a></li>
<li><a href="/business/">業務案内</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/blog/">社員ブログ</a></li>
</ul>
<!--/#global-navi--></div>
<div id="contents">
<div id="main">
<h1>税理のプロフェッショナルとして様々なサービスをご提供します</h1>
<p>事業を存続・発展させていくには、様々な経営判断を下さなければなりません。<br />
判断を下すには、会計と税務 の視点が不可欠です。最良の判断を会計・税務の専門家としてご提供します。</p>
<h2>充実のサービスラインナップ</h2>
<p>法人様、経営者様、個人事業主様、お客様のご要望にお応えする2つのサービスをご用意しています。</p>
<div class="service">
<h3>会計・税務サービス</h3>
<p><img src="img/photo1.jpg" alt="" /></p>
<p>税務全般にわたり適切なアドバイスをします。</p>
<ul>
<li>証憑書類の整理・保存の指導</li>
<li>各種帳簿作成の指導</li>
<li>帳簿作成の代行</li>
<li>帳簿のチェック</li>
<li>決算事前対策</li>
<li>決算書・申告書作成</li>
<li>税務調査立会い</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div class="service">
<h3>経営支援サービス</h3>
<p><img src="img/photo2.jpg" alt="" /></p>
<p>経営計画者の作成をメインに貴社の経営改善に対して積極的に関与させていただきます。</p>
<ul>
<li>経営計画書を作成</li>
<li>経営会議支援</li>
<li>経営相談</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service--></div>
<div id="news">
<h1>新着情報</h1>
<dl>
<dt>15/1/14</dt>
<dd><a href="/blog/">お客様事例その2</a></dd>
<dt>15/1/7</dt>
<dd><a href="/blog/">お客様事例その1</a></dd>
<dt>15/1/5</dt>
<dd><a href="/blog/">あけましておめでとうございます!</a></dd>
</dl>
<!--/#news--></div>
<!--/#main--></div>
<div id="sidebar">
<ul>
<li><a href="/info/"><img src="img/banner1.png" alt="バナー1" /></a></li>
<li><a href="/contact/"><img src="img/banner2.png" alt="バナー2" /></a></li>
<li><a href="/blog/"><img src="img/banner3.png" alt="バナー3" /></a></li>
</ul>
<!--/#sidebar--></div>
<!--/#contents--></div>
<div id="footer">
<p>〒980-0014　仙台市青葉区本町1-2-3-4-5　TEL/022-123-4567　FAX/022-234-5678</p>
<p class="copyright">&copy; 2015 MR税理士事務所</p>
<!--/#footer--></div>
<!--/#container--></div>
</body>
</html>

==▲ここまで▲==		 h1が複数ある箇所については、xhtmlではh1の数についての言及がなく任意判断で使用できることがあります。html5では明確に複数h1の使用がOKとなりました。今回はあくまで仕様にそったコーディングについての課題ですが、もしSEOを意識したマークアップを考えられる場合は、その旨書いて頂いても構いません。 4

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
0 yukko
html5の文章構造化について勉強不足でよくわからないので、今回の皆さんの回答を参考に勉強をさせていただきます。
0 kamino
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8" />
<title>XHTMLサンプル</title>
<meta name="author" content="MR税理士事務所" />
<meta name="description" content="仙台を中心に法人の会計・財務をサポートします。" />
<meta name="keywords" content="税理士,帳簿作成,会計" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/common.css" type="text/css" rel="stylesheet" media="all" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
<!--[if lt IE 9]><script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>

<body>
<div id="container">
<header>
<div id="header">
<h1 id="logo"><a href="/"><img src="img/site-logo.png" alt="MR税理士事務所" /></a></h1>
<p>お電話からのお問い合わせ　<span>022-000-0000</span>(受付時間　9:00?18:00　土日祝除く)</p>
<!--/#header-->
</div>
<nav>
<div id="global-navi">
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/info/">事務所案内</a></li>
<li><a href="/business/">業務案内</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/blog/">社員ブログ</a></li>
</ul>
<!--/#global-navi-->
</div>
</nav>
</header>

<div id="contents">
<div id="main">
<article>
<h1>税理のプロフェッショナルとして様々なサービスをご提供します</h1>
<p>事業を存続・発展させていくには、様々な経営判断を下さなければなりません。<br />
判断を下すには、会計と税務 の視点が不可欠です。最良の判断を会計・税務の専門家としてご提供します。</p>
</article>
<article>
<h2>充実のサービスラインナップ</h2>
<p>法人様、経営者様、個人事業主様、お客様のご要望にお応えする2つのサービスをご用意しています。</p>
</article>

<section>
<div class="service">
<h3>会計・税務サービス</h3>
<p><img src="img/photo1.jpg" alt="" /></p>
<p>税務全般にわたり適切なアドバイスをします。</p>
<ul>
<li>証憑書類の整理・保存の指導</li>
<li>各種帳簿作成の指導</li>
<li>帳簿作成の代行</li>
<li>帳簿のチェック</li>
<li>決算事前対策</li>
<li>決算書・申告書作成</li>
<li>税務調査立会い</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service-->
</div>
</section>
<section>
<div class="service">
<h3>経営支援サービス</h3>
<p><img src="img/photo2.jpg" alt="" /></p>
<p>経営計画者の作成をメインに貴社の経営改善に対して積極的に関与させていただきます。</p>
<ul>
<li>経営計画書を作成</li>
<li>経営会議支援</li>
<li>経営相談</li>
</ul>
<p class="more"><a href="/business/">詳細はこちらから</a></p>
<!--/.service-->
</div>
</section>
<section>
<div id="news">
<h1>新着情報</h1>
<dl>
<dt>15/1/14</dt>
<dd><a href="/blog/">お客様事例その2</a></dd>
<dt>15/1/7</dt>
<dd><a href="/blog/">お客様事例その1</a></dd>
<dt>15/1/5</dt>
<dd><a href="/blog/">あけましておめでとうございます!</a></dd>
</dl>
<!--/#news-->
</div>
<!--/#main-->
</section>
</div>
<section>
<div id="sidebar">
<ul>
<li><a href="/info/"><img src="img/banner1.png" alt="バナー1" /></a></li>
<li><a href="/contact/"><img src="img/banner2.png" alt="バナー2" /></a></li>
<li><a href="/blog/"><img src="img/banner3.png" alt="バナー3" /></a></li>
</ul>
<!--/#sidebar-->
</div>
</section>
<!--/#contents-->
</div>
<footer>
<div id="footer">
<p>〒980-0014　仙台市青葉区本町1-2-3-4-5　TEL/022-123-4567　FAX/022-234-5678</p>
<p class="copyright">&copy; 2015 MR税理士事務所</p>
<!--/#footer--></div>
</footer>
<!--/#container--></div>
</body>
</html>		 銅 (赤間　公太郎)
丁寧に書き換えてくださり、ありがとうございます。nav要素やheader要素など、主要なHTML5のタグをしっかり押さえていただいています。 HTML5を取り入れる際の身近なポイントは、セマンティックな新要素の利用です。 kaminoさんの回答では、XHTML時代の<div id="global-navi">の部分の外側に<nav>を使用していますが、そもそもこのdivは、装飾のため・内容のグループ区分のために使用していたものです。nav要素の記述により、<div id=" global-navi ">～</div>はあえて利用しなくてもよくなりますので、除外してもよいでしょう。 <div id="global-navi">以外にも、もともと装飾やレイアウトのためだけに記述しているdivも多数ありますので、 たとえば今回の課題例文であれば<div id="service">を<section class="service">にするなど、section要素に装飾を追記するのもよさそうです。

0 gabber1090
ドキュメントタイプと文字コードを以下に変更
<!doctype html>
<meta charset=utf-8>

以下の不要なmetaタグを削除
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

imgなど空要素の「/」を削除
<p><img src=img/photo1.jpg alt=""/>

以下の不要な閉じタグを削除
</body>
</html>		 注目 (赤間　公太郎)
gabber1090さんの回答では、JavaScript,CSSの呼び込みのためのmetaタグを削除し、値の引用符や終了タグを除外しています。いずれもHTML5では省略が可能ですが明示していても間違いではありません。 HTML5においては、終了タグを書いてはいけない空要素（meta、br、linkなど）と、終了タグを省略可能な要素（p、dt、dd、liなど）と、完全にタグを省略できる要素（head、body、htmlなど）があります。省略については、非常にデリケートな部分だと考えます。 HTML4、XHTMLから移行するHTML5に関しては、特に従来のXHTMLの厳格な文法を引き継ぐ傾向があり、省略できるタグがあったとしても、明示的に記述するケースがまだまだ多いものです。例えば、自身のWebサイトを自分だけで管理する場合は、このような省略の記述は特に問題ありません。しかしながら実務においては、他者との合同制作、既存Webサイトの使用、コーディングのガイドラインやレギュレーションといったさまざまなルールが存在します。 HTML5をテクニカルに表現することも大事なのですが、実務で利用する環境にすりあわせることは、ビジネス上とても大事なことです。このあたりは、どのようなレギュレーションなのかをしっかり把握した上で、採用決定としたい部分ですね。注目度の高い回答をありがとうございます。

0 chichichi
<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8"><title></title><meta name="author" 略>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="">
<script src="#.js" type="text/javascript" ></script>
<link href="x.css" rel="stylesheet" media="all">
<link href="#.css" rel="stylesheet" media="all">
<!--[if lt IE 9]><script src="IE9.js"></script><![endif]-->
</head>
<body>
<div id="container">
<header id="header"><p><a href="tel:0220000000">022-000-0000</a>(<time>9:00</time>～<time>18:00</time></p></header>
<nav id="global-navi"><ul><li></li></ul></nav>
<div id="contents">
<article id="main"><p><br></p>
<section class="service"></section>
<section class="service"></section>
<section id="news"><dl><dt><time>2015-01-14</time></dt></dl></section>
</article>
<aside id="sidebar"></aside>
</div>
<footer id="footer"><p>TEL/<a href="tel:0221234567">022-123-4567</a></p><p class="copyright"><small></small></p></footer>
</div>
</body></html>		 銅 (赤間　公太郎)
<meta name="viewport" content="">はスマートフォン向けの指定ですので、HTML5だからといって必須なわけではなく、要件定義によって導入するようにします。 time要素を利用する際に、気を付けたいポイントがあります。 Webブラウザに正確な日時を伝えるためのタグです。 <time datetime="">　とすることで、文中のとあるテキストに対して、24時間表記（グレゴリオ暦の日付）の正確な日時を与えることができます。 これは数字での日時が出たときだけではなく、例えば、 <time datetime="2015-02-20">昨日</time>牛タンを食べました。 といったように、とある言葉に対して、その正確な日時を意味づけするのにも活用できます。 この例では、日付のテキストが書き換えられていますが、要件定義によっては、HTML側の表記を自由に変更できないことも多々あります。 日付の表記は「平成27年1月1日」「2015/1/1」「2015年1月1日」などバリエーションがあります。これ自体のフォーマットを変更するには、現場判断だけではできないことも出てくるでしょう。 chichichiさんの例 書き換え前：<dt>15/1/14</dt> 書き換え後：<dt><time>2015-01-14</time></dt> 今回、日付のフォーマットが変わっていますので、これをタグだけで解決するには、 書き換え後：<dt><time datetime="2015-01-14">15/1/14</time></dt> とするのがベターかと考えます。 time要素については、以下のWebサイトに詳しい解説が記載されています。 http://reference.hyper-text.org/html5/element/time/