HTML5 CSS3応用の詳しい解説_html5チュートリアルスキル

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

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

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

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

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

コードをコピーします

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

Div スープのデモンストレーション

何とか、なんとか。

;

ローレム イプサム テキスト何とか何とか。

ロレム イプサム テキスト何とか何とか。

タグ: HMTL、コード、デモ

class=" 脇">

content"> ;

Lorem ipsum テキストなんとかなんとかなんとか。

Lorem ipsum テキストなんとか何とかなんとか。

Lorem ipsum テキストなんとかなんとか。

タグ: HMTL、コード、デモ

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

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

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

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

コードをコピーします

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

Div スープのデモンストレーション

2009 年 7 月 11 日に投稿

Lorem ipsum テキストなんとかなんとかなんとか。

Lorem ipsum テキストなんとかなんとかなんとか。

Lorem ipsum テキストなんとかなんとかなんとか。

セクション>

タグ: HMTL、コード、デモ

接線情報

Lorem ipsum テキストなんとかなんとかなんとか。

Lorem ipsum テキストなんとかなんとかなんとか。

Lorem ipsum テキストなんとかなんとかなんとか。

セクション>

タグ: HMTL、コード、デモ

セクション>

私たちが考えているように、HTML5 は、これらの大量の無意味な

の代わりに、より多くのより高度にカスタマイズされた構造化コード フレームを使用する可能性があります。语义また、CSS に必須であった class と id プロパティも大幅に削減されています。実際、CSS3 はすべての class と id を盗用することもできます。

跟クラス属性说再见，欢迎整洁的标签

HTML5 には、豊富な文言認識が組み込まれており、CSS3 は Web デザインのネットワークに一般的な機能を提供します。HTML5 の能力により、より多くの文コードの制御が可能になりますCSS3 のエネルギー、我们の制御权は無穷大に考慮します!

これらの高レベルの CSS セレクタがない場合でも、この種のプロパティをクラスや ID に関係なく、さまざまなコンテナを使用して大規模な HTML5 条項で調整できます。 イメージ通りの DIV レイアウトで、CSS でこのように調整できる可能性があります: div #ニュース {}

复制代码代码如下:

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

我们再来看看HTML5 ベースの例: セクション {}

复制代代码如下:

記事 {}
ヘッダー {}
フッター {}
サイド {}


これは進歩ですが、解決する必要がある問題がまだいくつかあります。

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

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

HTML-5 要素の検索にクラスと ID を使用しないでください

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

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

クラスと ID を使用せずにセクション要素をドキュメント内に配置する方法を見てみましょう:

最も外側の

要素を見つけます

この例は HTML5 コードの完全なセットではないことを考慮して、 要素の下に

要素があり、

要素が兄弟要素であると仮定します。この場合、次のコードに示すように、最も外側の

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

コードをコピーしますコードは次のとおりです:

ボディ ナビゲーション セクション {}

次の

要素を見つけます

最も外側の

要素の下にある唯一の直接のサブセット要素として、この

要素は次のように配置されます。

コードをコピー

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

section>section {}

要素

を配置します。

要素を見つける方法はたくさんありますが、最も簡単な方法はもちろん子孫セレクターです。

コードをコピー

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

セクション セクション 記事 {}

、

、および

要素の配置

これらの 3 つの要素はそれぞれ 2 つの場所にあり、1 つは

要素内にあり、もう 1 つは

要素内にあります。この違いにより、各要素を簡単に見つけることができます。

コードをコピー

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

記事ヘッダー {}

記事セクション {}

記事フッター {}



または一緒に定義します:

コードをコピーします

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

セクション セクション ヘッダー {}

セクション セクション セクション {}

セクション セクション フッター {}



これまで、CSS2.1 セレクターを使用してすべてのクラスと ID を除外してきました。では、なぜ依然として CSS3 を使用する必要があるのでしょうか?質問してよかったです...

CSS3 を使用した HTML5 要素の高度な配置

CSS2.1 セレクターを使用してすべてのクラスと ID を除外しましたが、解決するために CSS3 の高度なセレクターを必要とするさらに複雑な状況が明らかに存在します。次の例を完成させて、無駄な class 属性や id 属性を使用せずに CSS3 を使用してページ要素を配置する方法を学びましょう。

一意の投稿 (投稿) ID を使用してすべての投稿を検索します

Wordpress は、ID を含む各投稿のソース コード出力を提供します。この情報は通常、ナビゲーションやマテリアルの意図の理解に使用されますが、CSS3 はこれらの一意の ID を利用してこれらの投稿のスタイルを設定できます。もちろん、通常どおり、各投稿に class="post" 属性を追加することもできますが、それでは今回の演習の目的が損なわれてしまいます (さらに、面白くなくなります)。以下に示すように、「部分文字列一致セレクター」を使用すると、すべてのログとそのさまざまな要素を見つけることができます。

コードをコピー

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

article[id*=post-] {} /* すべてのログを検索*/
article[id*=post-] header h1 {} /* 検索all logs h1 tag*/
article[id*=post-] section p {} /* すべてのログで p タグを見つけます*/

コメント要素とその子を同じ方法で配置することができます。

コードをコピーします

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

article[id*=comment] -] { } /* すべてのコメントを検索*/
article[id*=comment-] header h1 {} /* すべてのコメント内の h1 タグを検索*/
article[id*=comment-] セクション p { } / * すべてのコメント内の p タグを見つけます*/

指定されたセクションまたは記事を検索します

HTML 5 には、

要素や

で構成されるブログが多数あります。特定の

または

要素を見つけるには、強力な ":nth-child" セレクターを使用する必要があります。

コードをコピーしますコードは次のとおりです。

section:nth-child( 1) { } /* 最初の

を選択します */
article:nth-child(1) {} /* 最初の
section:nth-child(2) { } /* 2 番目の を選択します */
article:nth-child(2) {} /* 2 番目の

を選択します

同様に、「:nth-last-child」セレクターを使用して、いくつかの要素を逆の順序で見つけることができます。

コードをコピーしますコードは次のとおりです:

section:nth-last- child(1 ) {} /* 最後のを選択します */

article:nth-last-child(1) {} /* 最後のを選択します

section:nth-last-child(2) {} /* 最後から 2 番目のセクションを選択します

*/
article:nth-last-child(2) {} /* 最後から 2 番目のセクションを選択します */

より多くの方法を使用して特定の要素を選択します

HTML5 で特定の要素 (ヘッダー、セクション、フッターなど) を選択するもう 1 つの方法は、「:only-of-type」セレクターを利用することです。これらの HTML5 要素は多くの場所で複数回出現することが多いため、この方法は、親要素の下に 1 回だけ出現するタグを見つけたい場合に便利です。たとえば、選択したいのは、次のコードのような特定の要素内の唯一の要素です:

コードをコピーしますコードは次のとおりです。

>

セクション> とセクション要素

次の 1 行セレクターを使用するだけです:

コードをコピーします

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

section>section:only-タイプの {}

繰り返しますが、各要素に ID 属性を頑固に追加することはできますが、構造をプレゼンテーションから切り離すことにより、コードの拡張性、保守性、絶対的な単純性が失われます。 CSS3 を使用すると、ID 属性とクラス属性を持たないほぼすべてのページ要素を迅速かつ簡単に見つけることができます。

概要 時間が経つにつれて、HTML5 と CSS3 はますます普及し、Web デザイナーに無限のエネルギーをもたらし、Web フロントエンドをさらに改善すると信じています。 （文／鬼武者）