iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
スマホ表示のときテーブルに横スクロールバーを表示するCSS
方法1のやり方で、横にはみだしていたテーブルもなめらかにスクロールして見られるようになりました。 でもちょっと問題なのは、スクロールしているときしかスクロールバーが表示されないところ。これだと、スクロールできるかどうかがパッと見でわからないというデメリットがあります。 スマホでも常にスクロールバーが見えている状態にするため、以下のCSSでスクロールバーの表示をカスタマイズしてみました。 詳しい説明は以下のページにおまかせするとして、::-webkit-scrollbar を使ってスクロールバーの見た目を設定すると、スマホでも常にスクロールバーを表示しておくことができます。 【参考】WebKitを使ってスクロールバーをカスタマイズ | CSSPRO 実際にグレーの濃淡でシンプルなデザインのスクロールバー用CSSを作ってみました。 .scroll-box { overflow-x: auto;
表を横にスクロール可能なレスポンシブテーブルを実装する | Web Tips
公開日：2014年9月26日 最終更新日：2015年1月6日 スクリーンサイズが小さいスマートフォン画面で表組みする際は、はみ出した部分を横にスクロール可能なレスポンシブテーブルという手法を使います。JavaScriptで作った専用のライブラリもありますが、CSS設定だけで簡単に実装する方法を解説します。 作成するテーブルは右図になります。 横幅はスクリーンサイズに応じて変化しますが、640pxをブレイクポイントとして行と列が反対になります。 640pxより小さいスクリーンでは横にスクロール可能なレスポンシブテーブルとなります。 スマホでもPCでも動作するデモページを用意しましたのでご覧ください。 ＞＞ レスポンシブテーブル DEMO ページへ 【コンテンツ】 HTMLコードを作成する CSSコードを作成する HTMLコードを作成する テーブル部分の HTMLコードは以下になります。 注意
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
