Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。 Slip.js
タッチデバイスにも対応可能な、リストのアイテムを並べ替えたりスワイプで削除できるようにするライブラリ・「Slip.js」
Slip.jsはリストのアイテムの並べ替えやスワイプによる消去を可能とする非依存のシンプルなライブラリです。タッチデバイスにも対応可能となっています。機能もいたってシンプルで、並べ替え、並べ替えの禁止、スワイプの禁止などをオプションで設定可能です。導入も楽で良いですね。ライセンスファイルはありませんでしたが、スクリプトファイル内を見る限りはBSDっぽいです。 Slip.js
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]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri
レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装できませんが、これ一つで軽量に実装できます。 Muuriとは「壁（Wall）」を意味するフィンランド語だそうです。 Muuri Muuri -GitHub Muuriの特徴 Muuriのデモ Muuriの使い方 Muuriの特徴 レスポンシブ対応 レイアウトのカスタマイズは自由自在 パネルのドラッグ&ドロップに対応 ネストされたグリッドに対応 高速で快適なアニメーション フィルタリングやソート機能を装備 IE9+もサポート MITライセンス Muuriのデモ デモでは、Muuriのさまざまなレイアウトを実際に楽しめます。 Gridのデモは、Masonryのようなグリッドレイアウトで
![[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7cdd21f5a4f44ea2e0e03c1b58a86ba838d4c8b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017120501-01.png)
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
ol要素の入れ子で親の番号を子に割り当てる方法
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> <li>タイトル1 <ol> <li>タイトルA <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> <li>タイトルB <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> </ol> </li> <li>タイトル2 <ol> <li>タイトルC</li> <li>タイトルD</li> </ol> </li> </ol> 完成イメージ 完成イメージでお分かりのとおり、子リストに親リストの番号が引き継がれています。 参考：デフォルトの表示 １．CSSの設定 親の番号を子に割り当てるには、次のCSSを適用します。 ol { counter-reset: section; } l
Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
汎用性の高そうな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]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには
Unslider | Laptop Reviews & Buying Guides
Gaming Laptop 4 Best Mini-LED Laptops in 2023 Regardless of whether you’re gaming or just need an excellent display, our recommendation for the best Mini-LED laptops in 2023 that you can buy should help. Read More 2-in-1 Laptops 4 Best 2-In-1 Gaming Laptops 2-in-1 gaming laptops do exist. Certain 2-in-1 laptops have beefy specs that make them viable for modern gaming. Read More Buying Guides 5 Bes
jQuery Responsive Thumbnail Gallery Plugin
jQuery Plugin for creating image galleries that scale to fit their container. How to Use Link to the script after jQuery. Apply it to a DOM element on the document ready event. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows (example has the default config values assigned) $(document).ready(function() { var gallery =
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
ol要素で利用出来るHTML5のreversed属性をjQueryでクロスブラウザ対応にする
HTML5でol要素でリストに振る番号 を逆にするreversed属性が追加され ました。と言ってもまだChromeしか サポートしていません。便利っちゃ 便利なのでjQueryで他ブラウザに 対応します。 reversedはol要素でリストに降られる番号を逆にする属性です。 HTML5 <ol> reversed Attribute 現在はChromeしか対応していません。あんまり使う事は無いかもしれませんけど、需要の有無は置いといてこれを他ブラウザでも動作させます。 Sample Chrome以外でも同じ表示が出来てると思います。 コードfunction reverselist(list) { var totalItems = $(list).children().length; var start = $(list).attr('start'); var thisitem; for(
ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
Bootstrap List Styles with CSS3: Exploring
In the realm of web design, lists are fundamental for organizing content. Bootstrap, a popular front-end framework, offers powerful tools for creating and styling lists. In this article, we’ll dive into the world of Bootstrap list styles enhanced with CSS3. We’ll explore various techniques to make your lists more visually appealing and engaging. The Bootstrap List Foundation Bootstrap provides a s
E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧
「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。ここでは各ブラウザの最新バージョンの対応状況を追加していきます。 » 更新内容 CSS3 CSS3で新しく追加されたプロパティ。 CSS3 CSS2.1からのプロパティで、CSS3で機能が追加されたもの。 拡張 ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。 ○ 対応（○は要ベンダープレフィックス）。 △ 部分対応（△は要ベンダープレフィックス）。 × 未対応。 iOS4.3のMobile Safari Android 2.3/3.0/3.1の標準ブラウザ Firefox 4（バージョン5…⑤、6…⑥） Safari 5.0.5 Chrome 11（バージョン12…⑫） Opera 11.10 Internet Explorer 9（バージョン10…⑩） IE6 IE7 IE8
Accessible Audio Player (AAP) « One Hand Clapping
Welcome to my music blog, and to the home site of Accessible Audio Player (AAP), my fully accessible cross-browser media player. AAP uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don’t. Browsers that support neither degrade to a list of links to MP3 files. AAP is available in a standalone version or (with an additional P) as a WordPress pl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
521 Dimensions
The Hashslider is dead, long live the Hashslider