[HTML5]ol要素、ul要素、li要素

0
    前回からまたもや時間が空いてしまいました。
    今週は夕方に時間が取れそうなので、HTML5のお勉強を再開です。

     ■ol要素
    これもHTML4でおなじみの要素ですね。
    順番を持つリストです。

    ●startコンテンツ属性
    順序の開始番号を定義します。

    <ol start="3">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    </ol>

    ブラウザでは、

    3.テキスト
    4.テキスト
    5.テキスト

    のように表示されます。
    あと、マイナスもつけることができます。

    <ol start="-3">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    </ol>

    ブラウザでは、

    -3.テキスト
    -2.テキスト
    -1.テキスト

    ●reverseコンテンツ属性
    順番が反対に(数が少なくなって)表示されます。

    <ol reverse="3">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    </ol>

    ブラウザでは、

    3.テキスト
    2.テキスト
    1.テキスト


     ■ul要素
    ul要素は、ol要素とは異なり、順番を持たないリストです。



     ■li要素
    li要素はリストの項目をあらわします。li要素は、ol要素、ul要素、menu要素の中でしか使うことが出来ません。menu要素に関しては、今後勉強していきます。


    ●valueコンテンツ属性
    valueコンテンツ属性は、項目のリスト番号を明示的に指定することが出来ます。
    li要素がol要素の中にあるときに限り、value属性を使用できます。

    <ol>
    <li value ="3">テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    </ol>

    ブラウザでは、

    3.テキスト
    4.テキスト
    5.テキスト

    0やマイナスを指定することも出来ます。

    <ol>
    <li value ="3">テキスト</li>
    <li value ="-3">テキスト</li>
    <li value ="0">テキスト</li>
    </ol>


    ブラウザでは、

    3.テキスト
    -3.テキスト
    0.テキスト
    posted by: vanilla | 15分コーディング | 18:50 | - | - | - |

    [HTML5]pre要素、bloblockquote要素

    0
      今日もHTML4でおなじみの要素をやっていきます。

      ■pre要素
      pre要素は、スペースや改行がそのままの形で表示されます。

      一般的な使われ方としては、HTMLなどのソースコードを表示する場合や、メールの内容をそのまま表示したいときなどに利用します。

      pre要素は、フレージング・コンテンツなので、テキストのみでなく、a要素やcode要素なども入れることができます。


      ■blockquote要素
      blockquote要素は、引用したテキストなどを表します。

      引用元のURLを表示したい場合は、citeコンテンツ属性を使用します。また、blockquote要素のコンテンツ・モデルはフロー・コンテンツなので、h要素やp要素なのも入れることができます。


      <p>
      HTML5とは一体何なのでしょうか?
      </p>
      <blockquote cite="http://ja.wikipedia.org/wiki/HTML5">
      <h2>HTML5</h2>
      <p>
      HTML5 (エイチティーエムエル・ファイブ)とは HTML の 5 回目に当たる大幅な改定版である。表記は HTML と 5 の間にスペースを含まない[1]。XML の文法で記述する場合、XHTML5 と呼ばれる。
      </p>
      <p>
      HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト(草案)が発表された。
      </p>
      2012年3月頃に正式に勧告する予定である[2]。
      </p>
      </blockquote>
      <p>
      引用元:<a href="http://ja.wikipedia.org/">ウィキペディア</a>
      </p>
      posted by: vanilla | 15分コーディング | 21:27 | - | - | - |

      [HTML5]p要素、hr要素、br要素

      0
        HTML4でもおなじみの要素を今日をやります。基本的に使い方は同じなのでさらっとおさらい。

        ■p要素
        p要素は、段落を表します。基本的に文章はp要素で囲むことが多いのではないでしょうかね。


        ■hr要素
        hr要素は、意味のある段落の区切れを表します。例えば、文章の閑話休題の前などに使います。
        注意点としては、section要素の中で使うものであり、section要素を区切るために使用してはいけません。

        以下、正しい使い方。

        <section>
           <p>テキストテキストテキスト</p>
           <hr />
           <p>テキストテキストテキスト</p>
        </section>

        ■br要素
        hr要素は、改行を表します。このあたりは、作文を書くのを同じなのですが、段落中の改行に使います。段落の切れ目にbr要素を使用してはいけません。

        正しい例
        <p>テキストテキストテキスト<br />テキストテキストテキスト</p>

        間違った例
        <p>テキストテキストテキスト</p>
        <br />
        <p>テキストテキストテキスト<br /><br />テキストテキストテキスト</p>
        posted by: vanilla | 15分コーディング | 19:21 | - | - | - |

        [HTML5]footer要素

        0
          勉強できるかと思ったのもつかの間、またもや空いてしまいました。

          ■footer要素
          footer要素は、セクションのフッターを表します。例えば、セクションの著作情報や関連ページへのリンク、著作権表示に使用します。
          footer要素は何回使ってもよいですが、使う場所によって、意味が変わってきます。例えば、ページのフッターとしても使えますし、ブログ記事のフッターにも使えます。

          ページ・フッターの場合、以下のような使い方をします。

          <footer>
             <ul>
                <li><a href="index.html">ホーム</a></li>
                <li><a href="profile.html">このサイトについて</li>
                <li><a href="blog.html">ブログ</li>
                <li><a href="contact.html">お問い合わせ</li>
             </ul>
             <p id="copyright"><small>Copyright (c) 2011 CoolWebWindow All Rught Reserved.</small></p>
          </footer>
          posted by: vanilla | 15分コーディング | 18:32 | - | - | - |

          [HTML5]header要素

          0
            かなりお久しぶりです。仕事は相変わらず忙しいのですが、ちょっと落ち着いてきた感もありますので、暇を見つけてHTML5の勉強を再開します。
            久しぶりなのであまり飛ばさず、ゆっくりやりたいと思います。


            ■header要素
            header要素は、セクションのヘッダーを表します。HTML4(XHTML)で言うと、<div id="header">〜</div>で囲んでいた部分にあたります。これをページ・ヘッダーと言います。ロゴなどを入れる部分ですね。
            また、ページ・ヘッダー以外にも、セクション・ヘッダーと呼ばれる使い方があります。使いどころが難しいのですが、例えば、

            <article>
               <header>
                  <time datetime="2011-03-22">2011年3月22日</time>
                  <h1>ブログの記事タイトル</h1>
               </header>
            ・・・
            </article>

            のようにブログ記事のヘッダーに使ったりします。
            posted by: vanilla | 15分コーディング | 18:59 | - | - | - |

            [HTML5]h1〜h6要素、hgroup要素

            0
              今日は、h要素とhgroup要素について勉強です。

              ■h1〜h6要素(見出し)
              h1〜h6要素はセクションの見出しを表します。数字の部分は見出しのランクを表し、数字が小さいほどランクが高くなります。

              セクショニング・コンテンツとともに利用することもあります。
              その場合、

              <h1>見出しランク1</h1>
              <h2>見出しランク1</h2>
              <h3>見出しランク1</h3>

              というのは、

              <h1>見出しランク1</h1>
              <section>
                 <h1>見出しランク1</h1>
                 <section>
                    <h1>見出しランク1</h1>
                 </section>
              </section>

              というのと、アウトラインは同じになります。


              ■hgroup要素(見出しのグループ)
              hgroup要素は見出しとその小見出しや副題、キャッチフレーズをグループ化するものです。それぞれ見出しレベルが異なるh1〜h6要素だけで構成し、hgroup要素の中にはh1〜h6要素以外の要素が入ってはいけません。

              <section>
                 <hgroup>
                    <h1>見出し<h1>
                    <h2>見出し副題<h2>
                 </hgroup>
                 <p>コンテンツコンテンツコンテンツ</p>
              </section>

              このような場合、セマンティクス上はh2要素は小見出しを表し、アウトラインに現れません。
              hgroup要素で囲んだものは一番レベルの高いものがアウトラインでの見出しとして採用され、それ以外の見出しはアウトラインから除外されます。
              posted by: vanilla | 15分コーディング | 19:19 | - | - | - |

              [HTML5]aside要素

              0
                カレー作ったので、HTML5のお勉強です。

                今日は、aside要素についてです。aside要素はHTML5からの新要素です。結構使いどころが難しい要素です。


                ■aside要素とは
                aside要素は、補足記事、サイドバー、広告などメインのコンテンツとは関連性が薄く切り離すことが出来るものに使用します。また、ナビゲーションのグループをひとつにまとめるのにも使用します。

                しかし、関連性が薄いコンテンツに使用するのであって、メインのコンテンツと全く関連性のないコンテンツにaseide要素は利用できません。


                ■aside要素の使用が適している例
                ・メインコンテンツに関係しないコンテンツに利用する場合
                以下のようなものは、article要素(メインコンテンツ)の外で使用します。
                ◎広告
                ◎ブログロール(他ブログへのリンク、お勧めリンク集のようなもの)


                ・メインコンテンツに関係するコンテンツに利用する場合
                以下のようなものは、article要素(メインコンテンツ)の中で使用します。
                ◎イメージ写真
                ◎補足記事(注釈など)
                ◎プル・クォート(雑誌などに見られる、本文の一部を抜き出して大きくレイアウトして再掲する見出しのようなもので、決して見出しではないもの)
                ◎ショッピングサイトのリコメンドリスト(お勧めの商品や、こんな商品を買った人はこんなものも買っています、といったもの)


                結構、aside要素の使い方は難しいですね・・・。
                posted by: vanilla | 15分コーディング | 20:31 | - | - | - |

                [HTML5]article要素

                0
                  しばらく間が空いてしまいました><
                  先週はCSSコーディングが楽しくなってしまい作業に没頭、昨日は本業が残業で遅くなってしまいできませんでした。

                  今日はarticle要素です。

                  ■article要素
                  article要素は、ブログ記事やニュースサイトの記事など、それだけで独立したコンテンツのことです。また、ブログのコメント欄や掲示板にもarticle要素を使います。

                  使い方としては

                  <article>
                     <header>
                        <h1>ブログタイトル</h1>
                        <p>2010/1/18</p>
                     </header>
                     <p>ブログの本文</p>
                     <footer>
                        <p>コメント</p>
                     </footer>
                  </article>


                  ■article要素の入れ子
                  また、article要素の中にarticle要素を入れる(入れ子をする)ことはできますが、内側のarticle要素のコンテンツは、外側のarticle要素のコンテンツに直接関係のあることでないといけません。例えば、ブログ記事をarticle要素で囲んでさらにコメント部分をarticle要素で囲むなどです。


                  ■article要素のつかいどころ
                  ブログ以外にも、例えばネットショップの商品説明などにも使えます。ただし、何でもかんでもメインコンテンツにarticle要素が使えるわけではなく、例えば、フィードのエントリーとしてふさわしいものしか使えませんので注意です。
                  posted by: vanilla | 15分コーディング | 18:53 | - | - | - |

                  [HTML5]nav要素

                  0
                     今日は、nav要素を見ていきます。

                    ■nav要素とは
                    nav要素もアウトライン・アルゴリズムの中のセクショニング・コンテンツであり、ナビゲーションを形成するセクションを表します。


                    ■nav要素の使い方
                    このnav要素の難しいところは、ナビゲーションなら何でもかんでもnav要素を使ってよいというわけでないことです。サイトやページにとって主要なナビゲーションに使用します。

                    最も適しているのは、ページヘッダーやサイドメニューなどです。

                    逆に使用していけないのは、ページフッターです。仮にページヘッダーやサイドメニューが存在しないで、ページフッターにしかナビゲーションがないとしても、ページフッターのナビゲーションは重要と見なされません。

                    ページ内におけるnav要素の数ですが、主要なナビゲーションにしか使用できないことを考えても、1〜3個が適当でないでしょうか。特に仕様上、数は決まっていません。

                    nav要素を使用するとすれば、ひとつめは、サイトのグローバルナビゲーション(ヘッダーのメニュー)、もうひとつは、ページのメニュー(主にコンテンツのサイドにあると思います)、そうして、もうひとつ使えるとすれば、トピックパス(パンくずリスト)です。


                    ■ナビゲーションのグループ化
                    例えば、サイドメニューでnav要素を使用すると、以下のHTMLはどのようにnav要素をコーディングすべきでしょうか?

                    <h2>アーカイブ<h2>
                    <ul>
                    <li>2011年1月</li>
                    <li>2010年2月</li>
                    <li>2010年3月</li>
                    <li>2010年4月</li>
                    </ul>
                    <h2>カテゴリ<h2>
                    <ul>
                    <li>15分コーディング (10)</li>
                    <li>お知らせ (16)</li>
                    <li>リリース (21)</li>
                    <li>戯言 (21)</li>
                    <li>更新 (25)</li>
                    </ul>

                    ついつい、

                    <nav>
                       <h2>アーカイブ<h2>
                       <ul>
                          <li>2011年1月</li>
                          <li>2010年2月</li>
                          <li>2010年3月</li>
                          <li>2010年4月</li>
                       </ul>
                    </nav>
                    <nav>
                       <h2>カテゴリ<h2>
                       <ul>
                          <li>15分コーディング (10)</li>
                          <li>お知らせ (16)</li>
                          <li>リリース (21)</li>
                          <li>戯言 (21)</li>
                          <li>更新 (25)</li>
                       </ul>
                    </nav>

                    とか、やってしまいがちですが、nav要素がふたつ(もしくはそれ以上)あると、どれが主要なものがわからなくなってしまうので、全てをnav要素を囲みます。ナビゲーションをグループで囲みたい場合は、section要素で囲むのが正解です。

                    <nav>
                       <section>
                          <h2>アーカイブ<h2>
                          <ul>
                             <li>2011年1月</li>
                             <li>2010年2月</li>
                             <li>2010年3月</li>
                             <li>2010年4月</li>
                          </ul>
                       </section>
                       <section>
                       <h2>カテゴリ<h2>
                       <ul>
                          <li>15分コーディング (10)</li>
                          <li>お知らせ (16)</li>
                          <li>リリース (21)</li>
                          <li>戯言 (21)</li>
                          <li>更新 (25)</li>
                       </ul>
                       </section>
                    </nav>


                    ■検索ボックス
                    検索ボックスは、サイトのナビゲーションと言えばそうですよね。だからnav要素で囲むべきでしょうか?ここは意見がわかれそうですね。ただし、HTML5の仕様によれば、nav要素は他のページへのリンクや内部リンクを含んでいなければならないとのことなので、検索ボックスにnav要素を使用するのはちょっと違う気がしますね。

                    The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.


                    ■サイトマップ
                    サイトマップもサイトのナビゲーションと言えるでしょう。しかし、サイトマップそのものは、そのページのメインコンテンツとも言えます。よって、section要素で囲むべきです。

                    posted by: vanilla | 15分コーディング | 19:52 | - | - | - |

                    [HTMl5]section要素

                    0
                      これからHTML5の要素を勉強していくのですが、基本はわかっているので、HTML5で初めて出てきた要素を中心に見ていきます。今回はsection要素です。

                      ■section要素
                      section要素は前回勉強したとおり、アウトライン・アルゴリズムの中のセクショニング・コンテンツに属します。必ず章や節といった単位で使用しなければなりません。HTMLでいうと、見出し(hタグ)と段落(pタグなど)を囲む形で使用します。

                      <section>
                      <h2>見出し</h2>
                      <p>テキストテキスト</p>
                      <h2>見出し</h2>
                      <h3>見出し</h3>
                      <p>テキストテキスト</p>
                      </section>

                      ただし、セクショニング・コンテンツは他にもあります。詳しくは後に勉強しますが、ナビゲーションであればnav要素を、補足記事であればaside要素を。

                      section要素は、メインコンテンツ内で利用するのが最も多いのではないかと思います。
                      posted by: vanilla | 15分コーディング | 18:37 | - | - | - |