HTML5 / CSS3ウェブページ構築の初心者ガイド

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

HTML5とCSS3はたった2年でウェブを席巻しました。それらの前には、WebデザイナーがWebページを作成する方法に多くの変更されたセマンティクスがありました。アニメーションのような機能.

ほとんどの開発者はまだ可能性があるが複雑なデモを紹介するようですが、HTML5 / CSS3は実際にはロケット科学ではありません。学習リソースや無料のHTML5テンプレートのようなボーナスはあなたのために利用可能ですので、あなたのHTML5の旅をキックスタートするためにこの機会を利用してください!

HTML4とHTML5の間の変更

HTML5に切り替えることがなぜさらに重要なのか疑問に思うかもしれません。無数の理由がありますが、主に 世界のインターネット標準と連携する 他のすべてのデザイナーのように。このようにしてあなたはより多くのサポートをオンラインで見つけるでしょう Webサイトは現代のブラウザで正しくレンダリングされます 絶えず改良されているどれ.

（画像ソース：W3C）

HTML4とHTML5の比較は表面レベルで見つけるのは難しいです。新しいHTML5ドラフトを見ることで、注目の要素と修正されたエラー処理手順を見ることができます。ブラウザ開発者は、デフォルトのWebページをレンダリングするための新しい仕様を特に楽しんできました。.

HTML5からさらに得られるのは、最新のWebブラウザの変換です。これらの新しい仕様により、Webは全体として アプリケーションプラットフォーム HTML（特にHTML5）、CSS、およびJavaScriptを基盤とする。また、このシステムはエレガントに Webデザイナーと開発者の間に調和を生み出す すべてのブラウザが従うべき共通の標準を設定することによって.

さらに多くの要素が作成されました 新時代のデジタルメディアを代表する. これらは含まれていますそしてこれはマルチメディアサポートには非常に大きなものです。ブラウザによっては、フォーム検証を直接HTMLで完成させることができます。まだ機能を認識していない多くのソフトウェア開発者がいるので、jQueryがまだ強く必要とされていることは確かです。タグのリストが必要な場合は、このW3Schoolsのテーブルをチェックして、タグの詳細を確認してください。.

裸のHTML5スケルトン

トピックを理解する最も簡単な方法は、 その中に飛び込む. だから私はWebページのための非常に基本的なHTML5スケルトンテンプレートを構築するつもりです。いくつかの新しい要素を含めましたが、後で分類したいと思います。.

   私たちの最初のHTML5ページ       ようこそ、一人で!
   ホーム
 私たちに関しては
 連絡先
 
 
 
   ここにいくつかのコンテンツ.
 
  しかし、ここでもいくつか!
 
 
  ここにいくつかの著作権と法的通知。多分©記号を少し使う.

すぐにこれは標準のHTML4 Webページとそれほど変わらない。あなたが気づくかもしれないことは私達が これ以上自己終了タグを含める必要はありません. それはあなたの開発プロジェクトから多くの時間を節約するので、これは本当に素晴らしいニュースです.

知らない人のために、XHTMLドラフトには、ラベル付けされた多くの要素がありました。 自己閉鎖. 別の終了タグを別の場所に含める必要がないことを示すために、これらの演算子は「大なり」演算子の前にスラッシュで終わります。例として、メタキーワードタグを作成するためにあなたは使うでしょう閉鎖の必要なしに他の場所で.

この規則は依然としてHTML 5に適用されます。しかし今、あなたは 余分なスラッシュは必要ない! 完全に有効, XHTML / XML標準を使い続けることは許可されていますが。すべての規格準拠ブラウザでは、両方の要素が同じようにレンダリングされます。.

ページ領域を定義する

私たちの新しいコードの大部分はそれほど衝撃的であってはいけません。私たちの Doctypeは陽気に簡単です これまで以上に, 過剰なボディ属性は不要, 見出しの情報には明確なラベルが付けられています。先に進む私たちの中のコンテンツにあなたの注意を集中したいのですがタグ。これにはメインページのすべての構造が含まれています。意図的にいくつかの素敵なHTML5タグを使用して、自分の作品にそれらを含める方法を示します。.

まず、ページ全体が 内にカプセル化 div タグ. これにIDというラベルを付けました ラッパー, それはそれが私達のウェブサイト全体のコンテンツを包むことを意味します。これは 最大幅または位置の内容を設定するのに役立ちます 画面上で周り。次に、ページを3つのコア要素に分割しました - 1つ

, コア

, そして短い

. カスタムヘッダー領域内に、ページのタイトルとナビゲーションアイテムを簡単に表示するように追加しました。

ラッパーとしてのタグ.

今のために

のIDを持つコアセカンダリを適用しました クリアフィックス. この機能はそれを可能にします 内側に2列自由に浮かぶ そして私達は落とされた内容か奇妙な現象を経験しない。そして当然のことながら、内側に私は2つ配置しました

それぞれ私たちのメインコンテンツエリアとサイドバーを含むタグ。私たちはCSSスタイルを使ってそれらをバラバラにするつもりです。.

同様に静かな フッター タグページ内でこのコンテンツを区別するのに適しています。内部に私はいくつかの著作権と所有権の情報を含むかもしれない厳粛な段落を置いた。しかし、あなたのページへの二次リンクのように、もう少し多くのコンテンツを含めることをお勧めします。.

クリエイティブCSS3の魔法使い

この基本的なステンシルレイアウトを完成させるために、いくつかのCSSスタイルを使うことができます。基本的なHTML5テンプレートに私は 外部CSSスタイルシート そのため、コード領域を分離しておくことができます。この意志 多くの混乱を解消する 長い目で見れば、あなたのページとスタイルは異なるページで実行され始めます。.

（画像ソース：W3C）

それで私はCSSに多くの時間を費やしたことはありませんが、いくつかのきちんとした効果を紹介するのに十分です。最初に私はいくつか使用しました ボーダー半径の設定 非常にクールなナビゲーションリンクホバー効果を構築するため。テンプレートコードでもこれと同じ効果をターゲットにできます。CSSドキュメントに次の行を追加するだけです。.

 nav display：block;マージンボトム：10px。  nav ul list-style：none;フォントサイズ：14ピクセル。  nav ul li display：inline;; display：block;;フロート：左。パディング：3px 6px。カラー：＃575c7d。テキスト装飾：なし。フォントの太さ：太字。 背景：＃ホバー背景：＃deff90;カラー：＃485e0f。 -webkit-border-radius：3px。 -moz-border-radius：3ピクセル。 border-radius：3ピクセル。パディング：3px 6px。マージン：0。テキスト装飾：なし。

もう一つの良い効果は clearfixスタイル. これはCSS3のまったく新しい概念ではありませんが、標準に準拠したWebページを構築するために重要です。コンテンツを並べて表示しようとしているときには、バグの多いポジショニンググリッチが発生することがよくあります。これは、フローティングマージンのオフセット幅と絶対幅の設定エラーが原因です。.

この概念は少々混乱を招くように思えるかもしれません、そして私は手助けするために以下の小さなコードを加えました。基本的には2つをターゲットにしています

要素, ＃左 そして ＃右 ページの横に対応します。私はそれぞれを一定の幅で左に浮かせるように設定したので、それらは互いに隣同士に積み重ねられます。私達の容器以来 div＃core 含まれています クリアフィックス クラス、これはすべての内部コンテンツができることを意味します 自由に動き回る その後、余分なスペースを自動的にクリアします.

/ * page core * / div＃core 表示：ブロック;クリア：両方マージンボトム：20px。 section＃left width：550px;フロート：左。マージン：0 15px。 section＃right float：left;幅：300ピクセル。  / * clearfix * / .clearfix：content： "。";の後。表示ブロック;クリア：両方可視性：隠されています。行の高さ：0。身長：0。 .clearfix display：inline-block;;  html [xmlns] .clearfix display：block;; * html .clearfix 身長：1％;

これらのコードは、始めるのが簡単です。それらは以前に構築された私達のHTML5テンプレートコードにも関係しているので、これは簡単なやり方です。しかし、本物のウェブ中毒者になると、より多くのCSS3機能を検討することになるでしょう。.

あまり知られていないCSS3の構文

完全なHTML5 / CSS3ウェブページを構築するためには、もっと複雑なスタイルシートを使い始めるでしょう。多くの設計者は、以下のような簡略コードを知っています。 フォント：プロパティこれらはCSS2以前の標準でもあるからです。.

しかし、CSS3には、多くの設計者が考えていない新しいプロパティがいくつかあります。これらの多くは美学だけではなく、アニメーション効果も含まれています。以下は、あなたが遊ぶことを検討するかもしれない特性のいくつかを説明する短いリストです。あなたが迷っていると感じたら構文例のためにグーグルを試みなさい.

ボックスシャドウ：ページ要素にシャドウ効果を追加します。あなたは左/右、上/下、影のぼかしと色の位置を設定する4つのパラメータを与えられます。ボックスの影は元の幅/高さに対する追加のスペースとは見なされないことに注意してください。.
テキスト影：ページテキストの後ろに美しい影を付けます。正しい効果であなたの手紙はページから飛び出して見えるかもしれません.
ボーダー半径：丸みを帯びた角が標準になるまでに長い時間がかかりました。数年前、多くのWeb 2.0設計者が丸みを帯びた角に合わせるためにCSSで背景画像を作成していました。しかしCSS3 border-radiusを使うと、どの要素上の各ボーダーのカーブも操作することができます.
不透明度：多くのデザイナーが考えていない単純な性質のようです。不透明度は、0から1.0までの範囲の単一の数値入力（0％ - 100％）を想定しています。この効果は、ホバーアニメーションとして最適に機能します。.
@フォントフェイス：複雑なCSSスタイルとタイポグラフィのもう1つの美しい例です。 Webデザイナーは、CSSドキュメント内で変数として定義することで、独自のカスタムフォントを使用できるようになりました.
ボックスサイズ：デフォルトでは、ボックスサイズはすべての要素を以下のように設定します。 コンテンツボックス. これは、幅、余白、および境界がすべて最大幅に含まれることを意味します。しかしに設定 ボーダーボックス あなたは最大幅（例えば20px）を定義することができ、追加されたパディング/ボーダーはこれにそれら自身を含むでしょう、それでオブジェクトの内側のスペースを取り除きます。あなたがその機知を習得したらそれは素晴らしい財産です.

これらの施設はすべて、それぞれ一長一短があります。それらすべてをあなたのWebページに詰め込むことはお勧めしません。しかし 練習はあなたに明確な考え方を与えるでしょう 簡単にそれ以上のウェブサイトを開発することに入るため.

言及する価値があるもう1つの追加構文の中核部分 属性セレクタ. CSS3を使えば、あなたは今できます HTML属性に基づいてスタイルを定義する （type、href、titleなど）さらに特定の値を指定することもできます。たとえば、定義済みのtitle属性を持つリンクをターゲットにして、それらに一連の背景アイコンを付けることができます。.

 ul li [title ^ = "ico"] 背景：url（ 'my-icon.gif'）;

私が含まれていることに気付いた場合 キャレット記号 等号の前にこれは 接頭辞を持つすべてのリスト項目を定義します, イコ. または、キャレット（^）をドル記号（$）に置き換えて、タイトルのサフィックス領域をターゲットにすることもできます。このようにして、CSS3はタイトルを 'first ico'または 'book ico'に設定できる背景画像を追加することを知っています。興味があれば、属性セレクタについてもう少し読んでください。.

すべてを一緒に入れて

HTML 5とCSS 3のWebページの中心にあるのは 単純さ. Web開発者は、より短期間で、より少ないストレスで、創造性の高いWebサイトを構築しようとしています。 HTML5の新機能はこれを可能にしています。そして新しいCSS3セレクターとプロパティーのいくつかを使用することは長期的にあなたに利点を与えるでしょう.

（画像ソース：W3C）

しかし、あなたもそうあるべきです エンドユーザーを考慮する. Webページを構築するプロセスは、Webサイトを一般公開した後に最終的に終了します。あなたの目標は アクセスしやすい情報で観客を喜ばせてください, 人間の読者だけでなく、 検索エンジンクローラとインデックスボット. セマンティクスは、ページレイアウトを一貫して分割し、新しいHTML 5レイアウト要素を含めるように大きく進化しました。最近のすべてのWebブラウザに合わせて小さなナビゲーションセクションとフッターセクションを作成するのがこれまでになく簡単になりました。.

HTML5 Webページを快適に作成できるようになったら、おそらくページアニメーションを調べ始めるでしょう。 JavaScriptとAJAXのマイナーな効果でさえも大部分が可能です。 ユーザーエクスペリエンスとサイトのパフォーマンスを向上させる. これは記事の範囲の一部ではありませんが、時間があればjQueryを使って試してみることをお勧めします。オープンソースライブラリは驚くべきものであり、HTML5ページ要素の上にラピッドプロトタイピングを可能にします.

追加のリソース

世界中のブロガーが、HTML5とCSS3の新しいトレンドについて議論し、一般にリソースを共有しています。時が変わり、Webコミュニティも一緒に変わりつつあります。あなたは勉強して小さな興味を築くためにいくつかのニッチ分野を考慮すべきです.

あなたが楽しむかもしれないいくつかの追加のリスト、記事とチュートリアルは以下の通りです。私はリストをHTML 5とCSS 3のリソースに分割する自由を取った。あなたがそこに探しているものに基づいて、皆のためにここにいくつかのトピックがあるはずです。オンラインでダウンロードできる無料のHTMLテーマの簡単なギャラリーもお楽しみください。!

HTML5

HTML5：15感動的な実験
HTML5：19ウェブアプリケーション
HTML5：48のFlash-Killingデモの可能性
AjaxベースのHTML5 / CSS3お問い合わせフォームを作成する

CSS3

CSS3：初心者向けガイド
CSS3：検索フィールドの作成
CSS3：疑似クラスの使用
CSS3：30+便利なチュートリアル

ボーナス：HTML5テンプレート＆テーマ

デザイン会社

HTML5の素晴らしい世界に足を踏み入れる準備はできましたか？これは完全に無料のHTML5テンプレートです。jQueryスクリプトとカスタムフォントが用意されており、自由にテストできます。!

HTML5 / CSS3テーマ

このHTML5 / CSS3をテーマにしたテーマは、あなた自身のための広範な機能を備えたHTML5ブログを構築するか、単にコードを詳しく調べてそれについて何かを学ぶための共通のブログのレイアウトデザインを持っています.

ようこ

Yokoは、CSS3メディアクエリに基づくレスポンシブレイアウトを使用した柔軟性について話している現代のWordPressテーマです。これは、さまざまな画面サイズに調整してそれについて知ることができる機能です。!

グレー

あなたが古典的なWordPressブログのスタイルを好むのなら、Grayはおそらく、border-radius、複数の背景、text-shadowなどのCSS3機能を内蔵しているでしょう。.

ソーシャルメディアブラウザ、Flockの初心者向けガイド

iOS開発の初心者向けガイドThe Interface - Part I

Windows 7 Media Centerをセットアップするための初心者ガイド