【jQuery】画面サイズに高さを自動で合わせる方法【超簡単】｜macoblog
「ヘッダーやメインビジュアルの高さを画面ピッタリ合わせたい」こんなニーズに答えます。 本記事では、サイトにアクセスした際のファーストビューの高さを画面ピッタリに自動で合わせる方法を解説しています。 WEB系プログラミングについて学んでいる方は参考にどうぞ。 まず、ファーストビューの高さを合わせたいというのはどういう状況なんでしょう？ 下記をみてみましょう。 よくある構成ですね、画面上部の黒色のところがナビエリア、下の女性の画像がヘッダーエリアです。 よく見てみると、ヘッダーエリアが画面に収まらず右側にスクロールバーが表示されちゃってます。 これ、メインビジュアルが見切れてしまっていて、スクロールしないと全体が見れないという不格好な状態。 つまり、タイトルにある「画面サイズに高さを自動で合わせる方法」の完成イメージは下記になります。 見事に高さがピッタリに、画面右側にあったスクロールバーも消
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
jQuery で奇数番目・偶数番目を指定するときの注意点。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ちょっとはまったのでメモ。 リストやテーブルに対して、jQuery で奇数番目・偶数番目の要素を指定するときの注意点です。 例えば、以下のような HTML があるとします。 <ul id="list"> <li>要素01</li> <li>要素02</li> <li>要素03</li> <li>要素04</li> <li>要素05</li> </ul> で、奇数番目の li 要素の文字色を赤に、偶数番目の li 要素の文字色を青に変更したいと思います。 正しく実行されれば、要素01・要素03・要素05が赤文字、要素02・要素04が青文字になるはずですね。 ところが、使用する方法（セレクタ）によっては、期待したのとは逆の結果になることがあります。 「:odd」、「:
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
使えるjQueryプラグイン：ブロック要素を丸ごとリンクに変えてくれるBiggerlink.js
地味だけど私的に使うことが多いjQueryプラグイン、Biggerlink。 ブロックレベルの要素を丸ごとリンクに変更してくれます。 サイドバーなどでちょっとリンクをオシャレにしたい時に重宝しています。 …と説明してもピンとこないと思うので、サンプルデモを用意してみました。 テキストの部分しかリンクを貼ってなくても、リンクを内包するブロックレベル要素全体がリンクに変身します。 サンプルデモのHTML構造は以下の通り。 <li>タグの中に<h4>タグの見出しと<p>タグのパラグラフを入れてみました。 リンクは<h4>タグに貼ってあります。 Biggerlinkなしの（通常の）スタイル リンクは見出しのテキストだけです。 もうちょっとカッコよくしたいかも….。 Photoshop Tutorial Photoshopで簡単にできる QuickTipsを集めてみました Illus
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating An Off-canvas Navigation Menu With jQuery and CSS3