ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

2023/04/06 119 users ICS MEDIA HTML ユーザーインタラクション 紹介

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、... 続きを読む

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2021/11/11 144 users 終点 連鎖 CSS ナビゲーション スクロール

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed コリス position パーセンテージ CSS

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

ヒューゴー、ネビュラ、ローカスと主要ＳＦ賞を総なめにした、エモーショナルな往復書簡時間ＳＦ──『こうしてあなたたちは時間戦争に負ける』 - 基本読書

2021/06/17 815 users ローカス ヒューゴー ネビュラ マックス エル

こうしてあなたたちは時間戦争に負ける (新☆ハヤカワ・ＳＦ・シリーズ) 作者:アマル･エル＝モータル,マックス･グラッドストン早川書房Amazonこの『こうしてあなたたちは時間戦争に負ける』は、アマル･エル＝モータル、マックス･グラッドスト二人の共作による、詩的な時間SFである。英語圏における小説の長さの基準的には... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button インタラクション button要素 要素

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック | コリス

2019/06/18 215 users コリス CSS テクニック JavaScript 場所

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptの... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users コリス アコーディオン パララックスエフェクト スライダー

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

モーダルを閉じるボタンのUIは右か左か | Reflection

2014/07/23 173 users Reflection ナビゲーションバー iOS トリガー

モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内... 続きを読む

最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills | コリス

2014/04/16 387 users Refills コリス ブッダ アコーディオン ヘッダ

ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。 Refills Refills -GitHub デモでは、さまざまなコンポーネントの動作が確認できます。 ナビゲーション 下に半分見えてるのは、打ち出しコンテンツ 各デモの「Show C... 続きを読む

iOS7のアプリを作るときに使えるHTMLフレームワーク『Framework7』 | IDEA*IDEA

2014/03/21 182 users IDEA HTMLフレームワーク ネイティブ iOS7 アプリ

こちらもメモ的に。ネイティブではないですが、ちゃちゃっと作るのにいいかも。 ↑ iOS7のフラットデザインにあった部品集です。 ↑ メディアリストとか。 ↑ モーダルなんかもいいですね。 詳細は以下からどうぞ。 » Framework7 – Full Featured HTML Framework For Building iOS7 Apps 続きを読む