Thu, March 23, 2017

YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法

 

YoutubeやHTML5video等の埋め込み動画のサイズをcssを使って動的にリサイズ/可変にするトリックをご紹介します。 解像度の違うスマートフォン(iPhone / Android)、IEにも適用されるようです。...

フォントサイズの指定はCSS3の「rem」が便利そう

 

フォントサイズの指定は、相対指定のem、%、絶対指定のpxが一般的ですが、 CSS3の新しい「rem」という単位を使った指定方法をご紹介します。 emや%の相対指定の場合、親要素の影響を受け、子要素は複利計算されてしまい...

CSS3を使ったクリエイティブなテキストエフェクトチュートリアル集「8 Examples Of Stunning CSS3 Text Effects」

 

CSS3を使ったテキストエフェクトのご紹介です。 エンボスやグラデーションなど、Photoshopで作成したような効果を実現しています。 それぞれチュートリアルも用意されてあるので、見てみてください。 ■How to C...

text-shadowのカラー指定はRGBaでの指定が良いらしい

 

A CSS3 Tipのエンリーからのご紹介。 「text-shadow」プロパティをサポートしているブラウザは色指定に「RGBa」が使えます。 「RGBa」の色指定でアルファを使用すれば、どのような背景でもtext-sh...

YouTubeの動画を紹介する際に、HTML5プレーヤーでの再生へリンクさせる方法

 

URLの最後に「&html5=True」を指定します。 例:http://www.youtube.com/watch?v=sGA9JaIa7WM&feature=&html5=True   ちなみ...

YouTubeビデオをHTML5 VideoとFlashの両方に対応させる方法

 

まだ試験段階ではあるようですが、iframeを使うようですね。 ■埋め込みコードサンプル この新しい埋め込みコードを使用すると、Flashがインストールされている場合はFlashで再生し、「Firefox」「Chrome...

IE6、IE7、IE8でもCSS3を使用可能にするbehaviorスクリプト CSS3 PIE

 

以前紹介したie-css3.htcよりも対応するプロパティが多く、シャドウも奇麗に表示されるようです。 サポートしているプロパティは以下になります。 ・border-radius ・box-shadow ・border-...

HTML5 VideoでiPadをデジタルサイネージに活用

 

ASCII.jpから、iPadをデジタルサイネージとして使用するという興味深いチュートリアルをご紹介します。 デジタルサイネージというのは室内・屋外に電子機器を利用して掲示する広告(電子看板)のことです。 チュートリアル...

HTML5、CSS3を使ったドロップダウンメニュー

 

HTML5、CSS3を使ったドロップダウンメニューを2つご紹介します。 ■Creating a pure CSS dropdown menu JavaScriptは使用しておらずCSSのみで実装されています。 チュートリ...

Formの入力エラーチェック required pattern

 

HTML5ではformに関する新しい機能も追加されました。今回はその中でrequired属性とpattern属性を紹介したいと思います。 これらの属性を使うと、フォームの入力エラーチェックを簡単に実装できます。 ■req...

HTML5で追加されたFormの新属性 placeholder autofocus

 

HTML5ではformに関する新しい機能も追加されました。今回はその中でautofocus属性とplaceholder属性を紹介したいと思います。 ■autofocus属性 autofocus属性をあらかじめ指定しておく...

floatを使わずにカラムレイアウトを簡単に実現できるCSS3 display: box;が便利そう

 

CSS Lectureからマルチカラムレイアウトで使えるCSS3 box 系プロパティのまとめをご紹介します。 ■display: box; の使い方 対応ブラウザ:Safari、Google Chrome、Firefo...

Page 1 of 212»