はてなブックマーク

公開日：2017.12.25 更新日：2020.05.13 jQuery, ナビゲーション ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。 ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。 サンプル See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen. ↓別ウィンドウで見たい方はこちら デモページ html htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。 <div class="header"> <div class="logo">SITE NAME</div> <a

公開日：2017.10.07 更新日：2023.03.19 CSS display:grid;プロパティを使うと、CSSのみでタイルレイアウトを実装することが可能です。 display:flex; でもグリッドレイアウトは可能ですが、display:grid;とdisplay:flex;の違いをざっくり言うと、flexレイアウトは横方向のレイアウトを指定するのに対し、gridレイアウトは縦横に指定できることです。 以下はそのサンプルです。

兄弟要素を取得する prev()　直前の要素を取得する prev()は直前の兄弟要素を取得します。 サンプルでは .wrap の直前のdiv要素に対し、CSSを追加しています。 <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここから取得--> <div class="wrap"> <h2>見出し</h2> <p>テキスト</p> <p>テキスト</p> </div> <!--ここまで取得-->

公開日：2017.04.24 更新日：2020.05.19 WordPress WordPressでschema.orgに基づく構造化データ用のパンくずコードを生成するためのコードをご紹介します。 こちらの関数を利用すると以下のようなhtmlを生成し、検索結果でパンくずが表示されるようになります。 （100%確実に…というわけでもなさそうですが） Googleの検索結果 <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/" itemprop="item"><span itemprop="name">TOP</

TOPjQuery iziModalでjQueryのモーダルウィンドウを実装する iziModalでjQueryのモーダルウィンドウを実装する 公開日：2016.09.02 更新日：2020.05.20 jQuery, モーダルウィンドウ 簡単な設定でリッチなアニメーションやカスタマイズが可能なモーダルウィンドウのjQueryプラグインiziModalをご紹介します。 ライセンスはApache License 2.0です。 サンプル ファイルの準備 必要なファイルを読み込む 配布元のサイトからjsとcssデータをダウンロードして、html内で読み込みます。 必要なファイルはダウンロードデータの以下に格納されています。（2016年9月現在） iziModal-master ├ css │└ iziModal.min.css └ js └ iziModal.min.js <link rel="

TOPWordPress スライドショーが実装できるWordPressプラグインSmart Slider 3 スライドショーが実装できるWordPressプラグインSmart Slider 3 公開日：2016.11.24 更新日：2020.05.13 WordPress Smart Slider 3は、コードを書かずに高機能なスライドショーを実装できるWordPressプラグインです。 コードをいじらなくても管理画面上でレイアウトや画像の変更が出来るので、移り気なクライアント対応にももってこいですね。 Smart Slider 3 の主な機能 レスポンシブ 動画対応（自動再生可） サムネイル表示 スライドショー、キャプションのアニメーション設定 サイズ、位置指定 無料（更に詳細設定が可能な有料版も有り） Smart Slider 3 プラグインのインストール 管理画面の [プラグイン]

TOPCSS CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識 CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識 公開日：2016.12.29 更新日：2023.01.21 CSS display:flex;を使ったレイアウト方法をまとめました。 上下左右のレイアウトに柔軟に対応できるので、レスポンシブやグリットレイアウトに役立ちます。 より複雑なレイアウトを行いたい場合は、こちらの記事をご覧ください。 display:grid; を使ってCSSのみでタイルレイアウトを実装する

TOPCSS 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 公開日：2016.11.28 更新日：2023.03.19 CSS CSSの background-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成したので、以下をご覧ください。 サンプルページ

公開日：2015.11.20 更新日：2018.07.16 TOOL よく使うEmmetのショートハンド展開例をまとめました。 環境はSublimeText3を使用しています。

エフェクト付きでテキストを表示する LetterFx LetterFxは様々なエフェクト付きでテキストが表示できるjQueryプラグインです。 オプションもオプションも豊富で派手なものからシンプルなものまで設定できるので、サイトのコピーなんかを印象づけるのに使えますね。 LetterFix 必要なファイルを読み込む LetterFixからデータをダウンロードして、jQuery本体と以下のファイルを読み込みます。 <link rel="stylesheet" href="jquery-letterfx.min.css" /> <script src="jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.min.js"></script>

DESIGN 2020.05.18 Webデザイナー、ディレクターが工数削減して複数サイトを効率よく運営するには

TOPjQuery inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き 公開日：2016.05.30 更新日：2023.03.19 jQuery, アニメーション inview.jsはスクロールして表示領域に入ったらイベントを開始させてくれるさせてくれるjQueryプラグインです。 CSSアニメーションとSVGのアニメーションを行うデモを作ってみました。 inview.js配布元

公開日：2015.11.20 更新日：2020.05.18 jQuery, ナビゲーション jQueryのクリックやマウスオーバーで、コンテンツをスライドさせて表示する方法です。 ちょっとしたtipsを表示させる場合なんかにも、動きがついてかわいいかもですね。 IE8↑で動作確認しています。 jQueryライブラリの読み込みだけで、その他のプラグイン等は使用していません。 デモページ 右からマウスオーバーでスライドさせる CSS スライドさせる要素の親要素に対し、下記のようなスタイルを付与します。 今回はposition:fixed;で絶対配置にしていますが、相対配置でもOKです。 横幅を指定し、right: -140px; で初期位置を指定しています。この場合は-140px分右ヘ移動するので、40px分だけ画面に出ているということになります。 z-indexの値は、スライドさせるコンテン

公開日：2016.02.17 更新日：2020.05.20 jQuery, アニメーション CSSのアニメーションを開始するタイミング(秒数)を、jQueryで指定する方法です。 サンプル 使い方 アニメーション用のCSSを読み込む アニメーションにはAnimate.cssのアニメーションを使用しています。 html内で当該ファイルを読み込んでください。 もちろん、自分で用意したCSSアニメーションでもOKです！

TOPjQuery jQueryでスクロールしても固定されるサイドバーを実装する(レスポンシブ対応) jQueryでスクロールしても固定されるサイドバーを実装する(レスポンシブ対応) 公開日：2015.11.20 更新日：2020.05.13 jQuery, ナビゲーション ページをスクロールするとサイドバーが画面上部に固定されるコードを書いてみました。 デモでは、サイドバーの項目が1～40番目までスクロールされたら、サイドバーが固定されるようになっています。 このサイトでもアレンジを加えて利用していますので(2015年3月現在)、動きを確認してみてください。 デモページ このサイドバーの概要 以下の条件で作成しました。 一定の長さをスクロールすると、サイドバーが画面の上部を基準に固定される ページの最後までスクロールしたら、サイドバーは親要素の下部(フッターの上)に固定される 横幅が特定

TOPJavaScript Googleマップのマーカーをクリックしたらリンク先へ遷移させる Googleマップのマーカーをクリックしたらリンク先へ遷移させる 公開日：2015.11.20 更新日：2019.06.11 JavaScript Googleマップのマーカーをクリックしたら、任意のページへ遷移させる方法です。 複数のマーカーにも対応しています。 デモページ 基本設定 必要なファイルを読み込む Google Maps API のスクリプトを読み込みます。 v3からAPIキーが不要になっているので、以下のコードをそのまま貼り付けて使えます。 ※2018年からAPIキーが必須になりました。 Google Cloud Platform でAPIキーを取得してください。

TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル

TOPjQueryajax 非同期通信でページを切り替えを高速化！PJAXの使い方 非同期通信でページを切り替えを高速化！PJAXの使い方 公開日：2015.11.20 更新日：2015.11.23 ajax, jQuery PJAXはAjaxとpushStateを組み合わせて非同期通信でページの切り替えを行うjQueryプラグインです。 指定したエリアのみ通信が発生するので、スムーズなページ遷移が可能です。 対応ブラウザはIE10+、その他モダンブラウザです。 デモページ 特徴と機能は公式サイトによると以下の通りです。 特徴 プリロードによる高速化 データバインディングによるサーバー負荷軽減 クライアントサイドロードバランサによるネットワーク負荷分散 CSS・SCRIPT・RSSなどHEAD要素の同期 URL・TITLEなど項目別の更新無効化 pjaxの一般的諸問題の解決 機能 Ajax

公開日：2015.11.20 更新日：2015.11.22 WordPress wordPressでページ送りをした時に、2ページ目以降（urlにpageを含む）は違う見せ方をしたい時に利用しました。 （他にもっといいやり方はあるかもしれません。。） URLに特定の文字列が含まれていた時 hogeを任意の文字列にしてください。 <?php $url = $_SERVER['REQUEST_URI']; if(strstr($url,'hoge')==true): ?> URLにhogeが含まれていたら表示する内容 <?php endif; ?> URLに特定の文字列が含まれていない時 hogeを任意の文字列にしてください。 <?php $url = $_SERVER['REQUEST_URI']; if(strstr($url,'hoge')==false): ?> URLにhogeが含ま

公開日：2015.11.20 更新日：2015.11.24 jQuery, ローディング 以前ご紹介したlazy loadと似た画像遅延ロード系のTADAというjQueryプラグインをご紹介します。 スクロールして画像が表示領域に入ってから読み込まれるので、大量の画像がある場合などに読み込みのストレスを軽減してくれます。 lazy loadも良いプラグインなのですが、ある日スマホやタブレット等のデバイスでは、画像が表示領域に入っても表示されないことがあるというのに気付きまして。。 TADAは上記の問題はないようです。 デモページ 基本的な使い方 必要なファイルを読み込む 以下からtada.jsをダウンロードし、jQueryライブラリと一緒に読み込みます。 TADA 配布サイト <script src="http://ajax.googleapis.com/ajax/libs/jquery/

公開日：2015.11.20 更新日：2020.05.20 jQuery, アニメーション CSSアニメーションとjQueryを使って、スクロールに合わせて要素を移動させる方法です。 CSS3のプロパティtransitionを使っているので、対応はIE10↑になりますが、移動自体はするので（瞬間移動のような感じで）使い道はあるかなぁと。 DEMO 以下のデモをスクロールしてみてください。葉っぱの位置が移動します。 html 動かす要素に.object、更に子要素としてspanに.pos0を付与しています。 子要素にしているのは、動かす要素に対してjsでクラス名を削除する処理をするため、親要素のクラス名で識別する必要があるからです。 8～10行目は動きが分かりやすいように罫線を入れただけなので、削除してOKです。 <p id="interval">スクロール値：0</p> <div id="

公開日：2015.11.20 更新日：2020.05.20 jQuery, ナビゲーション 左右から開くスライドパネル、スライドメニューにアンカーリンクを使用するパターンを作成してみました。 スライドメニューのjQueryプラグインに関してはいくつかご紹介してきましたが、Andoroidの旧バージョンでも安定して動くとなると、やはりjQuery Mobileが安定してそうです。 デモページ 使い方 必要なファイルを読み込む。 jQueryライブラリとjQuery Mobileライブラリ、CSSを読み込みます。 下記はCDNを使用していますが、自分のサーバーにアップしたものを使いたい場合は、jQuery Mobileのサイトよりダウンロードして下さい。 <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jque

TOPJavaScript レスポンシブなスライドメニュー Responsive Nav の使い方(IE対応) レスポンシブなスライドメニュー Responsive Nav の使い方(IE対応) 公開日：2015.11.20 更新日：2015.11.23 JavaScript, ナビゲーション Responsive Nav はレスポンシブ対応のスライドメニューを実装できるプラグインです。 ウィンドウの横幅が指定したサイズ以下になると、メニューがスライド式になります。 今回はIE7にも対応している実装方法をご紹介します。 レスポンシブにしたいけど下位ブラウザも対応したいというワガママにも応えてくれるので、とっても重宝しています！ デモページ Responsive Nav配布先 ライセンス-MIT 必要なファイルを読み込む Responsive Nav配布先からファイルをダウンロードし、読み込