HTMLとCSSでパララックスページを作ってみよう | Casley Deep Innovations株式会社 技術ブログ
皆様こんにちは。 キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。 今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した シンプルなパララックスページの作り方を、ご紹介したいと思います。 「パララックスってなに？」と思われる方もいらっしゃると思いますので、 まずは、その言葉の意味から解説したいと思います。 1. パララックスとは パララックス(en. Parallax)とは、日本語で「視差」という意味です。 Webデザインの世界においては、「視差効果」とも呼ばれ、画面をスクロールするといった動作の際に 要素を異なる速度で動かしたりすることで、あたかも立体で奥行きがあるように見せる手法とのことです。 最近ではプラグインも増えつつあり、単に速度の変更だけでなく、様々な動きを持たせることが可能になってきました。 2. 実際に触ってみましょう まずは、こちら
IE8でimgの横幅だけ縮小表示される不具合？(max-widthがうまく反映されない） | 某氏の猫空
IE8でimgの横幅だけ縮小表示される不具合？(max-widthがうまく反映されない）投稿 : 2011-02-08更新 : 2013-05-18 画像を縮小表示しようとして、320pxX240pxに指定するとなぜか、横幅だけが24pxで表示される不具合にあい困りました。Bloggerの投稿画面で画像挿入したときの動作です。IE8だけ起こって、他のブラウザでは問題なく表示されていることは確認しました。 この現象に関して、Googleで検索したのですがなかなか原因らしきものが見つからずに困ってました。最終的に発見したのは、IE8のmax-widthではまる（nybbの雑記）です 対処1 画像に入っていたwidhtの値を削除する → OK 対処2 cssのimgに対しての、「max-width:100%;」の記述を削除する → OK via: IE8のmax-widthではまる（nybbの雑
IE6で透過PNGをきれいに表示する方法 - デザイン素材.comのブログ
現在トップシェアのIE6はアルファチャンネルのある透過PNGをサポートしてなくて、当サイトで素材として配布してる透過PNGをそのまま使っても透過せず、背景が透明にならず色がついてしまいます。 なので今回はIE6で透過PNGが使えるようになる方法を紹介します。 その方法と言うのは「Javascriptを利用して透過PNGを使えるようにする」と言うもので、そのライブラリをいろんな方が公開されてて、当サイトではGoogleが配布してる「ie7.js」を使ってます。 これはもともと透過PNG専用のライブラリと言うわけではなくIE6をIE7に近づけるためのライブラリなんですが、透過PNGへの対応も一機能として含まれてて設置方法も非常に簡単なんですよね。 設置方法 まずは以下のコードを<head>～</head>内に記述してください。 <!--[if lt IE 7]> <script src="
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
