レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>

jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

手軽にドロップダウンの実装をサポートしてくれるjsのご紹介。 サンプルページのソースを見ればほとんどわかりますが、ドキュメントファイルは一度目を通しておくといいかもしれません。 ドロップダウンに関する動作 サイズバーもお手軽実装。 各種動作設定も可能。 一番上のシェアボタンはクリックしてメニューを開きます。 中央の顔アイコンはマウスオーバー。 設定項目はドキュメントファイルに記載されています。英語読めなかったら翻訳で普通に読めるレベルです。 ドロップダウンメニューをサポートしてくれるDrop.js ダウンロード、各種ページは以下からどうぞ。 動作確認、デモページドキュメントページダウンロードページ手軽に導入したいなーっていう時に思い出してみてください。 それでは、また。

目新しいプラグインではないのですが、使わせてもらう機会が多いのでご紹介。 「Select or Die」はselect要素にちょっとした機能を付けたり、用意されているスタイルを使うことで手軽に装飾することができるjQueryプラグインです。 ブラウザもIE8から対応しており、jQueryのバージョンも新しいのはもちろん、v1.8でも動作してくれます。 同じようなスクリプトやプラグインは他にもありますが、個人的にselect要素を変更する際にはおすすめのプラグインです。 使用方法 まずは「Select or Die」からプラグインファイルをダウンロードするなどして、jQueryと併せて必要なファイルを読み込みます。（パスなどは自身の環境に合わせて変更してください。） <link rel="stylesheet" href="css/selectordie.css" /> <script sr

他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

レスポンシブウェブデザインでサイト作成をする際に、場合によっては使うことになるかも知れないJavascriptで画面サイズ指定に応じたjavascriptを読み込む条件分岐です。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) {　//切り替える画面サイズ $.ajax({ url: 'js/pc.js', dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', dataType: 'script', cache: false }); }; }); </scrip

2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css　→　768pxで切り替えたい →　@media screen and (max-width: 768px) →　ちゃんと768pxで切りかわる js　→　768pxで切り替えたい →　if($(window).innerWidth() < 768){ → 　78

コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペットまとめ。 レスポンシブでサイトを作ることが増えています。 予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。 ワンソースで考えたほうが運用は効率的だと思うから。 Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいありま

タブレット対応などで良く使う、デフォルトでは非表示だけど、ボタンやアイコンをタップするとサイドメニューがにょきっと登場するやつです。 一般的なデザインフレームワークなんかでは、スマホと一緒で上から降りてくるアニメーションの一択であることが多いです。 いや、やっぱり横からサイドメニューを登場させたいのよ！って思うときありますよね。 でもアニメーションを仕込むのが超超超超超メンドイです。 オシャレなサイドメニューの登場アニメーションがないかなーと探していたら、ステキなものを見つけたので紹介。 TRANSITIONS FOR OFF-CANVAS NAVIGATIONSCSSとjsを使ったテクニックです。 アニメーションなので、デモを見た方が早いです。 デモはこちら たくさんあるアニメーションの中のいくつかを紹介します。 これが元の状態です。サイドメニューは表示されていません。緑のボタンのいずれ

Adding some perspective with CSS3 and jQuery — best viewed in WebKit browsers CSS transforms are not supported in your browser CSS 3D transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers.

作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面

こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea

前回のパララックスを応用して、横移動を実装してみましょう。 サンプルを見る こちらのサンプルでは、スクロールすると、スクロールの位置と連動して、横からボックスが出てきます。今回は、最近流行のパララックスの応用について解説します。 縦の移動量を横の移動量に。 jQueryを使って、パララックスのサイトを作る際に肝になるのは、scrollTopの値です。 簡単に説明すると、 ■scrollTopの値がある位置にきたら横移動を開始。 ■横移動には、scrollTopの値を使う。 この2つの処理が実現できれば、パララックスにおける横移動が実装できます。 では、どのように実装するのか、コード解説していきましょう。 <style> #wrap { position:relative; width:900px; overflow:hidden; } #info { position:fixed; top