これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」
pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプトです。何の設定も無くJSとCSSを読み込むだけで上デモのようにページロードのプログレスバーを表示してくれます。 非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます。 プログレスバーはCSSで管理されており、いくつか選べるようになっています。プロジェクトページでCSSがダウンロードできるのでお好みのスタイルを選んでください。 <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css[data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betwe
)
LogBox - 開発者ツールを開かずにエラーを補足する
Webサイトを訪問していて何かJavaScriptのエラーなどが起こった際、開発者ツールを立ち上げる必要があります。逆にいえば、開発者ツールを開いていないとエラーに気付かない可能性もあります。これは開発者にとっては面倒な一手間です。 今回紹介するLogBoxは開発者ツールを開かずにエラーを報告してくれるGoogle Chrome機能拡張です。 LogBoxの使い方 例えばMOONGIFTを見た場合。Twitterのいいね数を表示するウィジェットがエラーになっていました…。 LogBoxを使えば、開発者ツールを立ち上げる前に、とりあえずエラーが出ているのかどうかがすぐに分かります。LogBoxをインストールした状態でサイトを巡回したりしていると、エラーが出ているのがすぐに分かり、改善につなげられるでしょう。 LogBoxはTypeScript製のソフトウェア（ソースコードは公開されていますが
PiP any site - Picture in PictureでWebサイトを表示するGoogle Chrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザで動作を再生している際、スクロールすると動画が見られなくなってしまいます。動画の説明文が長かったりすると不便です。そこで使えるのがPicture in Picture（以下PiP）になります。 このPiPはWebブラウザのAPI（chrome.tabCapture APIなど）として提供されており、何も動画に限らず使えます。それを試せるのがPiP any siteです。 PiP any siteの使い方 使っているところです。右下にPiPで同じWebサイトを表示しています。 使っているところです。PiPで表示されているWebサイトがメインウィンドウと同じようにスクロールしているのが分かります。 PiP any siteはメインウィンドウで表示している内容をそのまま投影
mobileSelect - モバイル特化型のドロップリスト
スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。 よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します。 mobileSelectの使い方 デモです。選択肢が一つの場合。 複数の選択肢がある場合。 こんな複雑なものも。ダイヤル式ロックのようです。 さらに複数の選択肢を連携させることもできます。 最初の選択肢によって次の選択肢が出る場合と出ない場合を作れます。 mobileSelectはスマートフォンに特化したUI/UXになっています。特に複数選択肢を一度のドロップダウンで行えるのは便利です。PC向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリ
Paged.js - Webページを電子書籍風に表示するCSS Paged MediaのPolyfill MOONGIFT
Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。 いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。 Paged.jsの使い方 これはePubファイルという訳ではありません。HTMLに書かれた文書をこのようにページ区切りにして表示できます。 日本語や画像も表示できます。 目次も出せます。 数式表示も対応。 CSSなのでダイナミックにレイアウト変更できます。 Paged.jsではページサイズ、ヘッダーやフッターの設定、マージンなど細かな指定が可能です。ePubファイルを読み込んで表示する機能もあります。小説サイトのコンテンツもPaged.jsで表示すれば楽しみ方が増えることでしょう。 Page
iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
indigo-player - 高い拡張性を誇る動画プレイヤー
videoタグの登場によってWeb上でも動画が再生できるようになりました。しかし機能的には実に簡素で、ただ再生する以上の機能がありません。大抵は別途ライブラリを用意して、そのライブラリ経由でvideoタグを使うでしょう。 今回紹介するindigo-playerもそんな動画プレイヤーの一つです。扱える動画が多いのが特徴です。 indigo-playerの使い方 見て分かる通り、標準では機能はあまり多くありません。 PinPにする機能もあります。 indigo-playerはMPEG4の他、Dash（DRM含む）やHLSに対応しています。さらに動画の前や途中で広告を表示したり、WebVTTを使った字幕表示も可能です。標準機能は多くありませんが、拡張が容易に行える設計になっているようです。 indigo-playerはTypeScript製のオープンソース・ソフトウェア（Apache Licne
「Google Fonts」にfont-displayを適用する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【2019/7/22 追記】 Google Fontsから公式にfont-display適用方法が提供されました！ クエリパラメータ display によって、font-displayの適用が可能になりました！ 合わせて、Google Fontsから提供されるlinkタグに、デフォルトでfont-display: swap;が設定されるようになっています。 詳細については、こちらのGitHub Issueをご参照ください。 こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、「Google Fontsへのリクエストは、Google Fontsから提供されるlinkタグをそのまま使用するのがベスト」とまとめました。実際、ブラウザに応じて最適なフォント形式が自動的に取得され、場合によってはunicode-range属性も併用されるのでメリットは大きいです。 ただし、一点だけ、デ
Debucsser - CSS情報を可視化してデバッグをサポート
CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。 そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。 Debucsserの使い方 Ctrlキーを押すと、マウスが当たっているDOMのクラス名、ID名が分かります。 Ctrl+Shiftで常に表示モードに変わります。 CSSを構造的に管理する上で、クラス名やID名は欠かせないものでしょう。Debucsserを使えばDOMごとに枠が表示されるので、どの部分が関わっているのかが分かりやすくなります。開発者ツールとはまた異なる使い勝手でしょう。 DebucsserはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 デモ l
Moving Backgrounds With Mouse Position | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: <div class="module" id="module"></div> And you toss a background on it: .module { background-image: url(big-image.jpg);
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'
ウェブページにPDFを直接表示する方法
ウェブページにPDFを直接表示する方法を紹介します。 １．はじめに PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。 ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。 が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。 ということで、ウェブページにPDFを直接表示する方法を紹介します。 ２．ウェブページにPDFを直接表示する ウェブページにPDFを直接表示するには、PDF.jsを利用します。 PDF.jsのページにアクセスして「Download」をクリック。 ダウンロードした「pdfjs-1.4.20-dist.zip（2016年7月時点のバージョン）」を展開します。 展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。 そしてHTML（index.
緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする
Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery/* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ $(function() { //Googlemapのセッティング var koukyo = new google.maps.LatLng(35.685175, 139.7528), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 15, center: koukyo, mapTypeId: google.maps.MapT
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
TouchPoint.js·マウスクリックをビジュアル化 MOONGIFT
プレゼンでデモをやったり、デモ動画を撮る時に思うのはキーボードやマウスの入力を見ている人がはっきりと分かるようにするというのは難しいと言うことです。突然文字が入力されたり、小さなマウスポインタが動いたりするのは分かりづらいことこの上ありません。 そこで使ってみたいのがTouchPoint.jsです。Webブラウザにおけるマウスポインタのクリックをビジュアル化してくれるライブラリです。 TouchPoint.jsの使い方 TouchPoint.jsを使ったデモのアニメーションGIFになります。クリックすると赤い波紋が広がります。 色は変更できます。 スクリーンキャスティングはもちろん、ユーザテストの際に使ったりしても面白いかと思います。Webサイトのデモを見せる時に使うと聴衆も分かりやすくなるでしょう。 TouchPoint.jsはJavaScript製、MIT Licenseのオープンソー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で地図を表示する無料で最短の道 - Qiita
