「HTML要素以外のものをCSSで設定したら？」を集めた「CSSユーモア」がクスっときて楽しい

先日、海外製ツールの使い方を調べていたら、CSS Humorというサイトを見つけました。

このサイト、ある程度CSS知識が必要ですが、思わず笑ってしまうCSS大喜利サイトだったので紹介です。

photo by Andy Hay

CSSユーモアとは

CSS Humorは、HTML要素以外のものをスタイルシートのプロパティーと値で表すCSSジョークサイトです。

Twitterアカウント（@CSSHumor）でもツイートされています。

このサイトは、CSSを触ったことがない人なら、何のことかわからないかもしれません。けれど、ある程度CSSを使える人なら思わずクスっとしてしまうような、楽しいCSSがいろいろ掲載されています。

CSS Humor

CSS Humorには、様々なCSS設定が掲載されていますが、個人的に好きだったものを、いくつか紹介です。

ピサの斜塔

#Pisa { font-style: italic; }

1	#Pisa { font-style: italic; }

From mohammed

ロンドン

#london {
  background-color: gray;
}

#london {

background-color: gray;

}

From Funa

#british.weather { clear: none; }

1	#british.weather { clear: none; }

From @kasperoo

珈琲

.coffee { color: black; }

.coffee + .cream { color: brown; }

.coffee { color: black; }

.coffee + .cream { color: brown; }

From @mikeleeorg

バットマン

#Batman {
  background-color: #000;
  opacity: 0.3;
}

#Batman {

background-color: #000;

opacity: 0.3;

}

From @iiisoni

ハルク

#hulk {
  height: 200%;
  width: 200%;
  color: green;
}

#hulk {

height: 200%;

width: 200%;

color: green;

}

From pixeladdicted

スーパーマン

#superman .pants {
  color: blue;
  z-index: 1;
}

#superman .underwear {
  color: red;
  z-index: 2;
}

#superman .pants {

color: blue;

z-index: 1;

}

#superman .underwear {

color: red;

z-index: 2;

}

From @shandusdu

忍者

.ninja {
  visibility: hidden;
  color: #000;
  background: #000;
}

.ninja {

visibility: hidden;

color: #000;

background: #000;

}

From Rune

マイケルジャクソン

.michael-jackson { color: white !important; }

1	.michael-jackson { color: white !important; }

From @szantogabor

タイタニック

#titanic { float: none; }

1	#titanic { float: none; }

From rimantas

#Titanic {
  vertical-align: bottom;
  z-index: -1000;
  padding-bottom: none;
  transform: rotate(-45deg);
}

#Titanic {

vertical-align: bottom;

z-index: -1000;

padding-bottom: none;

transform: rotate(-45deg);

}

From @logunoff

氷山

.iceberg { overflow: hidden; }

1	.iceberg { overflow: hidden; }

From Reallife CSS

.iceberg { float: top; }

1	.iceberg { float: top; }

From @koplowicznsons

.iceberg { position: fixed; }

.titanic { float: none; }

.iceberg { position: fixed; }

.titanic { float: none; }

From @jozef_kucera

頭髪

.bald {
  border-top: none;
}

.bald {

border-top: none;

}

From Brendon Conradie

#hair { visibility: inherit; }

1	#hair { visibility: inherit; }

From Groxx

ヨガパンツ

.yoga .pants {
  padding: 0;
  margin: 0; 
}

.yoga .pants {

padding: 0;

margin: 0;

}

From @afro_ian

プッシュアップブラ

.push-up-bra {
  margin-top: –25%;
  overflow: visible;
  resize: none;
}

.push-up-bra {

margin-top: –25%;

overflow: visible;

resize: none;

}

From @mkiranwd

トイレットペーパー

.toilet-paper {
  overflow-y: scroll;
}

.toilet-paper {

overflow-y: scroll;

}

From Kristiyan Srebrev

ローラーブレード

.rollerblade { display:inline; }

1	.rollerblade { display:inline; }

From @aionsfx

鏡

.mirror { transform: rotateY(180deg); }

1	.mirror { transform: rotateY(180deg); }

From Uddhab

電車

.train {
  text-decoration: underline;
  text-underline-style: double;
}

.train {

text-decoration: underline;

text-underline-style: double;

}

From Groxx

レゴ

.Lego { display: block; }

1	.Lego { display: block; }

From @folktrash

IKEA

#ikea { display: table; }

1	#ikea { display: table; }

From ‏@belafon87

SAMSUNG

.samsung { @extend apple; }

1	.samsung { @extend apple; }

From @kasperoo

酔っぱらい

.drunk { overflow: visible; }

1	.drunk { overflow: visible; }

From @koplowicznsons

二日酔い

.hangover {
  .self-respect {
    display: none;
  }
  .eyes {
    color: red;
    filter: blur;
  }
}

.hangover {

.self-respect {

display: none;

}

.eyes {

color: red;

filter: blur;

}

From @wigggins

.hangover { position: fixed; bottom: 0; }

1	.hangover { position: fixed; bottom: 0; }

From @jozef_kucera

.hangover { vertical-align: bottom; }

1	.hangover { vertical-align: bottom; }

From Emil Ivanov

誕生日

#Happy.Birthday {
  richness: 100 !important;
  stress: 0 !important;
}

#Happy.Birthday {

richness: 100 !important;

stress: 0 !important;

}

From @mikeleeorg

クリスマス

#Merry.Christmas {
  text-decoration: blink !important;
}

#Merry.Christmas {

text-decoration: blink !important;

}

From @mikeleeorg

お気に入りのバンド

.favoriteBand {
  background-repeat: repeat repeat;
}

.favoriteBand {

background-repeat: repeat repeat;

}

From Shane

冬

.winter { display: none !important; }

1	.winter { display: none !important; }

From @raduchira

NSA（アメリカ国家安全保障局）

photo by Fry1989

#nsa { opacity: 1; }

1	#nsa { opacity: 1; }

From @svenassmann

#NSA { visibility: hidden; }

1	#NSA { visibility: hidden; }

From @LaurenFortes

世界

.USA + .Mexico { border: 1px dashed; }

1	.USA + .Mexico { border: 1px dashed; }

From trudesign

.doctors { border: none; }

1	.doctors { border: none; }

From @Twtnman

.worldPeace .countries { border: transparent; }

1	.worldPeace .countries { border: transparent; }

From Impressive Webs

ビッグバン

#BigBang:before {
  content: '';
}

#BigBang:active {
  transition: width infinite, height infinite ease-out;
}

#BigBang:before {

content: '';

}

#BigBang:active {

transition: width infinite, height infinite ease-out;

}

From Victor Zuydweg

政治（政治家）

.politician {
  position: absolute;
}

.politician.elect {
  transform: rotate(180deg);
  opacity: .1;
}

.politician {

position: absolute;

}

.politician.elect {

transform: rotate(180deg);

opacity: .1;

}

.politicians { position: relative; }

1	.politicians { position: relative; }

From Brent Schneider

.politician + .money-laundering {
  position: sticky;
  overflow: visible;
  speak: none;
}

.politician + .money-laundering {

position: sticky;

overflow: visible;

speak: none;

}

From @SGoresht

.politician .integrity { display: none; }

1	.politician .integrity { display: none; }

From @wbenevides

#United-States .politicians .brains {
  visibility: hidden;
  display: none;
}

#United-States .politicians .brains {

visibility: hidden;

display: none;

}

From Wicksell Metellus

.government { transition: all 4yr ease-out; }

1	.government { transition: all 4yr ease-out; }

From Mike

.democrat { float: left; }

.republican { float: right; }

.third-party { visibility: hidden; }

.democrat { float: left; }

.republican { float: right; }

.third-party { visibility: hidden; }

From @phallstrom

神

.God {
  position: absolute;
  display: none;
}

.God {

position: absolute;

display: none;

}

From Jp Malkrovi

まとめ

CSS Humorには、このほかにも思わず「うまい！」と唸ってしまうCSS設定が多数載っています。

WEB制作中、ちょっと疲れてしまった時などに、気晴らしにこういったCSSユーモアを考えてみるのも良いかもしれません。

『「HTML要素以外のものをCSSで設定したら？」を集めた「CSSユーモア」がクスっときて楽しい』へのコメント

名前:ボヘミアン投稿日：2015/08/28(金) 22:36:59 ID：6c884cc8f

おもしろいですね！

名前:わいひら投稿日：2015/08/29(土) 13:00:51 ID：0120098c8

皆さんうまいですよね。ブラとかマイケルとか座布団2枚あげたい。

名前:テーブル好き投稿日：2015/08/30(日) 08:37:31 ID：fbaa60c79

みんな、うまいですね。IKEAで不意をつかれて大笑いしてしまいました。

ところで

.Enron .profit { margin: –9999px; }

これは「仕事（労働）」じゃないです。
「企業の不正」、「コーポレート・ガバナンス」の分野です。
（日本でいうと「東芝」みたいなものです。「ブラック企業」ではありません）
https://kotobank.jp/word/%E3%82%A8%E3%83%B3%E3%83%AD%E3%83%B3%E4%BA%8B%E4%BB%B6-1884

名前:わいひら投稿日：2015/08/30(日) 14:06:51 ID：16a3ee896

IKEAうまいですよね(笑)

「.Enron .profit」はぱっと見で、「.earned .profit（稼いだ利益）」と勘違いしていました。
確かに、エンロンって書いてありますね；
-9999ってブラック企業にしても多すぎるなぁと思いながら書いていました；

ただ修正したとしても、日本ではわかりづらい例なので削除しておこうと思います。
教えていただきありがとうございます！

名前:css 投稿日：2017/03/02(木) 06:04:47 ID：78c18552e

var i=0;
do{
document.write(“歴史”);
i=i+0;
}while(i<1);

歴史は繰り返す。

名前:わいひら投稿日：2017/03/02(木) 06:46:28 ID：7c663d5e6

笑。無限ループ怖いです笑

名前:ボヘミアン投稿日：2015/08/28(金) 22:36:59 ID：6c884cc8f
おもしろいですね！
名前:わいひら投稿日：2015/08/29(土) 13:00:51 ID：0120098c8
皆さんうまいですよね。ブラとかマイケルとか座布団2枚あげたい。
名前:テーブル好き投稿日：2015/08/30(日) 08:37:31 ID：fbaa60c79
みんな、うまいですね。IKEAで不意をつかれて大笑いしてしまいました。
ところで
.Enron .profit { margin: –9999px; }
これは「仕事（労働）」じゃないです。
「企業の不正」、「コーポレート・ガバナンス」の分野です。
（日本でいうと「東芝」みたいなものです。「ブラック企業」ではありません）
https://kotobank.jp/word/%E3%82%A8%E3%83%B3%E3%83%AD%E3%83%B3%E4%BA%8B%E4%BB%B6-1884
名前:わいひら投稿日：2015/08/30(日) 14:06:51 ID：16a3ee896
IKEAうまいですよね(笑)
「.Enron .profit」はぱっと見で、「.earned .profit（稼いだ利益）」と勘違いしていました。
確かに、エンロンって書いてありますね；
-9999ってブラック企業にしても多すぎるなぁと思いながら書いていました；
ただ修正したとしても、日本ではわかりづらい例なので削除しておこうと思います。
教えていただきありがとうございます！
名前:css 投稿日：2017/03/02(木) 06:04:47 ID：78c18552e
var i=0;
do{
document.write(“歴史”);
i=i+0;
}while(i<1);
歴史は繰り返す。
名前:わいひら投稿日：2017/03/02(木) 06:46:28 ID：7c663d5e6
笑。無限ループ怖いです笑