みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

html5で右揃え、方法は?

こんにちは。

私はサイトを作っていてhtml5に準拠して作りたいと思っています。ここで下記のようなページがあります。


-----始め-----
今日の天気は雨。ちょっとユウウツです。ですが明日は雪、さらにユウウツになってきます。はぁ、一体どうすれば良いのでしょうか?

<div align="right">2013年2月14日</div>
-----終わり-----

上記の日付を右揃いにしたくて<div>を用いていますが、html5の基本のところでは出来るだけ<div>は使わないように…と書いてありました。ですのでどうしようか悩んでいます。


<span class="sample">2013年2月14日</span>
CSSでsampleを定義する。

上記の方がイイのかなと思いました。ちなみにセクションを分けるような事はしたくないです。この様な選択でよろしいでしょうか?それとも別の方法がありますでしょうか?

お手数をおかけいたしますがよろしくお願いいたします。

投稿日時 - 2013-02-14 20:00:07

QNo.7945289

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.3

>上記によると日付は1つ以下とあります。ただ、私の1つのページには更新のため、
>2つ以上日付を書く可能性があります。
>ですので<time>を使わず、日付を文章の様に扱う事はできないでしょうか?

正確に読みましょう。
____________________________ここから
 pubdate属性を指定すると、
 ^^^^^^^^^^^^^^^^^^^^^^^
 ⇒<time>で示した日時が

  ・親要素の<article>の公開日時であることを表します。
      ~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ・親要素の<article>が存在しない場合には、
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
    文書全体の公開日時を表しますが、この場合には、文書中の<time>は1つ以下でなければなりません。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで

★しかしながら、このpubdate属性は、とうの昔に議論され( http://www.w3.org/wiki/User:Tantekelik/drop_pubdate )、最終的に削除( http://www.w3.org/html/wg/tracker/issues/185 )されましたから、使えません。

 必ず仕様書を確認してください。
 ⇒4.6.10 The time element( http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-time-element )
【引用】____________ここから
Content attributes(含めうる属性):
      Global attributes(グローバル属性)
      datetime
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.6 Text-level semantics ― HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-time-element )]より
 time要素には、グローバル属性とdatetimeしかありません。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
また、
 ⇒The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
で、チェックしてもエラーが出るはずです.(もちろんalign属性もエラーとなったはずです。)

 私がNo.1で示した回答は、それらを踏まえて書きました。
<article>や<section>の親要素があります!!

>ですので<time>を使わず、日付を文章の様に扱う事はできないでしょうか?
 質問を残したまま締め切らないでくださいね。

投稿日時 - 2013-02-15 16:05:17

ANo.2

なぜHTML5にされるか理解されていないようですね。
 HTML5への改訂は、インタラクティブな要素<video>や<canvas>要素やinput要素の拡張と共に、それ以上に、文書の構造化が目的なのです!!
 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
 そして、DIV要素は原則使いません。
【引用】____________ここから
ウェブ制作者は、 div 要素を、他に適切な要素がないときなど、最後の手段の要素として見なすことが、強く推奨されます。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[div 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/div.html )]より

 あくまでDIVはデザインのためではなく、『連続した要素のグループに共通のセマンティクスをマークアップする( http://www.html5.jp/tag/elements/div.html )』事に使用します。
※もちろん、HTML5にalignなんて属性はありません。「著者は使ってはなりません」
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^HTML5の仕様書で明確に否定されています。(ブラウザは対処しなければなりませんが)
 HTML5ではプレゼンテーションに関わるすべての要素と属性はありません。

よってHTML5でしたら
<section>
・・・・
 <p>今日の天気は雨。ちょっとユウウツです。ですが明日は雪、さらにユウウツになってきます。はぁ、一体どうすれば良いのでしょうか?</p>
 <p class="messageTime"><time datetime="2013-2-14">2013年2月14日</time></p>
・・・
</section>
とかになるはずです。内容が<header><section><footer>要素を持つと想定される場合は、それらがなくとも
<article>
 <section>
  <p>
   今日の天気は雨。ちょっとユウウツです。ですが明日は雪、さらにユウウツになってきます。はぁ、一体どうすれば良いのでしょうか?
  </p>
 </section>
 <footer>
  <p class="messageTime"><time datetime="2013-2-14">2013年2月14日</time></p>
 </footer>
</article>
というマークアップになるでしょう。
 その上で、
上の例なら
section p.messageTime{text^align:right;}
下の例なら
article footer p.messageTime{text-align:right;}
とします。

 これで、HTMLは誰(検索エンジンも)が見ても構造が分かりますし、デザインも自由に設定できますし、『div 要素の代わりにもっと適切な要素を使うことは、読者にとってアクセシビリティ向上に、ウェブ制作者にとってメンテナンス性の向上につながります。( http://www.html5.jp/tag/elements/div.html )』

投稿日時 - 2013-02-15 09:48:16

お礼

ORUKA1951さん、ご回答ありがとうございます。

#1の方のところでも書きましたが、

http://www.htmq.com/html5/time.shtml

上記によると日付は1つ以下とあります。ただ、私の1つのページには更新のため、2つ以上日付を書く可能性があります。

ですので<time>を使わず、日付を文章の様に扱う事はできないでしょうか?

投稿日時 - 2013-02-15 11:28:43

あなたにオススメの質問