scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
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向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリ
KeyPose - 入力しているキーを表示
チュートリアル動画などを撮っていて困るのがキーボードショートカットです。何を入力しているか、視聴者からは見えないので口で説明したり、マウスで操作しなければなりません。プログラミングなどを行っていると、説明しながら入力するのは大変です。 そこで使ってみたいのがKeyPoseです。入力されているキーを可視化してくれるユーティリティです。 KeyPoseの使い方 キー入力したところです。その文字が画面下に表示されます。 ショートカットキーを使った場合。CTRL+までは出るのですが、その後に入力したキーは表示されませんでした。 KeyPoseを使うことで、閲覧者も何を入力しているかが分かるようになります。ただしパスワードのようなものを入力する際には扱いに注意が必要でしょう。コーチングであったり、プレゼンテーションなどでも使えそうなソフトウェアです。 KeyPoseはC#製のソフトウェア（ソースコー
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result たまに見かけるコンテンツの表示/非表示のトグルです css.expand {/*全体*/ width: 300px; padding:15px 10px; max-height: 80px; overflow: hidden; position: relative; border-bottom: 1px solid #aaa; transition: .5s; } .expand::before {/*グラデーション部分*/ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; transition: 1s; }
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
tableの行をクリックすると下部に詳細が表示される
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
jQueryでファイル選択時にプレビュー表示する方法
jQueryでファイル選択時にプレビュー表示する方法を紹介します。 １．はじめに フォームのファイル選択で画像を選択したときに画像のプレビューを表示したい場合があると思います。 ということで、jQueryを使って画像をプレビュー表示する方法を紹介します。 ２．ファイル選択時にプレビュー表示する まず、下記のファイル選択フォームを用意します。 <form> <input type="file" id="file" /> </form> <div id="result"></div> そして次のjQueryを追加します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#file').change(function(){ $('img').remove()
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のオープンソー
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
![[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/46be404c8d2f64ff7f9750d80ed6af78be5437ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080501.gif)
CSSでヘッダを固定したスクロールテーブルを作る方法
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 １．はじめに 次のようなHTMLでテーブルを作成しました。 <style> table { border-collapse: collapse; border-spacing: 0; } th { background-color: #ccc; } th, td { border: 1px solid #666; padding: 5px; } .key, .value { width: 100px; } </style> <table> <thead> <tr><th class="key">キー</th><th class="value">値</th></tr> </thead> <tbody> <tr><td class="key">1</td><td class="value">aaa</td></tr> <tr>
[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
![[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg](https://cdn-ak-scissors.b.st-hatena.com/image/square/7216083dac49099812cea7a817f39a5b9988bd38/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021301.png)
jQueryでページ分割ができる「SimplePaginationプラグイン」
jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。 １．はじめに ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。 が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。 ２．プラグインのダウンロード SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にある、 jquery.simplePagination.js simplePagination.css を利用します。 ３．基本 ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。 <div clas
ガイドラインや指示書の作成が楽になる！エレメントやマージンのサイズを書き出してくれる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]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上：ユーザースタイル、下：半透明スタイル デモページ：オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lazy-loading Google Maps by Osvaldas Valutis
why-we-broke-our-philosophical-vows-to-bring-you-circleci-2-0
