【CSS3活用】こんなデザインのサイトは嫌だ!

2018年3月26日

ウザいサイト

CSS(スタイルシート)はWEBサイトを装飾するための言語で、通常はWEBサイトを読みやすく美しくするために使われます。

しかし、逆にCSSを活用して読みにくくウザいWEBサイトを作ることもできます。次の動画は以前Twitterで公開した色が激しく変化するWEBサイトです。

今回はそんなCSSを使った嫌なサイトのデザインをいくつか考えたので、紹介したいと思います。

こんなデザインのサイトは嫌だ!

主に近年浸透してきたCSS3を活用しています。実際に試してみたい方はPCのChrome等の開発者ツールを使うと良いです(@keyframes系以外)。

サイト全体が左右反転

シンプルですが、サイトはかなり読みにくくなります。

CSSで左右反転したサイト
文字も反転するため読めない

html {
    transform: scale(-1, 1);
}

サイト全体が上下反転

ディスプレイごと上下反転すれば、何とか読めます(笑)

CSSで上下反転したサイト
そういえばPCの画面を上限反転させるという嫌がらせもありましたね

html {
    transform: scale(1, -1);
}

サイト全体を縮める

スクロールが面倒くさいので、サイト全体をY軸方向に縮小させてみました(笑)

CSSで縮小させたサイト
字が潰れて読めない!

html {
    transform: scaleY(0.3);
    transform-origin: 0 0;
}

サイト全体が傾く

まさに斜め上を行くサイトです。

CSSで傾けたサイト
45度回転なら読めないことはない

html {
    transform: rotate(45deg);
}

サイト全体が階調反転

CSSフィルターは主に画像向けのプロパティですが、サイト全体に適用することもできるようです。

CSSで階層反転したサイト
自慢の写真も気持ち悪い色相に

html {
    filter: invert(100%);
}

サイト全体をぼかす

ぼかす量を大きくすると、文字を読めないどころか概要すら分かりません。

CSSでぼかしたサイト
ポク日記はいたって健全なサイトです(笑)

html {
    filter: blur(10px);
}

サイト全体が振動する

@keyframesを使うと、自由自在なアニメーションが可能となります。試しにサイト全体を振動させてみました。

CSSで振動させたサイト
まるで地震
※長く見続けると気分が悪くなるので注意

html {
    animation: shindou 0.15s infinite;
}
@keyframes shindou {
    0%{transform:rotate(0deg) translate(0,0);}
    12.5%{transform:rotate(1deg) translate(2px,-2px);}
    25%{transform:rotate(2deg) translate(0px,2px);}
    37.5%{transform:rotate(1deg) translate(-2px,0);}
    50%{transform:rotate(0deg) translate(0,0);}
    62.5%{transform:rotate(-1deg) translate(2px,0);}
    75%{transform:rotate(-2deg) translate(0,2px);}
    87.5%{transform:rotate(-1deg) translate(-2px,-2px);}
    100%{transform:rotate(0deg) translate(0,0);}
}

サイト全体が回転する

3D的な表現を行うこともできます。サイト全体をY軸を基点として回転させてみます。

CSSで回転させたサイト
作ってる私も気持ち悪くなってきました…

html {
    animation: kaitenY 1s linear infinite;
}
@keyframes kaitenY {
    0% {transform:rotateY(0deg);}
    50% {transform:rotateY(180deg);}
    100% {transform:rotateY(360deg);}
}

サイト全体がフラッシュする

実際にこの部分で実行させてみました。

html {
    animation: flash 1s infinite;
}
@keyframes flash{
    0% {opacity:0.3;}
    100% {opacity:1;}
}

ポクくんのまとめの一言

今回紹介したことはエイプリルフールのネタぐらいにしか使えませんが、部分的に工夫して用いれば、より印象のあるサイトづくりに役立つかもしれません…