最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われています。しかし今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。 パララックス効果とは パララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。 同一点を異なった2点から眺めたときに見える方向の違い，すなわち，二つの方向の間の角度を視差という。 参考：コトバンク WE

こんにちは。 今回は前回に続いてパララックスサイトの基本的な作り方です。 それでは早速前回の続きいっちゃいましょう〜！ ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 ボックスを横方向にも動かすhtmlとcssは同じでjsのコードのみ記述します。 js[javascript] $(function() { var pos1 = $(‘#box1’).offset(); //box1の初期値を取得 var pos2 = $(‘#box2’).offset(); //box2の初期値を取得 var pos3 = $(‘#box3’).offset(); //box3の初期値を取得 var pos4 = $(‘#box4’).offset(); //box4の初期値を取得 $(window).scroll(func

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

gulp-autoprefixerよりも高機能なgulp-pleeeaseの紹介。いろいろやってくれるとても良いやつ。gulp-autoprefixerはもう古いかも? css3を使ってスタイルを記述する際にベンダープレフィックスを自動で付けてくれるgulp-autoprefixer。とても便利ですよね。 しかし、gulp-autoprefixerよりも高機能でいい感じなのが、pleeeaseです。pleeeaseはベンダープレフィックスを付けてくれるだけでなく、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx変換などをいっぺんに処理してくれます。 gulpで簡単に使うことができるので、早速導入してみましょう。 gulpって??という方→GulpでSassのコンパイルとlivereloadをやってみる gulp-pleeeaseのインストール

TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ

BEM Advent Calendar 2013の3日目です。 BEM、良さげだけどHTML書くのが面倒になるじゃん、class長いし、多いし。などと思ってBEMを敬遠されている方がいらっしゃったらEmmetのBEMフィルターを利用すれば良いと思います。 Emmetって？ Zen-Codingをさらにすごくしたやつです。以下あたりが分かりやすいと思います。 Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17 EmmetのBEMフィルターを使ってサクッとHTMLを書いてみる BEMろうかなと思ってはみたものの、いざやってみると毎回「ブロック名-エレメント名」なんてclassを書いてらんねーよとなって途中で投げ出してしまうということがあります。僕は結構あります。 まぁ、それでもBEM + 自分ルールの良い感じの HTML / CSS にはなるので

skpn.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、skpn.comが全てとなります。あなたがお探しの内容が見つかることを願っています！

キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav

KANAPPLE.NET available for sale For instantly purchase. Please contact us to get this domain.

Why not login to Qiita and try out its useful features?You get articles that match your needsYou can efficiently read back useful informationdark_modeYou can use dark theme

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert