レスポンシブサイトでパララックス効果をCSSだけで実装する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われています。しかし今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。 パララックス効果とは パララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。 同一点を異なった2点から眺めたときに見える方向の違い，すなわち，二つの方向の間の角度を視差という。 参考：コトバンク WE
パララックスサイトの基本的な作り方 2/2！
こんにちは。 今回は前回に続いてパララックスサイトの基本的な作り方です。 それでは早速前回の続きいっちゃいましょう〜！ ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 ボックスを横方向にも動かす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
EmmetのBEMフィルターでBEMるときのHTMLをサクッと書く
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 リソースおよび情報
skpn.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、skpn.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
[js]スクロール位置に応じてグローバルナビを点灯させる | begoingtoブログ
1ページで構成されていて、スクロール位置に応じてグローバルナビが点灯するようなサイトを最近よく見かけます。 自分もその仕組みを取り入れたかったので、勉強がてらデモサイトを作りました。 デモサイト 仕組み的には、都度スクロール位置をjsで取得し、点灯するグローバルメニューを判定しています。 1. CSSの調整 CSSに関しては細かい解説はしませんが、ヘッダー固定メニューの場合、下記のようなCSSを記述します。 ただし、position: fixed;は一部のスマホでは未対応のため、幅広くブラウザ対応する場合は別のやり方を考慮する必要があります。 #header { position: fixed; width: 100%; height: 50px; top: 0; text-align: center; background: rgba(180, 180, 180, 0.9); borde
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート
キーワードは「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」というのは「実践的」という意味の単語で、フロント
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
「サニタイズ言うなキャンペーン」私の解釈
高木浩光さんの「サニタイズ言うなキャンペーン」 という言葉自体はずいぶん前から存在したのだが、 続・「サニタイズ言うなキャンペーン」とはにて高木さん自身がいくつも誤解の例を挙げているように、 そしてまた最近も 駄目な技術文書の見分け方 その1にて「まだわからんのかね」と言われているように、 「わかりにくい」概念なんだろうとは思う。 そこで、僭越ながら、「サニタイズ言うなキャンペーン」について、 私なりの解釈を書いてみようと思う。 もっともこれが正解であるという保証はないのだが、 間違っていたらどなたかツッコミいただけることを期待しています(_o_) そもそも何のせいで「エスケープ」しなければならないのか たとえば住所氏名を登録させるWebアプリケーションは珍しいものではないと思う。 そこで、私が「Taro&Jiro's castle サウスポール」 とかいう恥ずかしい名前のマンション(?)
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker
最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。 to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。（追記：ソースをgistにあげました） wordbreak.js for jQuery — Gist IEとFirefox2
複数のバナーをランダムに表示するJavaScript | かえラボBlog
全部で5個登録されたバナーのうち、ランダムに3個を選択して表示する、というスクリプトについて。 案件で必要に迫られて書いたのですが、あまりにイケてないコードになってしまったので改良したものをここで公開します。イケてないコードで公開してしまった懺悔みたいなものです。 処理の流れとしてはこんな感じ。 5個のHTML文字列が入った配列(1)からランダムに1個取り出して、表示用変数に格納 残りの4個を新たに作った配列(2)に格納 配列(2)からランダムに1個取り出して、表示用変数に格納 残りの3個を新たに作った配列(3)に格納 配列(3)からランダムに1個取り出して表示用変数に格納 表示用変数を使って出力 これをベタッと処理の順そのまんまに書いたらこうなった、というイケてないやつ。 サンプル1 var contentHtml = [ '<li><a href="#"><img src="bnrs
Demo: Pure CSS speech bubbles – Nicolas Gallagher
By Nicolas Gallagher The demo page for Pure CSS speech bubbles. For a detailed explanation view the CSS file. It is heavily commented. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Qiita
GitHub - codylindley/frontend-tools: Landscaping With Front-end Tools
Loading...
syncroot.com is For Sale
モジュール組み
Create a new fiddle - JSFiddle