HTML5 / CSS3を使い始める:ヒント、ショーケース、コーディングサンプル

HTML5の人気が高まり、Webインターフェイス全体が進化し始めています。一部のWeb開発者でさえ、HTM5要素と視覚効果はFlashに匹敵すると述べています。新しいスクリプトスタイルは理解しやすく、Webインターフェイスを拡張する機能は無限です。とにかく、このHTML5はどれほど興味深いか?


この記事は、HTML5について知っておくべきこと、そして最も重要なヒントについて読者に洞察を与えることを目的としています & 軽量で魅力的でインタラクティブなHTML5ページを作成するコツ.

1. HTML5の基本

HTML5

HTML5でこのトピックの詳細を始める前に、まず現在のブラウザーを確認することをお勧めします。多くのブラウザーはまだ開発モード(HTML5に対応するための機能強化)であるため、ここに記載されている一部の機能はサポートできない可能性があります.

確認するための簡単なヒントを次に示します ブラウザの互換性.

特定のブラウザの制限をさらに理解するには、以下を参照してください。 ここに.

2.テキスト効果– HTML5にシャドウとアドバンステキスト効果を追加する

HTML5のテキスト効果

テキストの基本的な影の効果

これは、通常の見出しをかっこいいテキストに変換する最も単純な1つの文字列コードです。シャドウ効果を過小評価しないでください。この類似の効果を作成するには、WebデザイナーがPhotoshopで画像編集の複数のステップを実行する必要があります。そして今必要なのは、たった1行のコードです。影の距離、色はあなたの心の内容に変えることができます.

コーディングサンプル

#shadow h1 {
テキストシャドウ:0px 1px 1px rgba(0,0,0、.2);
}

事前の火のような効果に関するテキスト

次のヒントは、HTML5コーディングをさらにクールに見えるテキストに調整する方法を示すことです。十分に実験したり、他の例を見つけたりした場合、効果をカスタマイズする可能性は無限大です。注:この例は、画像編集ソフトウェアによって作成されたものではありません。 HTML5の単なるコード.

コーディングサンプル

#fire h1 {
text-align:中央;
マージン:200px自動;
フォントファミリー: "リーグゴシック", 宅配便;
font-size:200px;テキスト変換:大文字;
色:#fff;
テキストの影:0 0 20px#fefcc9、10px -10px 30px#feec85、-20px -20px 40px#ffae34、20px -40px 50px#ec760c、-20px -60px 60px#cd4606、0 -80px 70px#973716、10px -90px 80px#451b0e;
}

他の素晴らしい例: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5の角丸

HTML5の角丸

CSSの導入以来、HTML5でのWebページレイアウトのスタイリングはそれほど簡単ではありませんでした。さらに、レイアウト要素の角を丸くすることもできます。これを想像してください。背景画像をスライスしたり、乱雑な画像の断片を削除したりする必要はありません。これはウェブデザイナーに多くの歓声をもたらします.

コーディングサンプル

div {
ボーダー:2pxソリッド#434343;
パディング:10px;
背景:#e3e3e3;
-moz-border-radius:10px;
-webkit-border-radius:10px;
幅:500px;
}

注:MozはMozillaを意味し、webkitはSafariおよびChrome用です.

他の素晴らしい例: http://fjd1.com/roundcorner.html

4. HTML5のスケーラブルベクターグラフィック(SVG)

HTML 5のチュートリアル、ガイド、サンプル

スケーラブルベクターグラフィックまたは通称(SVG)は、XMLテキストファイルで定義される2次元ベクターグラフィックです。つまり、DNAはXMLテキストファイルに基づいているため、Webプラットフォームで作成または編集できます。つまり、スケールを簡単に設定でき、検索エンジンは画像を読み取って理解できる.

サンプルコード

その他の素晴らしい例:

5. HTML5に動画ファイルを埋め込む

HTML5のビデオ

HTML5の機能を紹介する興味深い部分がもう1つあります。オンラインのビデオの多くは、通常、Flashの形式でWebユーザーに提示されます。最近まで、HTML5へのビデオの埋め込みは勢いを増しており(YouTubeは良い例です)、Flashは徐々にその魅力を失っています。どうしてこんなことに?モバイルユーザー。ビデオをiPhoneとAndroidの両方の携帯電話で再生できるようにしたい場合は、HTML5が前進する方法です.

ビデオを埋め込むには、現在、さまざまなブラウザーでサポートされている3つの形式があることを知っている必要があります。 .mp4(H.264 + AAC)、. ogg(Theora + Vorbis)、. webm(VP8 + Vorbis)

サンプルコード

他の素晴らしい例: https://www.html5rocks.com/en/tutorials/video/basics/

6. HTML5のスライドプレゼンテーション

HTML 5のチュートリアル、ガイド、サンプル

Powerpointは、スライドプレゼンテーションに関連する同義語の名前です。しかし、なぜWeb視聴者向けのスライドを作成できるオフラインプレゼンテーションに制限されるのでしょうか。 HTML5は、遷移とナビゲーションメニューを備えた非常に強力なプレゼンテーションスライドを作成するのに役立ちました。最高の部分は、プレゼンテーションに3D変換を適用することもできます.

サンプルコード

pre {
トランジション:すべて1のイーズインアウト。
}

pre:hover {
background-color:#F2F5FE;
border-color:黒;
}

div {
変換:rotate3d(1,1,0、45deg);
}

その他の素晴らしい例:

7. HTML5の編集可能なコンテンツ

HTML 5のチュートリアル、ガイド、サンプル

静的テキストは、柔軟性と動的性が世界を支配する時代の古い学校です。 HTML5では、テキストエディターなしでWebユーザーが編集できるようにするテキスト領域を定義できます。.

サンプルコード

このコンテンツは編集可能です!

他の素晴らしい例: http://html5demos.com/contenteditable

8. HTML5のインタラクティブなWebキャンバス

HTML 5のチュートリアル、ガイド、サンプル

HTML5でのSVGに加えて、キャンバスはこれまでWebで起こった次善の策です。キャンバスを使用すると、Flashの助けを借りずに、インタラクティブ性をレベル全体にもたらす2次元形状をレンダリングできます.

それにもかかわらず、驚くべきアニメーションの相互作用を作成するHTML5の単純なコーディングは、ここで言及する価値があります。.

他の素晴らしい例: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. HTML5でのドラッグアンドドロップ

HTML 5のチュートリアル、ガイド、サンプル

ドラッグアンドドロップ(DnDとも呼ばれる)は、HTML5で使用できるもう1つの優れた機能です。良い例は、GmailでのGoogleによる実装です。 HTML5でサポートされているブラウザーを使用している場合は、コンピューターからファイルをドラッグして、メッセージ作成ウィンドウにドロップするだけです。自動的に添付ファイルとして追加されます。なんてクール?

サンプルコード(ネイティブDnD)

document.addEventListener( ‘dragstart’、function(event){
event.dataTransfer.setData( ‘text’、 ‘C​​ustomized text’);
event.dataTransfer.effectAllowed = ‘コピー’;
}、false);

他の素晴らしい例: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. HTML5の純粋なCSSデータチャート

HTML 5のチュートリアル、ガイド、サンプル

HTML5以前は、HTMLのコーディングを使用するだけでは、プレゼンテーション可能なグラフを作成することもできませんでした。さらに、データ値を変更してグラフに反映するのは簡単な作業ではありません。ここでも、HTML5が役立ちます。 CSSと組み合わせることで、Microsoft Excelを恥ずべきものにする絶対に美しいグラフを作成できます。コードはシンプルで、チャートに最適な色と効果をカスタマイズするために時間を費やすだけです.

他の素晴らしい例: http://cssglobe.com/pure-css-data-chart/

HTML 5を十分に入手できない?

私たちもそうです!トピックについて詳しくは、こちらをご覧ください。.

* HTML 5 Webサイトの30の非常にクールな例
* HTML 5入門
* 2012年にHTML 5チュートリアルを読む必要があります
* HTML 5を学ぶ:10の必読レッスン

また、チェックアウト  Robin NixonによるこのHTML 5クラッシュコース. Robin NixonはLearning PHP、MySQL、JavaScriptの作者です。このコースでは、初心者がHTML5で知っておく必要のあるほとんどすべての内容を扱います-基本的なHTMLコーディング、描画用のHTML5キャンバス、ジオロケーション、ローカルストレージ、HTML5オーディオとビデオなど.

元の記事は最初に公開されました WHSRブログ;現在、BuildThis.ioのスタッフによって管理および更新されています.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map