レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日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>

Posted: 2014.08.14 / Category: javascript / Tag: jQuery fullPage,js はフル画面にコンテンツを表示して結構いろいろとできるプラグインなのですが、今回は横にスライドする機能だけに絞って使ってみたいと思います。 jquery 1.8.3 fullPage 2.1.8 を使用します。 IEは8から使えるようです。 プラグインのダウンロードと準備 ダウンロードは下記URLから。 fullPage.js One Page Scroll Site Plugin ダインロードしたzipを解凍すると色々と入っていると思いますが、使用するのは下記です。 jquery.fullPage.css jquery.fullPage.min.js vendors/jquery.easings.min.js headなどにjs&cssファイルを読み込みま

jQuery+skrollrでスクロールしてSVGの色を変化させる jQueryとskrollrというプラグインを使用して、スクロール量に応じてSVGの色を変化させてみます。 投稿日2016年06月16日 更新日2019年04月13日 背景色の変更 SVGの前に、一番単純なbodyの色を変化させてみます。 jQueryとskrollrを読み込んで、skrollr.initを実行します。 JavaScript <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></

Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名　時間　アニメーション方法 ;

2016年2月 webトピックス 2016年2月、個人的に気になった記事のまとめです。 投稿日2016年03月01日 更新日2016年03月01日

jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

CSS3でマウスオーバーしたボタンだけ横幅をアニメーションで広げて、他は狭くするやつ（Flexbox） 横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。 ちょっと説明よくわからないですが、サンプルを用意しました。 投稿日2016年02月29日 更新日2019年04月13日 See the Pen Flexbox Animetion Width by webopixel (@webopixel) on CodePen. HTML HTMLはシンプルなリストでマークアップしてます。 HTML <nav id="main-nav"> <ul> <li><a href="#">Green</a></li> <li><a href="#">Purple</a></li> <li><a href="#">Red</a></li

CSS3で画像キャプションのマウスホバーアニメーション5種 CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。 ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。 投稿日2015年12月25日 更新日2015年12月25日 基本的なHTML 基本的なHTMLは下記になります。figureでマークアップしてみました。 HTML <section class="sample1"> <figure> <img src="thum01.jpg" width="400" height="266"> <figcaption class="title">Hover Effect 01</figcaption> </figure> </section> figureのCSSは「overflow: hidden」ではみ出ない

CSS3で背景画像全面表示（Background Cover）でもマウスオーバーで拡大アニメーション 最近サムネイルなどでマウスオーバーすると画像がぐいんって拡大表示するアニメーションをよく見ます。 あれはbackground-sizeとかアニメーションさせれば簡単にできそうですが、coverとかですでにsize指定してるときの方法をご紹介します。 投稿日2015年09月09日 更新日2015年09月09日 HTML innerはむだな気がしますが、z-indexを制御する用に設置しています。 html <div class="bg-scale"> <div class="inner"> <p>Background Scale Animation</p> <a href="#" class="btn-more">Article</a> </div> </div> 背景画像をafter擬似要

jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="

jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="

jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 投稿日2015年10月28日 更新日2015年10月28日 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a

Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲

Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http

Posted: 2012.06.29 / Category: javascript / Tag: jQuery 局地的にしか使用できませんが、管理画面などで画像一覧を表示させて選択するとテキストエリアにパスを挿入するプラグインです。 Code Mirrorというテキストエリアを快適にするプラグインに対応しています。 準備 画像を一覧表示するhtmlを作ります。 基本的にBootstrapなマークアップにしています。 media-list1.html <section id="media-list"> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th></th> <th>ID</th> <th>Title</th> <th>Image</th> </tr> </thead>

Posted: 2012.06.20 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 WordPress3.4からテーマカスタマイザーとい機能が追加されテーマファイルを編集しなくても管理画面から色や画像などリアルタイムで確認しながら編集できるようになりました。 この記事ではテーマカスタマイザーの使用方法とカスタマイズ方法をご紹介します。 テーマカスタマイザーの使い方 WordPressの管理画面で左メニュー「外観」→「テーマ」で「テーマ管理画面」を表示し、「カスタマイズ」ボタンをクリックします。 テーマカスタマイザー画面が表示されます。 何も設定していなくても「サイトタイトルとキャッチフレーズ」と「固定フロントページ」という項目があります。 たとえばテーマファイルで下記のように設定してあると、「サイトのタイトル」などの変更箇所がリアルタイムで

可変グリッドレイアウトなWebデザイン集めてみました 昨年あたりからウィンドウサイズに追従して変化する可変タイプのグリッドレイアウトが増えてきましたね。こんなレイアウトにしたいなんて注文も増えてきているのではないでしょうか。 そんなときのために可変グリッドレイアウトなサイトとWordpress&jQueryプラグインをピックアップしてみました。 最後には実際に制作するときに使えそうな、Wordpressテーマ&jQueryプラグインをご紹介します。 投稿日2011年01月26日 更新日2011年05月01日