これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
CSSで要素の表示・非表示を切り替える方法いろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない
CSSで「続きを読む」を作る | かちびと.net
Result 以前書いたものとは別で、こちらは任意の場所で区切りたいケースの時に。 もっとシンプルな方法で非表示部分が要素に依存しています 多くの場合は動的なコンテンツに対応する必要があるので以前書いた方法で事足りそうです css .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .15s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before {
CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
in-view.js - DOMの表示/非表示になったタイミングでイベント実行 MOONGIFT
Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'
Webサイトのガイドライン作成に欠かせないPhotoshopの機能拡張が嬉しいバージョンアップ！アートボードにも対応 -Ink
Ink CC2015にインストールしたので、その手順を。 ダウンロードした「Ink.1.5.3.zip」を解凍します。 CC2015で利用する時は、「Ink.1.5.3」内の「Photoshop CC 2015」フォルダを開きます。 「Photoshop CC 2015」フォルダ内の「Ink.zip」を解凍します。 ※フォルダの中身は変更しないでください。 解凍したInkフォルダを移動するフォルダを開きます。 OS X: ライブラリ\Application Support\Adobe\CEP\extensions\ Win 64: C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\ Win 32: C:\Program Files\Common Files\Adobe\CEP\extensions\ 「extensions」フ
[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up
ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。 ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。 デモの動き スクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="flowup.js"></script> </body> Step 2: HTML 各パネルは、p, div, articleなどで実装します。 <body>
![[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b7675076470053d98f60b5ead221eadfa0c6569/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015100903.png)
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe
表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。 デモページ デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="assets/css/notifyme.css" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/notifyme.js"></scr
![[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe](https://cdn-ak-scissors.b.st-hatena.com/image/square/976bf32a2053071e29221414b5e97a2310fd7694/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014103101.png)
ガイドラインや指示書の作成が楽になる！エレメントやマージンのサイズを書き出してくれるPhotoshopのスクリプト -Size Marks | コリス
エレメントやマージンなど、指定した箇所のサイズを新規レイヤーに書き出すPhotoshopのスクリプトを紹介します。 個人でも商用でも無料で利用でき、ライセンスはMIT licenceです。 Size Marksを使ってるアニメーション（偶然両方とも173pxになってびっくり！） 以前紹介したInkも同様にサイズを書き出してくれますが、ベクターとテキストのデータのみです。エレメントがベクターならInk、ビットマップのエレメントやマージンならSize Marksが便利です。 Inkの特集記事：Photoshopの機能拡張 -Ink Size Marksのインストール Size MarksはPhotoshopのスクリプトで、当方の以下の日本語環境で動作しました。 Photoshop CC 2014 for OS X Photoshop CS 6 for Win7 ※配布ページにはCC 2014
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示（または非表示）させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます（よりエレガントな書き方はあると思いますが）。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
[JS]ページをスクロールし、コンテンツを読み終えたくらいにメッセージやFacebookのパネルを表示するスクリプト -End Page Box
Demo 5 トリガーを複数設定したデモで、パラグラフの奇数番目ごとにパネルが表示されます。 End Page Boxの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.endpage-box.js"></script> <link rel="stylesheet" type="text/css" href="css/endpage-box.css" /> Step 2: HTML コンテンツは通常通りに実装し、パネルは</body>の上あたりに配置しておきます
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
ページデザインの各エレメントのスペックを1クリックで表示するFireworksの機能拡張 -Specctr
メンバーへの指示書、自分の確認、ガイドラインの作成に役立つ、各エレメントのサイズやフォント・カラーなどのスペックをクリック一つで自動表示するFirewoks用の機能拡張を紹介します。 Specctr [ad#ad-2] Specctrの使用感 Specctrのダウンロード Specctrの使用感 Specctr Liteをインストールしてみたので、キャプチャと共に使用方法を紹介します。 メニューの[ウインドウ]からSpecctrを起動します。 Specctrを起動 Specctr Liteでは2種類のスペックを表示できます。 「SPEC」の「Width/Height」ボタンをクリックすると、エレメントの幅と高さのスペックを表示します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
CSS Spider - CSS設定を素早く確認、編集 MOONGIFT
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」