QR Code Business Card

CSS

Youtubeなど埋め込み動画サイズをスマホの幅ピッタリにする

Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする

 Youtubeなどの動画を埋め込むとき、動画のページで表示サイズを決めてからiframeタグを取得します。そのままPC用のサイトに貼り付ければとても見やすいです。でもレスポンシブでスマホに表示すると、サイズが固定されたままなので、動画の端がスマホの画面からはみ出ることになります。そこでCSSを使って、表示する端末の画面幅に合わせてサイズが可変する埋め込み動画に変更します。

続きを読む
Facebookなど表示が遅いSNSボタンを高速化する

Facebookなど表示が遅いSNSボタンを高速化する方法

 ブログを運営していると、たくさんの方にシェアしてもらうために、FacobookやTwitter、Google+などのSNSボタンは必須です。しかし表示するのが遅く、ページ全体の表示速度を落としている原因の一つになっています。今回はこのSNSボタンを高速化して、ついでにボタン自体を自作してきれいに揃えます。

続きを読む
IEの条件付きコメントをDreamweaverのテンプレートで使う方法!

IEの条件付きコメントをDreamweaverのテンプレートで使う方法!

 IE6,7,8などは、FirefoxやSafariなど他のブラウザとスタイルシートの違いが多くて、個別にスタイルシートのファイルを設定したい場面が多くあります。そんな時よく条件付きコメント「<!–[if lt IE 9]>○○○○<![endif]–>」を使うのですが、そのままではDreamweaverのテンプレートでは使えません。

続きを読む
レシポンシブデザイン IE6,7,8でcss3-mediaqueries.jsが効かない対処

レシポンシブデザイン IE6,7,8でcss3-mediaqueries.jsが効かない対処

 レシポンシブデザインでは、PCやスマホの表示をCSS3のMedia Queriesを使ってスタイルシートを切り替える事になります。しかしIE6、IE7、IE8はこのMedia Queriesに標準で対応していないため、css3-mediaqueries.jsを読み込ませて使えるようにします。しかし書き方によって、css3-mediaqueries.jsが効かない場合があることがわかりました。

続きを読む

W3C、新しいWeb標準プロジェクト「Web Platform Docs」を立ち上げ!

 非営利のWeb標準化団体のW3C(World Wide Web Consortium)は、AppleやGoogleなどと共に、複数のブラウザや端末で同じように表示できるwebサイトを構築するための、信頼できる情報を集約するプロジェクト「Web Platform Docs」の立ち上げを発表しました!

続きを読む