各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

ウェブページ上に新しい機能を付加できるHTML5要素

  • publish_advertise
2013/02/21

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、HTML5の概要を簡単にご紹介いたしました。今回は、HTML5で新しく追加された要素(タグ)のうち、ウェブページ上に新しい機能を付加できる要素をご紹介いたします。従来なら、FlashやSilverlightなどのプラグインを活用しなければ実現できなかった機能が、簡単にウェブページ上に作れる仕様になっています。

 


■音を鳴らすaudio要素


 


  <audio src=”sample.mp3″ controls></audio>


 

audio要素を使うと、MP3形式などの音声(音楽)ファイルをウェブページ上で簡単に再生できます。

必要に応じて再生用の操作パネルを表示できるほか、スクリプトを使って制御することもできます。ブラウザによって再生可能な対応形式が異なるため、複数の音声ファイルを列挙しておき、再生可能な形式を自動選択させるような仕組みもあります。

 


■映像を表示するvideo要素


 


 <video id=”video” width=”400″ height=”300″ src=”sample.mp4″ controls></video>


 

video要素を使うと、MPEG4などの映像(動画)ファイルをウェブページ上で簡単に再生できます。

ブラウザ上には、映像自体のほかに、再生・停止などの操作パネルも表示でき、スクリプトを使って制御することもできます。

 


■スクリプトで自由に描画できる領域を作るcanvas要素


 


 <canvas id=”imagebox” width=”400″ height=”300″> ~ </canvas>


 

canvas要素を使うと、スクリプトを使って自由に図形やグラフ・絵などを描画できる「カンバス」をウェブページ内に作れます。

スクリプトを使って描画するため、「修正が容易」・「動的に生成できる」などのメリットがあります。

 


■図形をテキストだけで記述できるsvg要素


 


 <svg><circle cx=”100″ cy=”70″ r=”50″ fill=”skyblue” /></svg>


 

svg要素を使うと、画像もスクリプトも使うことなく、HTMLソースだけで様々な図形を描画できます。

上記の例は、「X座標100、Y座標70の位置を中心にして、半径50pxの円を、空色で描画する」という意味になります。簡単な図形なら、いちいち画像ファイルを作らなくても表示できるため、便利です。画像の内部に描き込まれた文字を、検索サイトのクローラーが読むことはできません。

簡単な図形が画像ファイルを作らずにウェブページ上に描画できるなら、文字を画像化する必要性も減らせるかも知れません。

画像化せずに済んだ文字列は、当然クローラーにも読めますから、SEO面でも役立つでしょう。

 

次回は、HTML5で追加された新しい要素(タグ)のうち、HTMLソースに意味を付加できる要素について、いくつかをご紹介いたします。

 


【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  続きを読む>>
続編
2013.02.14
HTML5とは? 新しく追加された要素(タグ)とその用途
2013.02.28
HTMLソースに意味を付加できる新しいHTML5要素

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る