京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
![サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新](https://cdn-ak-scissors.b.st-hatena.com/image/square/4fb7ae08c42fca550f792d37d5bc6cd2bfba7be2/height=288;version=1;width=512/https%3A%2F%2Fhtml-five.jp%2Fwp-content%2Fthemes%2Fjin%2Fimg%2Fbg_default.jpg)
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
ホーム JavaScript レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」 今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポンシブ対応のタブパネルを実装できる「Easy Responsive Tabs to Accordion」です。シンプル&軽量で素晴らしいですね。ブラウザ幅を縮小していくとタブパネルからアコーディオンに切り替わるのが特徴です。タブは水平・垂直も可能です。 [ads_center] 使い方 このようなタブパネルからブラウザを縮小していくと。 こんな感じでアコーディオンに切り替わります。ブレイクポイントは768pxになっています。以下はHTMLです。 <div id="demoTab"> <ul class="resp-tabs-list"> <li>..
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン 1.機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①~⑤のページ遷移で、通常は「戻る」「進め」ボタンで②~④の遷移は行われませんが、hashchangeプラグインを使えば②~④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント(「index.html#abc」の「#abc」)を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある(主に下ネタ)」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい(´ω`) さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
シンプルなHTMLで、デスクトップ時は水平・垂直のタブに、タブレット・スマフォ時はアコーディオンに自動変更(指定も可)するレスポンシブ対応のjQueryのプラグインを紹介します。 Easy Responsive Tabs to Accordion Easy Responsive Tabs to Accordion -GitHub 特徴 デモ 使い方 特徴 レスポンシブ対応のタブをシンプルなHTMLで簡単に実装可能。 デスクトップ時はタブ、スマフォ時はアコーディオン。 同じページに複数のタブをセット可能。 IE7+を含むクロスブラウザ対応。 デスクトップ、タブレット、スマフォのクロスデバイス対応。 デモ デモはIE7+を含むデスクトップ、タブレット、スマフォでご覧ください。 まずは、デスクトップサイズで表示してみます。 デモページ:幅1200pxで表示 デスクトップ時はタブで、上:水平型、下
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ:幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く