今回は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
<ph type="x-smartling-placeholder">で確認できます。 このルールは、HTML でブロックが参照されていることを PageSpeed Insights が検出した場合にトリガーされます ページのスクロールせずに見える範囲に 外部の JavaScript ファイルを配置します 概要 ブラウザは、ページをレンダリングする前に、HTML マークアップを解析して DOM ツリーを構築する必要があります。 このプロセスでは、パーサーがスクリプトを検出するたびに、スクリプトを停止して実行する必要があります。 HTML の解析を続行できません。外部スクリプトの場合、パーサーは リソースのダウンロードを待機することになります。これにより、1 つ以上のネットワーク ラウンドトリップと ページが最初にレンダリングされるまでの時間を遅らせる。 <ph type="x-smartl
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
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
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
【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ライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
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や$で直接呼び出される関数で
Post by @ficc-workbook · 1 image
使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQuery 読み込む --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- jquery.xdomainajax.js を読み込む --> <script src="jquery.xdomainajax.js"> </script> <sc
(その場で編集する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
株式会社クライマークス | 東京のWeb制作・Webコンサルティング会社
Codrops | Useful resources and inspiration for creative minds
