ホームページの作り方_手作りホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。Aお問い合わせサブ項目1項目2項目3項目4項目5サブ項目1サブ項目2サブ項目3サブ項目4サブ項目5サブ項目1サブ項目2サブ項目3サブ項目4サブ項目1サブ項目2サブ項目3サブ項目4HTML5への移行法サブ項目1サブ項目2サブ項目3サブ項目4AboutHTML5トップ>HTML5についてHTML5についてHTML4.01やXHTML1.0の上位版として、コンテンツの論理構造をより明確化した画期的な機能を持ったHTML5が出ました。下位互換性を持つこの新しいHTML5が主流となるでしょう。HTML5をサポートするブラウザも増えてきました。ここでは、まずHTML5の概要を見た後、次にHTML4.01とHTML5の違いを見てみましょう。移行する方法を述べてみたいと思います。HTML5の概要HTML4.01やCSS2.1は、サイトの構成つまりレイアウトやその属性に重心が置かれていますが、コンピュータによる情報処理を完全に自動化したい時や、ウェブアプリケーションを作成するには機能不足な面があり、そのために改善策として新しく改良されたものがWHATWGから提唱されたHTML5ということになります。HTML5はブラウザ間の差異をなくし、APIといったWEBアプリケーションの開発に関する機能の標準化も行われているので、実用性の高い規格となっています。HTML5の書き方は、従来のHTMLやXHTMLとほぼ同じか、またはもっとシンプルになっています。HTML5の利用の現状の一例をあげると、ブログ構成ツールとして多くの人々に利用されているWordPressでは、HTML5で記述されたテンプレートが標準搭載されています。Wix.comの無料ホームページでもホームページがHTML5で作られるなど、HTML5への移行は着実に進んでいます。HTML5の策定作業はW3CとWHATWGとの共同で進められています。CSS3の概要CSS3はCSS2.1の機能をそのまま引き継いだ上位版であり、次世代の規格として、W3Cで策定が進められています。特徴としては、多くの新しい機能が追加されており、CSS2.1では画像やJavaScriptなどを利用して表現するしかなかったデザインを、スタイルシートの設定のみで表現できるようになっています。新機能の種類は膨大なため、標準規格もフォントやリスト、テーブル、背景といった機能別に策定が進められているようです。topHTML5の特徴と新機能HTML5には新しいタグが追加されています。その特徴と主たる新機能を以下にあげます。1.セマンティック・マークアップが導入されるセマンティック(semantic)とは、「意味の、意味論的な、語義の」などの意味を持つ形容詞です。セマンティック・マークアップでは、ページ内の情報に対してメタデータ(semantics:意味、語義)を付加します。属性、更には<div>と<span>が用意されましたが、メタデータにルールが無かったために、セマンティック・マークアップとしてはうまく行きませんでした。HTML5では、以下の2つの流れで、セマンティック・マークアップを行います。1つは、タグ<article>や<section>に意味をもたせ、それによってセマンティック・マークアップを行います。2つ目は、属性の形を利用して、管理されたボキャブラリー(語彙)でメタデータを付加します(属性の拡張)。「microdata」という記述方式では、属性の形でメタデータを付加します。http://schema.org/BlogPostingと指定して、ブログ記事であることを示します。すると、子階層では、itemprop属性を利用して、ブログのタイトルや本文などを個別に示すことができるようになります。タイトルの場合は「name」、本文の場合は「articleBody」といった具合です。】これはHTML5で記述したwebページの例です。/>記述方式のことです。HTML5と共に定義されています。/></p><p>ここは、次の段落です。一般的なボキャブラリーについては、検索エンジン大手のGoogle、Microsoft(Bing)、Yahoo!の3社が共同で立ち上げた「Schema.org」(http://schema.org/)で管理されています。したがって、メタデータを付加することで、webページのコンテンツはより精密に分析され、各社のアルゴリズムに従って検索結果に反映されることが期待できます。記述された商品レビューやレシピ情報などを検索結果の表示(スニペット)に反映される様になっています。画像を作って掲載しました。複雑なアニメーションを作りたい時は、Flashなどを活用する必要がありました。HTML5で追加された「canvas要素」を使えば、JavaScriptを使って動的に図形を描画したり動かしたりできます。canvas要素を使う場合は、描画するためにJavaScriptが必要ですが、SVGを使えば、HTMLソース内だけで図形の描画が完結します。動的に生成したり、アニメーションさせる必要がない場合は、SVGの方がソースが短くて済みます。MathMLを記述するためのmath要素を使うと、複雑な数式も表示させられます。3.機能的な入力フォームを作れる。HTML5を利用すると、フォームのフィールド内に入力内容を示唆するプレースホルダを表示したり、ユーザーに入力漏れや入力ミスを知らせることが出来ます。様々な用途に特化したフォームも作れます。「メールアドレス入力フォーム」では、メールアドレス以外の文字列が入力されたらブラウザが警告してくれます。「日付入力フォーム」だったら、input要素のtype属性を「datetime」にすると、カレンダーが表示され、日付を選択することが出来ます。他にも様々な機能があり、実用的なフォームを簡単に作れます。4.スマートフォンやタブレットで最適表示。CSS3のメディアクエリの機能を利用して、ブラウザ画面の横幅に応じて適用するスタイルシートを変更し、スマートフォンやタブレットに最適化したデザインでページを表示できる。5.グラフィカルデザインができる。CSS3の角丸やグラデーション、影(ドロップシャドウ)、透明色、回転などの機能を組み合わせて、ナビゲーションバーや枠のデザインをカスタマイズ出来ます。フレキシブルボックスレイアウトに拠る高さを揃えた段組みの設定も出来ます。映像(動画)を掲載したい時、今まではFlashなどのプラグインを使いましたが、HTML5で追加された「video要素やaudio要素」を使えば、映像(動画)や音声を簡単に再生できます。JavaScriptを使うと様々な制御も出来ます。