ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とはCSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線（ボーダー）」を付ける方法【 outline 】「枠線（ボーダー）」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加CSSプロパティ【背景関連】
【 background 】背景を設定する方法CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅（フェイス）を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字（漢字）と非表意文字（半角英数字）の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する
【CSS】「CSS」で「スクロールバー」を表示・設定する方法
「CSS」で「スクロールバー」を表示・設定する方法
最初に、
ブラウザによって「スクロールバー」のレイアウト変更ができたり、
できなかったりして、なかなか難しいと思います。
下記の方法で、しっかりと挙動してくれる「ブラウザ」もありますが、
反応しない「ブラウザ」もありました。
ご注意ください。
「CSS」で「スクロールバー」を表示させるには、
「height」プロパティで、
すべての内容が入らない「高さ」になるように設定します。
次に、「overflow-y」プロパティで、
「スクロールバー」を表示する値「scroll」を指定するだけで、
「スクロールバー」を表示することができます。
「スクロールバー」の「幅」「カラー」などを変更することができるので、
・scrollbar-width
・scrollbar-color
などのプロパティを使って、
「スクロールバー」の「CSSレイアウト」を指定していきます。
「scrollbar-width」「scrollbar-color」プロパティができるまでは、
「スクロールバー」のカスタマイズは、
「Webkit」でのみ行えていました。
現在もブラウザによっては、
「scrollbar-width」「scrollbar-color」プロパティに
対応していないこともあるらしい。
現状は、「scrollbar-width」「scrollbar-color」プロパティと
「Webkit」の記述を両方しておくのが無難らしい。
INDEX
「スクロールバー」を扱う場合の注意点
下記の方法で「スクロールバー」の実行テストを行ってみた結果ですが、
・「scrollbar-width」「scrollbar-color」プロパティ
・「Webkit」
ブラウザによって、動作が異なっていて、
反応しないブラウザもありました。
「スクロールバー」に詳しい方ではありませんが、
詳しい方以外での実装には、注意された方が良いと思います。
「スクロールバー」を使用しない方法を選択するのが無難な気がします。
これからの改善に期待。
Back
スクロールバーの構成要素
スクロールバーの構成要素
スクロールバーの構成要素には、「トラック（Track）」と「サム（Thumb）」と呼ばれる部品がある。
・トラック（Track） = スクロールバーのベース部分（背景）
・サム（Thumb） = スクロールバーの調整スライド
で「スクロールバー」が構成されています。
Back
「scrollbar-width」「scrollbar-color」プロパティで「スクロールバー」をカスタマイズする方法
「scrollbar-width」「scrollbar-color」プロパティでの、
「スクロールバー」のカスタマイズが新しくできるようになったようです。
まだ、「カラー」と「横幅」だけのカスタマイズな用で、
「丸み」「シャドウ」「グラデーション」のカスタマイズはできないらしいです。
テストしたら、やはり「丸み」「シャドウ」「グラデーション」は適用されませんでした。
なので、
まだ、従来の「Webkit」での「スクロールバー」カスタマイズが必要らしい。
現段階では、
ブラウザの対応もまちまちらしく、
「Webkit」の記述も必須と言われています。
時間と共に、利用可能なカスタマイズも増えていくと思います。
「scrollbar-width」「scrollbar-color」プロパティで、
「スクロールバー」を「CSS」で表示・設定するには、
・height ---- 表示範囲の高さを指定する
・overflow-y ---- 内容が表示範囲におさまらない時に「スクロールバー」を表示させる設定をする
・scrollbar-width ---- 「スクロールバー」の幅を指定する
・scrollbar-color ---- 「スクロールバー」のカラーを指定する
などが「CSSプロパティ」が必須です。
「スクロールバー」を「CSS」で表示・設定するサンプルコード
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
//-----------------CSS-----------------//
.ScrollBarBox {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
}
//-----------------CSS-----------------//
//-----------------HTML-----------------//
<div class="ScrollBarBox">
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample
</div>
//-----------------HTML-----------------//
//すべての「スクロールバー」に適用したい場合のコード
//「body」タグではなく「html」タグに指定するのがポイント
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
「scrollbar-width」プロパティの使い方
「CSS」の「scrollbar-width」プロパティは、
「スクロールバー」が表示される時に「横幅」の設定をすることができる。
「スクロールバー」が表示されない時には、何も影響しない。
「スクロールバー」の「横幅」は、
「長さ」「キーワード」のどちらかで定義するようになっています。
「scrollbar-width」プロパティの設定サンプルコード
数値
scrollbar-width: 10px;
キーワード値
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
グローバル値
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: unset;
scrollbar-width: 10px;
キーワード値
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
グローバル値
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: unset;
「scrollbar-width」プロパティの値
| 値 | 説明 |
|---|---|
| auto |
デフォルトで設定されている「スクロールバー」の幅 |
| thin |
横幅の細い「スクロールバー」になる設定。 |
| none |
「スクロールバー」は表示されないが、 スクロールができる設定。 |
「scrollbar-color」プロパティの使い方
「CSS」の「scrollbar-color」プロパティは、
「スクロールバー」の「トラック」と「調整スライド（サム（Thumb））」の色を設定します。
「scrollbar-color」プロパティの値は、
2つまで指定できるようになっていて、
一つ目 = 調整スライド（サム（Thumb））
二つ目 = トラック
「scrollbar-color」プロパティの設定サンプルコード
数値 scrollbar-color: 調整スライド トラック;
scrollbar-color: #87ceeb #ff5621;
キーワード値
scrollbar-color: auto;
カラー指定値 scrollbar-color: 調整スライド トラック;
scrollbar-color: yellow blue;
scrollbar-color: rebeccapurple green;
グローバル値 scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: unset;
「scrollbar-color」の値
| 値 | 説明 |
|---|---|
| auto |
デフォルトのカラー。 ほかに、「スクロールバー」の色設定がされていた場合、その設定。 |
| カラー値 カラー値 |
最初のカラー設定 = 調整スライド 2つ目のカラー設定 = 「スクロールバー」背景全体 |
Back
「Webkit」で「スクロールバー」をカスタマイズする方法
以前は、
「スクロールバー」のカスタマイズに対応していたのは、
「Webkit」だけでした。
ですが、ブラウザによって動きが違うので、
「Webkit」の設定は難しい。
現在でも、ブラウザによって、
対応が異なるようなので、
「Webkit」の記述もしておくのが無難らしいです。
「scrollbar-width」「scrollbar-color」プロパティでは、
「丸み」をつけたり、「シャドウ」をつけたり、
「グラデーション」を加えたりができないそうです。
「Webkit」での「スクロールバー」カスタマイズ サンプルコード
「スクロールバー」の部品
・トラック（Track） = スクロールバーのベース部分（背景）
・サム（Thumb） = スクロールバーの調整スライド
.クラス名{
width: 500px;
height: 80px;
overflow-y: scroll;
}
.クラス名::-webkit-scrollbar {
height: 80px;
}
.クラス名::-webkit-scrollbar-track {
background-color: カラー値;
background-color: darkgrey;
}
.クラス名::-webkit-scrollbar-thumb {
background-image: linear-gradient(角度, カラー値 始点, カラー値 終点);
background-image: linear-gradient(150deg, #000000 0%, #FFFFFF 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
//すべての「スクロールバー」に適用する方法
//「セレクタ」の指定をしないことで、全「スクロールバー」が対象になる。
::-webkit-scrollbar {
height: 80px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
「background-clip：content-box」プロパティを追加すると、
背景が「コンテンツの周辺にだけ表示されるようになる。
.クラス名::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: 100px;
background-color: #987654;
background-clip: content-box;
}
Back
