H5 と CSS3 を組み合わせて使用するチュートリアルの例-H5 チュートリアル-php.cn

H5 と CSS3 を組み合わせて使用するチュートリアルの例

Y2J

リリース： 2017-05-24 13:31:03

オリジナル

2450 人が閲覧しました

さて、HTML5 と CSS3 が皆さんを心待ちにしています。本当に私たちのデザインを次のレベルに引き上げられるかどうか見てみましょう

Web デザイナーは HTML4 と CSS2.1 を使用して、いくつかの素晴らしいものを完成させることができます。古い表ベースのレイアウトを使用せずに、ドキュメントの論理構造を完成させ、コンテンツが豊富な Web サイトを作成できます。インラインのタグや
を使用せずに、美しく繊細なスタイルを Web サイトに追加できます。実際、私たちの現在のデザイン能力は、ブラウザー戦争、独自のプロトコル、フラッシュ、スクロール、フラッシュだらけの醜い Web ページの恐ろしい時代から私たちを遠くに連れて行ってくれました。

現在、HTML4 と CSS2.1 が一般的に使用されていますが、さらに改良できる可能性があります。コードを再構築し、ページコードをよりセマンティックにすることができます。ページに美しい外観を与え、よりスケーラブルにするスタイリングコードの量を減らすことができます。さて、HTML5 と CSS3 が本当に私たちのデザインを次のレベルに引き上げることができるかどうかを見てみましょう...

以前は、デザイナーはテーブルベースのセマンティックレイアウトの頻繁な使用とは無関係であることがよくありました。しかし最終的には、Jeffrey Zeldman や Eric Meyer のような革新者のおかげで、賢明なデザイナーはテーブルレイアウトの代わりに比較的セマンティックな

レイアウトを徐々に受け入れ、外部スタイルシートを呼び出すようになりました。しかし、残念ながら、複雑な Web デザインにはさまざまなタグ構造コードが必要であり、これを「

-soup」症候群と呼んでいます。おそらく、次のコードに精通しているかもしれません:

コードは次のとおりです:

 <p class="section"> 
      <p class="article"> 
        <p class="header"> 
            <h1>p Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </p> 
        <p class="content"> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </p> 
        <p class="footer"> 
            <p>Tags: HMTL, code, demo</p> 
        </p> 
      </p> 
      <p class="aside"> 
        <p class="header"> 
            <h1>Tangential Information</h1> 
        </p> 
        <p class="content"> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </p> 
        <p class="footer"> 
            <p>Tags: HMTL, code, demo</p> 
        </p> 
      </p> 
  </p> 
</p>

ログイン後にコピー

これは少し気が進まないものの、上記の例は、HTML4 を使用してコードをコーディングすることを示しています。デザインは複雑で、依然として肥大化しすぎています (実際、xHTML1.1 はそれ以上のものではありません)。しかし、興味深いのは、HTML5 が「

-スープ」症候群を解決し、一連の新しい構造要素を提供してくれることです。これらの新しい HTML5 要素には、無意味な

タグを置き換えるより詳細なセマンティクスがあり、同時に CSS 呼び出しに「自然な」CSS フックを提供します。

以下は HTML5 ソリューションの例です:

コードは次のとおりです:

<section> 
      <article> 
        <header> 
            <h1>p Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </article> 
      <aside> 
        <header> 
            <h1>Tangential Information</h1> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </aside> 
  </section> 
</section>

ログイン後にコピー

ご覧のとおり、HTML5 では、多数の意味のない < をより多くの意味論的に構造化されたコードに置き換えることができます。タグ。p>ラベル。このセマンティクス機能は、Web ページの品質とセマンティクスを向上させるだけでなく、コード内で CSS のために呼び出す必要がある class 属性と id 属性を大幅に削減します。実際、CSS3 ではすべてのクラスと ID を無視することもできます。

クラス属性に別れを告げ、きちんとしたタグを歓迎しましょう

新しいセマンティックタグが豊富な HTML5 と組み合わせることで、CSS3 は Web デザイナーに Web ページに神のような力を提供します。 HTML5 の力により、ドキュメントコードをさらに制御できるようになり、CSS3 の力で制御できるようになります。

高度な CSS セレクターがなくても、class や id などの属性を気にせずに、強力な HTML5 句を通じてさまざまなコンテナーを呼び出すことができます。前の p レイアウトと同様に、CSS で次のように呼び出すことができます: p#news {}

コードは次のとおりです:

p.section {} 
p.article {} 
p.header  {} 
p.content {} 
p.footer  {} 
p.aside  {}

ログイン後にコピー

HTML5 に基づく例を見てみましょう: セクション {}

コードは次のとおりです。以下の通りです:

article {} 
header  {} 
footer  {} 
aside  {}

ログイン後にコピー

これは進歩していますが、まだ対処する必要がある問題がいくつかあります。

の例では、class または id 属性を通じてページ内の要素を呼び出す必要があります。このロジックにより、全体または個別に、ドキュメント内の任意の要素にスタイルを適用できるようになります。たとえば、

の例では、.section 要素と .content 要素を簡単に見つけることができます。ただし、HTML5 の例では、実際のドキュメントには多くのセクション要素が含まれます。実際には、特定の属性セレクターを追加して、これらのさまざまなセクション要素を呼び出すこともできますが、ありがたいことに、現在、さまざまなセクション要素をターゲットにするための高度な CSS セレクターがいくつかありません。

クラスと ID を使用せずに HTML-5 要素を検索する

クラスと ID を使用せずに HTML5 ページ要素のインスタンスを検索する方法を見てみましょう。インスタンス内の要素を検索して識別するために 3 つの CSS セレクターを使用できます。以下の通り:

子孫セレクター: [CSS 2.1]: EF
兄弟セレクター: [CSS 2.1]: E + F
子要素セレクター: [CSS 2.1]: E > F

クラスと ID を使用しないドキュメント内のセクション要素の配置:

最も外側の

要素を見つけます

この例は HTML5 コードの完全なセットではないため、

要素があると仮定します。要素の下にあり、

要素は兄弟要素です。この場合、次のコードのように最も外側の

を見つけることができます。

コードは次のとおりです。

body nav+section {}