2019/09/04ブログなどで関連記事やランキングなどを一覧表示する際、タイル状に並べるのも見やすくていいんですが、場合によっては横スクロールするようにすると便利だったりしますよね。Javascriptを使わずにCSSだけで横スクロールさせることができるので、その方法をご紹介します。LINKCSSだけで横スクロールさせる早速CSSだけで横スクロールさせる方法をご紹介したいのですが、せっかくなので使いやすいように調整したソースコードをご紹介します。パソコンと横スクロールの相性があまり良くないので、「パソコンではタイル型で見せて、スマホになると横スクロールに変化する」という形で作ってみました。最初に図説しておくと、パソコンだとこう見えて、スマホだとこのように右側に記事が隠れた状態で、指を左にスワイプすると記事が右から左にスクロールしてくる形です。ソースコードの書き方実例がこちらです。scroll;でスクロール可能にします。70%;」でサイズを少し小さくして次の項目がはみでるようにすることで横スクロールできることをユーザーに伝えてます。touch;と一緒に書いておきましょう。ディスプレイ幅が479px以下になったらスライダーになるようにしてあります。この幅は下記の記事を参考にして、お好みで調整してください。delaymania続きを読む最後に記事末などに関連記事を置くとき、場合によっては見てもらいやすかったりすると思います。アイデア次第でいろいろ使えるので、ぜひお試しください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。関連する記事をランダム表示WEBデザイン【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法WEBデザイン【CSS】番号付きリスト「ol」を途中から始めたり並び順を逆にしたりする方法WEBデザインブログでインタビュー記事を書くときに便利な吹き出しのデザインを作ってみたWEBデザインCSSで画像を画面いっぱいに広げたデザインを作るには?パソコンでもスマホでも背景画像を全画面表示しよう!WEBデザインCSSで新着記事に新着マークを付ける方法WEBデザインの記事をもっと読む新着記事エンタメモーニング娘。ハマった理由と、EDM路線になってからのモーニング娘。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。