ユーザースタイルシートのモダンな書き方

公開日:2018-12-26
最終更新:2019-04-05

はじめに

User Style SheetでのWebページのカスタマイズの秘伝のタレをご紹介。
モダンなテイストに仕上げてみました。

いらないものを消し去りたい

素直にdisplay: none;しています。
ただ、ものによってはdisplay: block !important;とかなっていて殺意がわきます悩まされます。

場合によってはheight: 0; width: 0;で消し去れたりもします。

いざとなったら、

#target {  
    position: fixed;  
    top: 100vh;  
    left: 100vw;  
}  

でいなくなってもらいます。

幅を広げたい

いい感じに幅を広げ、空きすぎた隙間を埋めるには、Flexboxを用いると楽です。

CSS3 Flexible Box (可変ボックス)、または flexbox は、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードです。
多くのアプリケーションにおいて、flexible box モデルは、float を使わず、そして flex container のマージンがそのコンテンツのマージンを相殺することも無く、block モデルを超えるための手段を提供します。
CSS flexible box の利用 | MDNより

なんのことやら。

flex レイアウトを定義するねらいは、アイテムの幅や高さを、任意のディスプレイデバイスで使用できる領域を最適に埋めるように変更する能力です。
flex コンテナはアイテムを、使用可能な空き領域を埋めるように引き延ばしたり、はみ出さないように縮めたりします。
CSS flexible box の利用 | MDN(同上)より

いい感じ。

実際に使ってみます。

広げたい要素の親要素にdisplay: flex;を指定します。
(flex itemのmarginが重なり合わなくなるため、場合によっては隙間が空きます。いい感じに調整してください)。

そして、広げたい要素にflex-grow: 1;を指定します。
flex-growは、flex itemの幅を伸ばすものです。

<!DOCTYPE html><meta charset=utf-8>  
<style>  
    body,  
    .float-items {  
        border: 1px solid black;  
    }  

    .float-items {  
        float: left;  
        margin: 8px;  

        height: 100px;  
        width: 100px;  
    }  

    .clear {  
        clear: both;  
    }  
</style>  
<body>  
    <div class=float-items></div>  
    <div class=float-items></div>  
    <div class=float-items></div>  
    <div class=clear></div>  

上記のようなHTMLがあったとします。

.float-itemsを伸長させ、空いてしまった隙間を埋める場合、

body {  
    display: flex;  
}  

.float-items {  
    flex-grow: 1;  
}  

とすれば良いです。

また、

.float-items:nth-of-type(2) {  
    flex-grow: 2;  
}  

を追加すると、2つ目の要素のみ幅が広くなります。
ちょうど、もとの幅(100px)からの増加量が、1 : 2 : 1になります。

1つ目と3つ目 2つ目

Firefoxの開発者ツールはいいぞ!

順番を入れ替えたい

これもまたdisplay: flex;を使っちゃいます。

<!DOCTYPE html><meta charset=utf-8>  
<body>  
    <p>1 - いらない</p>  
    <p>2 - いらない</p>  
    <p id=target>3 - 欲しい</p>  
    <p>4 - いらない</p>  
    <p>5 - いらない</p>  

上記のようなHTMLがあったとして、p#targetを一番上に持ってくるとします。

body {  
    display: flex;  
    flex-direction: column;  
}  

#target {  
    order: -1;  
}  

一番下に持ってくる場合は、order: 1;とします。

(上/下といいましたが、正確には逆方向/順方向といったほうが適切ですね)。

Before After(order: -1;) After(order: 1;)

場所を取り替えたい

HTMLの構造の関係で、display: flex;ではできない場合があります。
そういった場合はdisplay: grid;を使うのが手っ取り早いです。

<!DOCTYPE html><meta charset=utf-8>  
<style>  
    div:not(.clear) {  
        margin: 8px;  
        padding: 8px;  
        border: 1px solid;  
        box-sizing: border-box;  
    }  

    .left {  
        float: left;  
        margin-right: 0 !important;  
        width: calc(75% - 8px / 2 * 3);  
    }  

    .right {  
        float: right;  
        margin-left: 0 !important;  
        width: calc(25% - 8px / 2 * 3);  
    }  

    .left,  
    .right {  
        margin-top: 0 !important;  
    }  

    .clear {  
        clear: both;  
    }  
</style>  
<body>  
    <div class=one>1</div>  
    <div class=two>2</div>  
    <div class="three-one left">3 - 1</div>  
    <div class="three-two right">3 - 2</div>  
    <div class=clear></div>  

このような古典的忘れてしまった日々を思い出させるようなHTMLがあったとします。

このとき、『3 - 2』と『2』を並べ替えるとします。
display: flex;を使おうとすると、横並びの部分がうまくいきません。

そこでdisplay: grid;です。
テーブルレイアウト的な感じにできます。

body {  
    display: grid;  
    grid-template-areas:  
        "one       one      "  
        "two       two      "  
        "three-one three-two";  
    grid-template-columns: 3fr 1fr;  
    grid-gap: 8px;  
}  

div:not(.clear) {  
    margin: 0;  
}  

.one {  
    grid-area: one;  
}  

.two {  
    grid-area: two;  
}  

.three-one {  
    grid-area: three-one;  
}  

.three-two {  
    grid-area: three-two;  
}  

.left,  
.right {  
    float: none;  
    width: 100%;  
}  

.clear {  
    display: none;  
}  

上記のCSSでfloatでのレイアウトをgridを用いたレイアウトに置き換えることができます。

あとはgrid-areaを好きなように変えるだけ。

.two {  
    grid-area: three-two;  
}  

.three-two {  
    grid-area: two;  
}  

おわりに

User Style SheetはWebページのCSSとの戦いです。
頑張ってください。

よきUser Style Sheetライフを!

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする