メディアクエリーのhoverでPC/SP切り替えが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 15日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 15 日目 メディアクエリーを使って切り替える場合ってだいたい画面の幅を見て、広ければパソコン、狭ければスマホ、という判断にしていることが多いかと思います。中間にタブレットを置いたり。 大きさとか配置とかはそれでもまあまあ大丈夫かなとは思うんですが、ユーザー操作（インタラクション）を考えると画面幅に依存するのは本質ではないなあという感じがしますよね。デバイスの特性を見てやりましょう。 例 ホバーで色を変えて強調表示するカード UI です。スマホ等で入力欄に触れるとホバー状態にしても反応してしまうのを制御できます。 デモ：https://codepen.io/ginpei/pen/qBgzRJK
CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル
Result PCではテーブル、スマホやタブレットではアコーディオンになるやつ。もう少し使いやすくできそうですが・・ テーブルに見えますが実際はtableタグは使われておらず、display:table;で実装されていますのでタイトルには疑似と付けています css#table { display: table; width: 100%; background: #fff; margin: 0; box-sizing: border-box; } .row { display: table-row; } .cell { display: table-cell; padding: 6px; border-bottom: 1px solid #e5e5e5; text-align: center; } input[type="radio"], input[type="checkbox"] { d
[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch -GitHub pageSwitchのデモ pageSwitchの使い方 pageSwitchのデモ pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。 下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
![[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch](https://cdn-ak-scissors.b.st-hatena.com/image/square/fec6bf67d7730443566e7451a2e74cd7133ab866/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012501.png)
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c
![[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop](https://cdn-ak-scissors.b.st-hatena.com/image/square/c55fb72cc692f14ab3307eef2042769543abed0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015090103.png)
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor
jQuery HDimg
[ jQuery HDimg ] jQuery plugin to serve double size images on Retina and other high resolution display This plugin is useful to auto load a double size image for high resolution displays. Simply it search for an img with a specific (that you can choose) suffix to use in case of Retina or other high density displays. Demo To see properly this plugin in action you need 2 different devices to see the
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
Slippry - A responsive slider by booncon
Responsive Buzzword? Yes. Important? Very. We got frustrated at the lack of free, responsive sliders, so we wrote our own. Sure, there are some out there, but we found out the hard way, they have two settings or they use soon-to-be-deprecated functions. Oops. Modern HTML5 + CSS3 + jQuery Slippry is written with the future in mind, not the past. We wrote it to work on the latest jQuery functions, C
レスポンシブWebデザインでもPC表示切替ボタン｜Webデザイン｜開発ブログ｜株式会社Nextat（ネクスタット）
どうやら世の中には「スマートフォン向けサイトはPC向けサイトより情報が少ないのではないか？」と考えるユーザが一定数いるようです。 ※有意な数のアンケートを取ったわけではないので、割合はわかりませんが。 かく言う私も、スマートフォン向けのサイトで情報を探すときにPC版表示に切り替えたいと思うことはよくあります。 モバイル向けのページをhttp://example.com/s/などのように別ページとして表示している場合はリンクを貼れば済む話です。 しかし、レスポンシブWebデザインを採用している場合は同じようにはいきません。 せっかくレスポンシブWebデザインを採用しているのだから、PC版をわざわざ表示することはないというのが制作側の本音なんですけどね。 前述のスマホでは情報が見られないかもしれないと思っているユーザのために、以下のPC向け表示もどきを導入するのも悪くはないかと思います。 方法
Glide.js
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver
水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。 スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.fs.naver.css" type="text/css" media="all" /> <script src="jquery.fs.naver.js"></script> Step 2: HTML HTMLはナビゲーションの要素を指定できるように実装します。 ※ここでは、navで指定。 <nav> <a href="#">Home</a>
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
{:navgoco} Demo Page
navgoco {:navgoco} is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu. Tweet Homepage | GitHub | JQuery | ReadMe | Changelog v0.2.1 - You can also click the caret/arrow on the right to toggle submenus! - Par
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js
least.js -デモ：画像の拡大時 least.jsの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。 <!-- least.js CSS-file --> <link href="css/least.min.css" rel="stylesheet" /> <!-- jQuery libary --> <script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script> <!-- least.js JS-file --> <script src="js/least.min.js" defer="defer"></script> <!--
Flipster Demo
jQuery Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety of styles. Not only is it gorgeous to look at, Flipster is also: Responsive Automatically centers and scales to fit the area provided. Touch Friendly Swipe between items on touch devices without interrupting scroll. Lightweight Javascript and CSS combined are
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
フルスクリーン、入れ子、RWD対応などをサポートしたスライドコンテンツを実装するスクリプト・「SLIDEME!」
alessandroferrini.it
