CSSを使用してスクロールバーを非表示にする方法
スクロールバーとユーザーエクスペリエンス
ユーザーは、Webサイトをナビゲートするときに特定のエクスペリエンスに慣れています。たとえば、サイトの左上隅にあるビジネスのロゴがホームページに移動することを期待します。しかし、そうでない場合はどうなりますか？そのサイトのすべてが反対を実行した場合はどうなりますか あなたはそれが何をするだろうと思ったのですか？
スクロールバーが存在するかどうか想像してみてください。ただし、マウスのスクロールボタンを動かしたり、デバイスのトラックパッドを指でドラッグしたりしても、何も起こりませんでした。 。それは恐ろしいユーザーエクスペリエンスと見なされます 。
優れたユーザーエクスペリエンスを生み出したり壊したりするのは、それ自体が投稿である可能性がありますが、その一部は、スクロールバーが適切に機能し、美観のためにスクロールバーを非表示にする機能です。
スクロールバーは、Webページに何が表示されるかを示す非常に優れた指標です。スクロールバーが表示されている場合は、コンテンツを表示するために下にスクロールする必要があると予想されます。スクロールバーが表示されない場合、通常は次の2つの理由のいずれかが原因です。
- 表示されるのは取得したものです。ビューポート（画面）の高さと幅は、サイトの高さと幅と一致します。
- サイトのデザインには、スクロールによって利用できるコンテンツがもっとあることを示す、ある種のアニメーション化された矢印または機能が組み込まれています。スクロールを開始したときにのみ、スクロールバーが表示されます。それまでは非表示のままにするのがデフォルトです。
開発者として、適切なスクロールバーの使用を実装すると、サイトのユーザーエクスペリエンスが向上し、クライアントがサイトにとどまるようになります。
補足： 意図的にするときは、必ず水平スクロールバーを使用してください。 それらを使いたい。サイトに意図せずに表示される場合は、通常、コンポーネントのサイズに問題があることが原因です。水平スクロールバーが存在してはならないときに、意図的に非表示にしないでください。
CSSの実装
この実装について最初に注意することは、すべての主要なブラウザーが同じように作成されているわけではないということです。 Firefoxで機能するものは、ChromeまたはInternetExplorerでは機能しません。その逆も同様です。 CSSは、私たちがベンダープレフィックスと呼ぶものを採用しています またはブラウザプレフィックス クロスブラウザサポートの提供を支援します。以下にリストします：
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
ベンダープレフィックスに関するチートシート
| ベンダープレフィックス | 対象となるブラウザ |
| -webkit- | Chrome、Safari、新しいバージョンのOpera、およびFirefoxforiOSを含むほとんどのiOSブラウザ |
| -moz- | Firefox（iOSではない） |
| -o- | 古いバージョンのOpera |
| -ms- | InternetExplorerとMSEdge |
URL： クレジット：MDN –CSSプレフィックス
代替テキスト：Mozilla Developer Networkは、使用するプレフィックスを記憶するための便利なチートシートを作成しました
キャプション： MDNは、どのブラウザにどのプレフィックスを使用するかを覚えておくための便利なチートシートを作成しました
問題は、プレフィックスが必要な場合と不要な場合をどのようにして知るかということです。 CSSを作成する人は、常に新しいプロパティと新しい方法を試しています。かなり新しいプロパティがある場合、まだすべてのブラウザで互換性があるとは限りません。
ありがたいことに、CSSを調べて、必要なプレフィックスを追加するツールが利用可能です。また、手動で実行し、caniuseやMDN docsなどのサイトを使用して、ブラウザーの互換性を判断することもできます。
コードを書きましょう！
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
このコードをChromeで実行すると、灰色のdiv背景と、スクロールできるテキストが生成されます。最も一般的な2つの実装が含まれています–Firefoxは<style>のコードの先頭にあります 鬼ごっこ。他のほとんどすべては、–webkitプレフィックス付きプロパティにあります。
実装で気付くのは、スクロールバーがないことですが、それでもスクロールバーの機能はあります。これは、CSSでスクロールバーを非表示にするいくつかの方法の1つです。他に何があなたのために働いていますか？別の方法を見つけることができるかどうかを確認するために、コードを試してみてください。
-
ガイド付きアクセスとは?その使用方法は?
人々は、携帯電話を渡した瞬間に周囲をのぞき見する傾向があります。たとえば、面白い写真をチェックするために携帯電話を友人に渡すと、友人はスクロールを開始し、次に知っていることとして、あなたの個人的なものを調べ始めます。これを避けるために、Apple には Guided Access と呼ばれる機能があります。 画像クレジット: いもれ.com ガイド付きアクセスは、iPhone および iPad を使用しているときに一度に 1 つのタスクに集中できるようにするアクセシビリティ機能です。デバイスを 1 つのアプリに限定するだけでなく、アプリの機能も制御できます。 ガイド付きアクセスが有効な場合
-
RSS フィードの概要と使用方法
読書は、十分な知識を得るだけでなく、対人スキルにも役立つ健康的な習慣です。インターネットを使えば、紙を節約して環境に配慮することができるようになりましたが、特に読む価値のあるものを見つけようとすると、頭痛の種にもなります。読み取り可能なコンテンツの選択は、大量のコレクションが原因でインターネットを読む際に直面する可能性がある主要な問題の 1 つです。 この問題を解決するために、RSS フィードが開発されました。これにより、コンテンツを読んだり見たりする時間を節約できます。 RSS を使用すると、購読している作成者 (Web サイト) から RSS アグリゲーター (プログラム) にアクセスし