HTML 画像・マルチメディアのチップス

投稿日 2015/01/18

[Home] [Index] 

画像のタイトルを表示するには

figure タグと figcaption タグを使って画像のタイトルを表示することができます。

 詳細..

画像を画面中央に表示するには

画像を画面中央に表示するには img タグを center タグ や style="text-align:center;" を指定した div タグなどで囲います。

<center;><img src="/img/home.png" /></center;>

画像の右に表示される文字列の縦方向の位置を変更するには

画像の右に表示される文字列の縦方向の位置を変更するには、align 属性を指定します。デフォルトは bottom で、middle, top が指定できます。

<img src="/img/home.png" align="middle;" />

画像の周りに文字列を回り込んで表示するには

画像の周りに文字列を回り込んで表示するには、スタイル vertical-align と float を使います。

 詳細..

画像を縮小・拡大するには

width, height 属性を設定すると画像の表示サイズを指定できます。ここで % の指定もできますが、これは元の画像サイズのパーセントではなく画面サイズのパーセントになります。

 詳細..

画像の周りに枠を表示するには

画像の周りに枠を表示するには、border スタイルを設定します。

<img src="/img/bonk.png", style="border: solid 4px red;" />

画像を回転して表示するには

transform スタイルで rotate 関数を使うと画像を回転して表示できます。

 詳細..

画像を変形して表示するには

transform スタイルで rotateX 関数等を使うと画像を3Dで回転して表示できます。結果的にこれが変形したように表示されます。

 詳細..

動画を表示するには

動画を表示するには、video タグを使います。ただし、表示できる動画フォーマットにはブラウザごとに制限があります。

 詳細..

音声を出力するには

音声を出力するには、audio タグを使います。ただし、表示できる音声フォーマットにはブラウザごとに制限があります。

 詳細..

PDF を表示するには

PDF を表示するには、object タグまたは embed タグの type 属性で "application/pdf" を指定します。

<object data="doc1.pdf" type="application/pdf">doc1<object>


Flash を表示するには

Flash を表示するには、object タグまたは embed タグの type 属性で "application/x-shockwave-Flash" を指定します。(ただし、指定しなくてもたいてい表示可能です)

<object data="flash1.swf" type="application/x-shockwave-Flash">flash1<object>


SVG を表示するには

SVG を表示するには、object タグまたは embed タグの type 属性で "image/svg+xml" を指定します。

<object data="flash1.swf" type="application/x-shockwave-Flash">flash1<object>


Canvas を表示して描画を行うには

canvas タグを定義すると、その上に JavaScript で描画することができます。

 詳細..

 

 


 このページの先頭  [Home]

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: TEL 111-222-3333 MAIL sales@xxxxx.jp