CSSでwidthを100%指定しても 横スクロールバーが表示されるとスクロール分の長さだけ幅が足りなくなる現象について対策を紹介します。 現象の確認 以下のコードを作成します。 そしてタッチされていないときはスクロールバー非表示になるみたいです。, 個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信していく予定。PHP、JavaScript(jQuery)、CSSがメイン。座右の銘 : 遊びは仕事、仕事は遊び, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。眉毛が太い, jQueryで $ is not define エラーが出たときの一番簡単な解決法, AndroidのIntentから複数画像選択を行う【ACTION_OPEN_DOCUMENT】, CSSの効かない・動かないを解決します CSSのトラブル・質問・レイアウト修正…なんでも相談OK！.
scrolling-wrapper というクラス名、
横のスクロール・横のスクロール・横のスクロール・横のスクロール・横のスクロール ... 縦のスクロール. このページで公開しているサンプルをスマホで操作した時の動きです。, 1枚めくるような動作になるため、漫画やプレゼン資料を公開したい時などに向いています。, スクロールスナップの実現は「scroll-snap-type」を親要素に指定することで実装できます。, ただし、出来たばかりのプロパティということで、古いブラウザには対応していない可能性があることは注意しておきましょう。, ただし、各ブラウザ毎に挙動が違い、中でもPC版Google Chromeはかなり使いづらい動きを取ります。, スマホではAndroidのGalaxyなどが標準採用しているサムスンブラウザは対応していませんが、スクロール自体は問題なく動きます。, パソコンの方はスライドバーで移動を、スマホの方は横方向にスワイプを試してみてください。, スマホはフレキシブルに動きますが、パソコンのGoogle Chromeブラウザでは、スクロールバーを長押ししないと移動しないため、中々不便かも。, そもそもパソコンのユーザーに横スクロールを強いるのはユーザビリティが悪いので、スマホユーザー向けのデザインと言えそうです。, また、レイアウトはcssのフレックスボックス（display:flex）を採用しています。, 子要素のwidthを33.33%などに狭めると、一度に3要素まで表示されるカルーセルのようなデザインにも出来ます。, 前述しましたが、パソコンで横スクロールを強いるのはユーザーに優しくないため、パソコンなどの画面領域が広いデバイスは、縦並びに変更できます。, media設定を入れてあげることで、パソコンの場合は「縦並び」表示にもできますのでお試しください。, 縦スライドは、横スライドと少し仕様を変えていますので、ソースコードをご確認ください。, パソコンの方はスライドバーやマウスホイールでスクロールを、スマホの方は縦方向にスワイプを試してみてください。, 画面全体をスクロールスナップ化して、縦スクロールで画面を変化させていくオシャレなホームページをたまに見かけますが、そのような動きを再現できそうですね。, 子要素に設定するscroll-snap-alignのプロパティを変更することで、停止位置を決めることが出来ます。, 子要素が親要素の大きさに対して小さい場合、複数の子要素が映る場合にどのようにスライドさせたいかを決定できます。, 3つのプロパティのデモを用意しましたのでご確認ください。。 思いのほか簡単に作れたので、 スライド（スワイプ）で簡単に要素を切り替えることが出来るCSS「スクロールスナップ」についてご紹介します。, JavaScript（jQuery）で今までやらざるを得なかったスライド動作をCSSのみで軽快に行うことが出来ます。, スクロールスナップとは、ユーザーがスライド動作、スマホではスワイプ動作を行った時に、要素を特定の位置で静止させるスクロールが実現できます。, 実際に見たほうが分かりやすいので、下記のGIFアニメーションをご確認ください。 横スクロールさせるのに必要な知識; 横スクロールリストを作る手順＆コード例. 初心者向けにCSSのスクロールバーを表示、非表示にする方法について解説しています。overflowプロパティを使うことでスクロールバーの表示・非表示を指定することができます。書き方と画面上での見え方をサンプルで確認しましょう。 overflow-x: scroll; で横方向のスクロールを有効化、 このページの目次. 横スライドで動作するスクロールスナップについて、ソースコードと表示デモです。 横スライドのcss+html 「以下デモ用のデザイン」は、各々の好みに合わせて調整してく … ページ内リンクをクリックした際、通常は一瞬でリンク先に移動します。別にそれでも問題は無いんですが、ユーザーが「今ページの何処に飛ばされたのか」を把握するためにはスクロールバーを見なきゃいけません。これちょっと気持ち悪いんですよね。
ここでは CSSだけで横スクロールリストを作る方法 をまとめときます。, リスト要素には item とクラス名を割り振っておきます。, ポイントは こんにちは、福岡のホームページ制作会社アイドットデザインの芦刈です。 HTMLで組んだテーブル表で、行（横軸）を固定してスクロール方法と、列（縦軸）を固定してスクロールする方法をご紹介します。 特に難しい技術は必要なく、CSSプロパティの「position: Appleのサイトなどにあるような、横スクロールタイプのナビゲーションをCSSのみで実装するの巻。, タッチデバイスの台頭以降、今では横スクロールは珍しいものでもなんでもなくなってきました。そして、メニュー項目についても横スクロールで実装しているサイトも多くみかけるようになりました。というわけで、仕事で作る機会があったので作ってみました。, CSSのみで実装できます。JavaScript等は不要です。まずはサンプルとサンプルコードをご覧ください。できる限りシンプルな記述で実装しました。, Appleのサイトのような、横スクロールタイプのナビゲーションメニューのサンプルを見る, 忙しい方は、コピペですぐに実装できます。htmlとcssだけで行けます。stylus使いの方のためにstylも用意しました。, クセ者は「スクロールバーを表示させない」というもの。こと、某crosoft製のブラウザではスクロールしてなくても常時表示される残念仕様なので、非表示にさせます。, まずHTML側から。構造は、メニューオブジェクト ul を2つのブロックでラップします。今回はナビゲーションなので、一番外側のブロックを nav.scroll-nav、それに内包されるブロックを .scroll-nav__view とします。で、.scroll-nav__view の中に、メニュー本体である ul.scroll-nav__list を配置します。, 「外側 + スクロールするメニュー の2層でよくね？」とお思いかも知れませんが、「スクロールバーの非表示」を実装するためには、残念ながら3層にする必要がありました。詳しくは後述します。, 次にCSS側。スクロールバーなし横スクロールメニューを実現するためには、2つの大きなポイントがあります。ポイントを絞って解説していきます。, というわけで、これを実装していきます。実装は、内側からやっていきましょう。まずはメニュー本体から。, まず、どうやって親要素からはみ出させるかという問題を解決します。通常の display: block;, display: inline-block;, display: inline な要素では、最大横幅を数値指定しない限り、親要素の横幅を超えることは（スペースのない英文をひたすら羅列などしない限り）基本的にはできません。でも、だからと言ってメニュー全体の幅を測って数値指定するのはご法度。自動的に中身なりの横幅になってもらわなければいけません。そこで、このメニュー要素（ul）を display: table; 、メニューの各項目（li）を display: table-cell; に設定し、テーブル化させます。, これによって、まずメニューの各項目（li）がテーブルセル th td みたいな挙動になり、つまり横並びになります。, また、テーブルセルを内包する要素（つまりテーブル）は、横幅がテーブルの親要素を超えそうな時、内包するテーブルセルの幅をできる限り縮めて表示しますが、それでも親要素の幅に収まりきらない場合は親要素の幅を超えて表示される性質がありますので、これを利用します。さらに、テーブルのもうひとつの特長として、幅指定をしない限りは中身なりの最小横幅になりますので、後述の margin: auto; による中央寄せが可能になります。, li要素を横並びにするのは display: table-cell; じゃなくて display: inline-block; とか display: inline; とかでいいんじゃね？って気もしますが、実際は table-cell じゃないとうまくいきません。親要素がdisplay: table; の場合、inlineや inline-block では横並びにならないのです。, また、ul要素も display: table; じゃなくて display: inline; や display: inline-block; でもよさげな気がしますが、こちらも table 以外ではうまくいきません。 inline はこの後登場する、スクロールバーを消す際に設定するpaddingが無効になるし、inline-block の場合はmargin: auto; が無効になるので、大画面時に中央寄せにすることができません。もちろん、中央寄せが不要なら大丈夫です。, もうひとつ。メニュー項目の文字列に半角スペースがあったり日本語だったりする場合、テーブルセルが収縮した時に改行されてしまうので、これを解決するために li.scroll-nav__item に white-space: nowrap; を設定します。, なお、display: table; ではなく display: flex; （Flexbox）を使ってもできないことはありませんが、小画面時には左寄せ、大画面時には中央寄せ、という実装を考慮するとtableの方がシンプルに実装できるため、あえてFlexboxを使う必要はないと思いました。中央寄せが不要ならFlexboxで実装可です。, これで、ひとまずメニューオブジェクトは一段落。（後で戻ってきますが。）次は外側のビューを設定していきます。, 前述のとおり、この人の役割は、内包する横にめちゃめちゃ長いメニュー本体をスクロール表示させることです。つまり、ここに overflow-x: scroll; を設定します。また、タッチデバイス等でスクロールに慣性を持たせるための -webkit-overflow-scrolling: touch; も、スクロール対象の親であるここに書きます。, これでひとまずスクロールメニューの実装は完成しますが、現状ではスクロールバーが表示されます。ChromeやSafariのように、スクロール中だけちょこっと表示されるなら問題ないのですが、某crosoft製のブラウザでは、ものものしいスクロールバーが常時表示され、残念な見た目になります。というわけで、これを非表示にします。, 残念ながら、スクロールバーはCSSの設定では消せません。scroll-bar: hidden; みたいなのがあれば楽なんですが。タッチデバイスのネイティブアプリとは違い、ポインタデバイスでも使われるブラウザはユーザビリティ的に非表示にはできない、ということなのでしょうか。というわけで、セコ技を使って消すしかありません。なのでハックと表現します。, 方法としては、スクロールバーが表示される部分を隠して見えなくしてしまおう、ということです。以下解説します。, まず、スクロールバーがどこに表示されるかというと、言うまでもなく「スクロールされる要素（はみ出してる要素）を内包している親要素」に表示されます。今回の例では .scroll-nav__view に表示されます。, で、スクロールバーの表示はブラウザによって異なりますが、いずれもビューの下側に表示されることは共通しています。というわけで、スクロールバーを隠すには、以下のオペレーションで行けそうです。, まず、.scroll-nav__view の下側に padding: 0 0 24px 0; などとしてpaddingをつけます。一括設定にしているのは、ulがもともと持っているpadding-leftのリセットも兼ねて。, これまでは、.scroll-nav__view の高さは中身なりの高さ（= メニューの高さ）だったのが、24pxの余白分の高さが下側に追加された形になります。, 最後に仕上げです。.scroll-nav__view の親要素である nav.scroll-nav の高さを、本来のメニューの高さに設定します。今回の場合メニューの高さは48pxになるようにしているので、height: 48px; とします。この時、内包する .scroll-nav__view の高さは48px + 24px（余分な余白）、つまりoverflowしているので、overflow-y: hidden; を書いて余分な余白部分を表示もスクロールもできないようにします。, 実際はこの隠した部分にスクロールバーが表示されていますが、これで完全に見えなくすることに成功！というあんばいです。これにて完成！, 実際、同じ手法でスクロールバーが隠されていました。隠されたエリアをひっぺがすと、実際ににスクロールバーが出てきます。興味のある方はお試しください。, Appleのサイトのような、横スクロールするナビゲーションメニューのサンプル | e-JOINT.jp, CSSのみでAppleのサイトのような横スクロールするナビゲーションメニューを作る, メニューの横幅が親要素の横幅からはみ出さなければならないが、サイズ指定はしたくない, スクロールバーは下に表示される = 余分な余白（padding）のエリアにスクロールバーが表示される, ビューの親要素の高さを、本来表示する高さに設定して、スクロールバーが表示される余分な余白（padding）部分を隠す. ボックス 関連ページ. 縦のスクロール. ECサイトのトップページファーストビューや、ブログ等で関連記事、ランキング等を一覧表示する際、横スクロールを利用することはよくありますよね。そんなとき、Javascriptを利用せずにCSSだけでも横スクロールを実現することができるので、その方法を紹介します。 overflow-y: hidden; で縦方向のスクロールはしないように調整していることです。, 一方のモバイルだと、スクロールバーが薄い見た目に、 もうちょっと細かいことを言うと、各ページには上下左右にマージン（余白）がついています。 一方で僕らのWebで縦書きCSSを行うと通常はこのようになります。 ↑ 横スクロールですね（カクヨムの縦書き表示画面です） Webなのでページは当然スクロール！ 1．まずリスト要素とアイテム要素作成; 2．横スクロールできるcssをリストに適用; 実際の見た目とか動作例はこんな感じ; ここまでのまとめ
横スライドのスクロールスナップ. リストアイテム要素には
縦のスクロール. ※デモ用に、子要素は親要素に対して横幅を80%に設定しております。, scroll-snap-align:centerは要素の中央位置を基準に切り替えます。, このような動的な動きは、基本的にJavaScript（jQuery）だよりで実装していたのはもう過去の話。, 使いどころを見極めれば、サイトを彩る動きを取り入れることが出来ますので、是非お試しください。, 本業はWEBプログラマー。趣味でもいくつかのゲームサイトを運営し、累計1億PVを突破。, CSSのflexboxの各種プロパティについてまとめました！横並びや縦並びなどを柔軟に設定できるため、レスポンシブデザインにも向いている非常に便利なプロパティです。.