jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
Mozilla Developer Center
オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。 ウェブ開発者ガイド ウェブ開発者ガイドは、ウェブ技術を実際に使用して、やりたいことや必要なことを実現するために役立つハウツーコンテンツを提供しています。 ウェブ開発者向けチュートリアル HTML、CSS、JavaScript、Web API の学習を段階的に進めるためのチュートリアルです。 アクセシビリティ ウェブサイトを使用する人に何らかの制約があっても、できるだけ多くの人が使用できるようにすることです。 パフォーマンス コンテンツをできるだけ早く利用できるように、操作できるようにすることです。 セキュリティ データ漏洩やデータ盗難、サイドチャンネル攻撃、クロスサイトスクリプティング、コンテンツインジェク
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
Sizzy - 多彩なデバイスでのWebサイト確認を簡単に
Webサイトは一つのデバイスだけで見るとは限りません。特に最近ではPC、タブレット、スマートフォンなどあらゆる大きさのデバイスで閲覧します。そうしたデバイスでの表示確認をすべての実機でやるのは現実的ではありません。 そこで使ってみたいのがSizzyです。多数のデバイス幅に対応したデザイン確認ツールです。 Sizzyの使い方 最初にURLを入力します。 そうすると様々なデバイス幅でサイトの確認ができます。 ズーム変更機能が便利です。 Androidデバイスだけに絞り込んだところです。 タブレットだけ。 横向きもできます。 Sizzyを使えば多彩なデバイスでの表示確認が簡単にできます。Sizzyで確認しながら進めていけばあるメディアクエリーを使った時だけデザインが崩れると言った問題もすぐに気付けるはずです。 SizzyはHTML5/JavaScript製のオープンソース・ソフトウェア（ソースコ
WordPressを高速化！格安サーバでも速くなる5つの改善策-詳細版
WordPressを使っていると、どうしてもアクセスした時に遅いなと感じることがあると思います。コンテンツをデータベースからSQLで引張って来て、コンテンツ生成もPHPが都度動いているので、静的HTMLやMovableTypeと比較するとどうしても遅くなりがちです。 それでも、動的にコンテンツ生成できてカスタマイズが自由自在なWordPressを使いたい人は多いと思います。そこで、WordPressを劇的とまではいかずとも、最大限に速くするための改善策を試してみたので、ご紹介したいと思います。 特に、ロリポップやさくらレンタルサーバのように、ワンコインで借りられる格安レンタルサーバを使ってWordPressを動かしている方には役立つ内容になっています。 ちなみに当ブログでは元々ロリポップで運営していたのですが、リニューアルに伴い現在はXServerを使っています。 ロリポップ時代に培ったノ
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
CSSだけでアスペクト比を固定するテク - Qiita
Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
TwitterBootstrap入門(３)基本レイアウト | 有限会社ワイバーン
３．基本レイアウト グリッド・システム Twitter Bootstrap が提供するレイアウトには、グリッド・システムが採用されています。 横幅 940px の領域を 12 カラムに分割して、最大 12 カラムで好きなカラム数の組合せでレイアウトします。 カラム数の合計が 12 にさえなっていれば、どんなカラム数の組合せも可能です。 カラムとカラムの間をあけること(オフセット)もできますし、カラム構造をネストさせることもできます。 ちなみに当サイトは、 ・トップページが、ページの最上部に 12 カラムで、その下に 4 カラムを３つというレイアウト ・今、ご覧になっているこのページは、8 カラムと 4 カラムというレイアウト ・オフセットとネストなし になっています。 グリッドレイアウトの実装 では実際に、このグリッドレイアウトを実装してみます。 ページの先頭に 12
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
webOpixel
2024年7月 webトピックス 2024年7月、個人的に気になった記事のまとめです。 投稿日2024年08月02日 更新日2024年08月02日
jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」｜BLACKFLAG
サイト内にRSSフィードを読み込む方法はたくさんありますが、 jQueryを使って簡単に組み込めるプラグインがないか探したところ、 必要最低限の要素で組み込むことが可能となる理想のプラグイン 「zRSSFeed」に辿りついたのでここでも紹介してみます。 zRSSFeed – RSS Feeds Reader for jQuery zRSSFeed – RSS Feeds Reader for jQuery 上記ページからダウンロードできるプラグインファイルと併せて 実行させる為のIDをつけた＜div＞などを用意し、 スクリプトを実行するだけ。 実装方法のサンプルについて。 HTMLは下記の様に任意のID名がついたブロック要素を配置します。 ※今回のサンプルではID名を「feed」にします。 ◆HTML <div id="feed"></div> そして下記の様にID「feed」に対して、ス
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Javascriptで前のページに戻るを実装 - Qiita
CodyHouse | Web Design Nuggets
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Camera | a free jQuery slideshow by Pixedelic
finefinefine.jp
