カーソルをのせて横スクロールすると、動く。
トラックパッドは、主にノートパソコンに搭載されているマウスの代わりになる入力装置です。
最近はマウスやトラックボールの他にトラックパッドを使用する人も良く目にします。
トラックパッドが搭載されていないPCでも外付けで搭載する人がいるぐらい普及しています。
トラックパッドは４本指まで操作が可能です。
| 操作 | 動作 |
| １本指タップ | 左クリック |
| ２本指タップ | 右クリック |
| ３本指タップ | 検索ウィンドウ表示 |
| ４本指タップ | 通知ウィンドウ表示 |
| １本指ドラッグ | カーソル操作 |
| ２本指ドラッグ | スクロール |
| ３本指ドラッグ | ↑：マルチタスク・→：デスクトップ表示・←/↓：アプリ切り替え |
| ４本指ドラッグ | ↑：マルチタスク・→：デスクトップ表示・←/↓：デスクトップ切り替え |
ジェスチャーの変更は、Windowsの場合はトップ画面の「スタート」から設定を選択し、「Bluetoothとデバイス」の「タッチパッド」項目から変えることができます。
トラックパッドは、マウスやトラックボールとは異なり横スクロールができます。
横スクロールは、ECサイトにて商品を紹介、比較する際に並べるウェブデザインを作成するときに便利です。
本記事では、トラックパッドを使って横スクロールするウェブデザイン(HTML/CSS)を紹介します。
横スクロールは、矢印で横にスライドする構成よりも作成しやすいのでおすすめです。
- トラックパッドで横スクロールすると動く。
- ウェブデザインを学びたい。
横スクロール
トラックパッドを使用して横スクロールを可能にすることで、縦スクロールだけでは画面上に収まりきらない大量のコンテンツを表示する際に特に役立ちます。
例えば、水平方向に長い画像ギャラリーやデータのテーブルを表示する場合、横スクロールはスペースの効率的な利用を可能にします。特に画面のサイズが小さいスマホでは、横向きのデザインは扱いやすく、トラックパッドのようにタッチスクリーンを採用しているので非常に扱いやすいです。
一方で、 横スクロールは一般的な縦スクロールに比べてユーザーにとって馴染みが少ない操作方法なので、操作のヒントやガイドを提供する必要があります。
また、レスポンシブデザイン（スマホでのデザイン）の考慮しなければいけません。
HTML
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- 必要な数の.box要素を追加 -->
</div>解説
HTMLコードで、6つのbox要素を含むContainer要素を作成しています。
class「Container」は横スクロールを可能な要素です。
class「Box」はclass「Container」に配置される要素を表します。
CSS
.Container {
display: flex;
overflow-x: scroll;
width: 100%;
}
.Box {
flex-shrink: 0;
width: 300px;
height: 200px;
margin-right: 10px;
border-radius: 10px;
background-color: #ccc;
}
/* スクロールバー非表示 */
.Container::-webkit-scrollbar {
display: none;
}解説
初めに、class「.Container」の構成します。
「display: flex;」: コンテナをフレックスボックスとして表示します。これにより横並びを作成します。
「overflow-x: scroll;」: コンテナの横方向にスクロールバーを表示します。コンテナ内のコンテンツがコンテナの幅を超えた場合にスクロールが可能になります。
「width: 100%;」: コンテナの幅を親要素の幅に合わせます。
つづいて、class「.Box」の構成します。
「flex-shrink: 0;」: ボックス要素の収縮を無効にします。これにより、ボックスの幅がコンテナの幅を超えた場合でも収縮しません。
「width: 300px;」: ボックス要素の幅を300ピクセルに設定します。
「height: 200px;」: ボックス要素の高さを200ピクセルに設定します。
「margin-right: 10px;」: ボックス要素の右側に10ピクセルのマージンを追加します。
「border-radius: 10px;」: ボックス要素の角を10ピクセルの半径で丸めます。
「background-color: #ccc;」: ボックス要素の背景色を灰色（#ccc）に設定します。
最後に、.Container::-webkit-scrollbar:で、スクロールバーを非表示にします。
「display: none;」: スクロールバーを非表示にします。
※このコードはWebkitベースのブラウザ（Google Chrome、Safariなど）でのみ機能します。
Webデザインを学びたい
HTMLやCSSなどはマークアップ言語と呼ばれてプログラミングと異なります。
プログラミングは指示通りに処理がされると完成ですが、
フロントエンドは、Webデザインも重要になります。
デザインの幅を広げたいけれど、コーディングに悩んでいませんか？
美しいデザインを実現するためには、常に新しいスキルを身につけることが重要です。
Udemyは動画でHTMLやCSSの基礎から最新のデザインテクニックを実践形式で学べます。
購入した講座は再生・停止・スキップなどが可能なオンデマンド形式なので、
講座中に独自でアレンジして試行錯誤ができます。
- プロのエンジニアによる講習が受けられる
- 自分のペースで学習を進められる
- オンデマンド形式だから何度でも視聴可能
- 不満足なコースは視聴していても返金可能（返金ポリシー）
HTML/CSS/JavaScriptに興味がある人はUdemy学習を取り入れましょう。
数多くある講座の中から特におすすめな講座を３つ紹介します。
夏のビックセール開催中（8月29日まで）
対象のコースが1300円から（最大95%OFF）
HTML、CSS、JavaScriptの学習ができて、フレームワークの扱い方、セキュリティー、その他プログラミング言語を学ぶために必要な考え方など幅広く情報を網羅している。
WEBシステムの仕組みと挙動、システム構築などWEBシステムの基礎の学習が可能。
JSとCSSに焦点を当てた講座。基礎レベルから実務レベルまで網羅していて、最終的にアニメーションやコードの最適化、安定化について学ぶ。
実演
それでは、本コードを理解したところで動作確認します。
HTMLとCSSを稼働させると以下のように動作します。
まとめ
横スクロールはコンテンツの比較をするときに非常にユーザビリティに優れているので、ECサイト等に導入するときに非常におすすめです。
また、スマホのように画面のサイズデバイスでは、タッチスクリーンを採用横向きのデザインは扱いやすいですが、レスポンシブデザイン（スマホでのデザイン）の考慮すること、横スクロールは一般的な縦スクロールに比べてユーザーにとって馴染みが少ない操作方法で、操作のヒントやガイドを提供する必要があります。
付録．ソースコード（一括）
本記事で扱ったコードをHTMLで一括で記述したものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.Container {
display: flex;
overflow-x: scroll;
width: 100%;
}
.Box {
flex-shrink: 0;
width: 300px;
height: 200px;
margin-right: 10px;
border-radius: 10px;
background-color: #ccc;
}
/* スクロールバー非表示 */
.Container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="Container">
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<div class="Box"></div>
<!-- 必要な数の.box要素を追加 -->
</div>
</body>
</html>
