white-spaceホワイトスペースをどう扱うかの設定。これさえ知っておけばOK。スゴク簡単に作れるんです。横スクロールリストを作る手順&コード例ここでは次の2条件を満たすリストを作ってみます。横一列にアイテムを並べるはみ出た場合、スクロール可能この条件で考えるなら、以下のように作成可能1.まずリスト要素とアイテム要素作成まず横スクロールリストのHTMLの内容です。クラス名を割り振っておきます。今回リストに適用したのは、次のCSSコードです。inline-block;}これで横スクロールリストの完成。縦方向のスクロールはしないように調整していることです。あとは特に言うことなし。自分でいうのもアレだけど、本当に簡単ですね。スクロールリストだから、PCとスマホだと動作が微妙に違うんですよね。実際にパソコン・モバイルで動かしたときの見た目・様子がコチラです。スマホで見たときPCだと思いっきりスクロールバーが表示されます。一方のモバイルだと、スクロールバーが薄い見た目に、そしてタッチされていないときはスクロールバー非表示になるみたいです。スマホ上でスクロールしたときスマホだとスクロール時しかバー表示されない模様。いう横スクロールリストは色々なとこで使えて汎用性も高そうです。ここまでのまとめ以上、CSSだけで横スクロールリストを作る方法でした。jQuery系ライブラリ(スライダープラグインとか)を使う手もあります。「そこまで必要じゃないし」という場合、こういうのが便利かもしれません。CSS横スクロールは使い勝手よさそうです。技術系ブログを始めたいプログラマーやエンジニアの方におすすめです。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信していく予定。PHP、JavaScript(jQuery)、CSSがメイン。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*Website上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。副業とかビジネスのアレコレ未分類JavaScriptjQueryPHPCSSWordPressこんなアプリも作ってます。3Dドット絵メーカー(オープンベータ版)3Dドット絵(ボクセルアート)を作れるアプリ。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。