【HTML＆CSS】スクロールバーの表示・非表示

新年あけましておめでとうございます。ななです。
ご挨拶が遅れてしまい申し訳ありません。

年末年始はブログがなぜか消えてしまい笑…必死でドメインを取ってやり直しています。いままで書いた投稿やプラグインのデータもなく、テーマしか残っていないので、ほぼ完全にやり直しです…。みなさまはWordPressのバックアップはこまめに取ってください…失敗者からのお願いです。個人的におすすめのバックアッププラグインはBackWPUpです。またこのことも書きます。今回は・・・

CSSで親要素からはみ出した部分の表示をスクロールで行いたいときがたまにあると思います。せっかくなのでまとめてみます。

CSS
overflow-y: scroll;

はみ出した部分の親要素に対してこれで縦方向のスクロールが出来ます。
逆にはみ出した部分を隠したい場合は

CSS
overflow: hidden;

これで隠せます。
なにも操作できずはみ出た部分は読むこともできなくなります。

横方向の場合…想像はつくかと思いますが

CSS
overflow-x: scroll;

これで横方向のスクロールが出来ます。

縦横スクロールしたい！という場合は

CSS
overflow: scroll;

これでOKです。

ちなみにoverflowの初期値はvisibleです。親要素からはみ出して表示されます。autoなどもありそちらも大抵のブラウザではスクロールできるみたいですが個人的には曖昧な表現になるのでちゃんとscrollと書いた方が無難だと思いました。

CSSは初期値を上書きしているということを覚えておくとなにかと役に立ちます。