今回はjQueryを使わずに、CSSだけでアコーディオンをサクッと実装する方法を紹介します。どれもレスポンシブ対応です。なお、後半では矢印アイコン付きのものも載せています。コピペして使って頂いてOKです。
CSSだけでアコーディオンを作る方法（レスポンシブ＆矢印付）
今回はjQueryを使わずに、CSSだけでアコーディオンをサクッと実装する方法を紹介します。どれもレスポンシブ対応です。なお、後半では矢印アイコン付きのものも載せています。コピペして使って頂いてOKです。
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers
レンダリングを妨げる JavaScript を削除する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。 この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワーク ラウンド トリップが発生し、ページが最初に表示される
Pikabu – Flexible Framework for Off-Canvas Flyout Panels | Mobify
Pikabu A speedy, flexible framework for off-canvas flyout panels. Simple markup Few containers and classes means implementation is a breeze. Native scrolling Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don’t support it. Customization No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs. Compatibility This thing works
hammer.jsの使い方 | まとめーたー
photoBy: http://s3.bitelia.com/files/2012/07/hammer-js-800x436.jpgjquery で スワイプやタッチジェスチャーを可能にするライブラリまずはダウンロードとご紹介http://eightmedia.github.io/hammer.js/ からダウンロードできます。 スマートフォンにマルチタッチ機能をつけることができます。 jquery.hammer.min.js は https://github.com/hammerjs/jquery.hammer.js からダウンロードできます。 使い方 スワイプで実行 jquery、hammer.js は読み込み済み #hoge を swipe で #hogeの テキストを取得 読み込む順番を逆にしないと動かない場合がある <script src="/app/webroot/js/jqu
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
制作会社クライマークス
企業コミュニケーションに、 クリエイティブで解を。 9割の直接取引で培ったプロジェクト推進力 多くの大手企業様との取引で培った企画・設計力 受賞歴に裏付けられたデザイン力 クライマークスが選ばれる理由
hifive - HTML5企業Webシステムのための開発プラットフォーム
JSLintとはJSLintプラグインの使用方法チェックルール一覧 - JSLintJSLint独自の項目JSHintと共通の項目JSHintとはチェックルール一覧 - JSHintEnforcing OptionsRelaxing OptionsEnvironmentsLegacyJSHintが必ずチェックする項目JSLintとはJSLint (JSLint.com - What is JSLint? を大まかに和訳しました。) JSLintとは、対象のJavaScriptプログラムから問題となる箇所を検索するコード品質ツールです。 C言語が登場して間もない頃、コンパイラによって捕えることができなかったプログラムミスがあったため、ソースファイルを検証するためのツールとしてLintが開発されました。今ではC言語は成熟し、コンパイラがエラーを捕えて警告出来るようになったためLintは必要なく
ClockPicker
A clock-style timepicker for Bootstrap (or jQuery). Download ZIP CSS < 6KB, JS < 9KB, after minified. Browser support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8. Device support Both desktop and mobile device are supported. It also works great in touch screen device. Dependencies ClockPicker was designed for Bootstrap in the beginning. So Bootst
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
jQueryの基本的な書き出し比較とまとめ | Webスクリプターがつぶやくブログ
社内でJavaScript職人の地位が確立されてきた僕です。 元々コーディング大好きマンなので楽しい限りです。 PHPを忘れそうですがw 今回は後輩（デザイナー）から、jQueryの書き出し（書き始め方？）が色々あってよくわからないと言われたので、比較とまとめをしていきます。 おそらく、後輩に限らず、デザイナーやコーダーの方がよく使うものは下記辺りではないかと。印象も参考までに載せておきます。 １）$(function(){...});←多分1番使う ２）$(document).ready(function(){...});←次によく使う ３）jQuery(function($){...});←あまり使わないけど、検索したら見かける ４）jQuery(document).ready(function($){...});←WordPressでよく見る ５）(function($){...})
Ajax通信とクロスドメイン問題 | IT工房｜AI入門とWeb開発
ajax通信とは URLを入力して希望するWebページをリクエストして、サーバーからのデータが送られてきて希望するページを閲覧するという通常の手順と違い、Ajax通信はJavaScriptを使用して必要なコンテンツを更新する仕組みです。通常の通信はページを全て読み込んで表示しますが、Ajaxはある一部分だけを読み込んで変更することができるものです。 Ajaxで送受信するには loadメソッドを使用する方法と$.ajaxを使用する方法があります。 loadメソッドを使用する方法は$( )で指定されたjQueryオブジェクトに設定するメソッドです。 これを使用すると別ページのコンテンツを読み込むことが可能です。 例 $('div').load('mypage.html h1') $.ajaxを使用する方法はjQueryオブジェクト上で呼び出すのではなく、jQueryや$で直接呼び出される関数で
JavaScriptでクロスドメインの壁を飛び越える方法 - FICC Workbook
Javascriptを使って異なるドメイン上のデータを引っ張ってこようと思うと意外とたいへんです。 「クロスドメイン問題」とかいう面倒な壁が立ち塞がっているからです。 ぼくもさっきまでハマりまくっていたのですが、「jquery.xdomainajax.js」と言う良さ気なJQueryライブラリを使うことによって見事クロスドメインの壁を飛び越えることに成功しましたのでメモ 使い方使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQ
(その場で編集するUI) の実装方法を考えてみた - Cyokodog :: Diary
画面上の変更したいデータや文章をクリックすると、画面遷移をせずその部分のみが編集可能状態になるユーザインターフェースのことを Edit-In-Place あるいは In-Place-Editor と呼ぶそうです。 jQueryでEdit-In-Place（その場編集）を実現するためのプラグイン＆チュートリアルいろいろ - IDEA*IDEA inplace edit で始める DOM スクリプティング - 脱エンタープライズ志向 今回は jQuery による In-Place-Editor の実装方法について考えてみます。 In-Place-Editor の効果的な使い方 登録文書を承認ワークフローでまわすようなシステムの場合、同一文書に対し複数ユーザが修正や加筆をするというケースがよくあります。その際起こる問題として「データ編集中に他者に更新を先越され、登録処理で排他エラーになってしまっ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery リファレンス：jQuery.get
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
ページ読み込み後にjavascript(jQuery)を実行する方法
こんにちは。まりもです。 ひさしぶりにweb系の備忘録です。 わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。 jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。 例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。 他にも、CSSでブロックの大きさを制御しているのに、html・CSS・javascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。 ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hammer.JS - Hammer.js