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

2018年3月26日2020年3月20日

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

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

【観覧注意】「こんなサイトは嫌だ！」ということで、色が激しく変化するWEBサイトを作ってみました。一応色の変わる周期は落としてありますが、心臓の弱いかたは見ないほうが良いです。 pic.twitter.com/15LK0oKcoU

— ポクくん (@poku_kun) 2017年10月26日

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

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

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

サイト全体が左右反転

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

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

サイト全体が上下反転

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

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

サイト全体を縮める

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

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

サイト全体が傾く

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

html {
    transform: rotate(45deg);
}

サイト全体が階調反転

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

html {
    filter: invert(100%);
}

サイト全体をぼかす

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

html {
    filter: blur(10px);
}

サイト全体が振動する

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

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軸を基点として回転させてみます。

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

ポクくんのまとめの一言

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