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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

photo by Andy Hay

スポンサーリンク
レクタングル(大)広告

CSSユーモアとは

CSS Humor » Fun with CSS!

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

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

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

CSS Humor

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

ピサの斜塔

ピサの斜塔

From mohammed

ロンドン

ロンドン

From Funa

From @kasperoo

珈琲

珈琲

From @mikeleeorg

バットマン

S.H.フィギュアーツ バットマン バットマン (INJUSTICE ver.) 約160mm ABS&PVC&ダイキャスト製 塗装済み可動フィギュア

From @iiisoni

ハルク

S.H.フィギュアーツ アベンジャーズ ハルク 約200mm ABS&PVC製 塗装済み可動フィギュア

From pixeladdicted

スーパーマン

From @shandusdu

忍者

忍者

From Rune

マイケルジャクソン

ムーンウォーク --- マイケル・ジャクソン自伝

From @szantogabor

タイタニック

タイタニック [DVD]

From rimantas

From @logunoff

氷山

氷山

From Reallife CSS

From @koplowicznsons

From @jozef_kucera

頭髪

ハゲた人

From Brendon Conradie

From Groxx

ヨガパンツ

ヨガウェア 2点セットノースリーブ トップス サブリナパンツ レディースダンス/体操/ヨガ/ピラティス専用ウェアRuleronline (ダークグレーとローズ, M)

From @afro_ian

プッシュアップブラ

From @mkiranwd

トイレットペーパー

ペーパーホルダ・シングル アイアン×天然ヒノキ台 取り付け簡単!シンプルでオシャレ!DIYでインテリアを楽しめますSPRING SALE期間限定価格

From Kristiyan Srebrev

ローラーブレード

ローラーブレード

From @aionsfx

鏡

From Uddhab

電車

電車

From Groxx

レゴ

レゴブロック

From @folktrash

IKEA

IKEA

From ‏@belafon87

SAMSUNG

キャラ ロゴ SAMSUNG アイロン ワッペン 刺繍 パッチ

From @kasperoo

酔っぱらい

酔っぱらい

From @koplowicznsons

二日酔い

二日酔い

From @wigggins

From @jozef_kucera

From Emil Ivanov

誕生日

ハッピーバースデー

From @mikeleeorg

クリスマス

クリスマスツリー

From @mikeleeorg

お気に入りのバンド

From Shane

冬

From @raduchira

NSA(アメリカ国家安全保障局)

NSA

photo by Fry1989

From @svenassmann

From @LaurenFortes

世界

アメリカとメキシコ

From trudesign

From @Twtnman

From Impressive Webs

ビッグバン

ビッグバン

From Victor Zuydweg

政治(政治家)

政治家

From Brent Schneider

From @SGoresht

From @wbenevides

From Wicksell Metellus

From Mike

From @phallstrom

神

From Jp Malkrovi

まとめ

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

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

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

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

    おもしろいですね!

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

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

  3. 名前:テーブル好き 投稿日: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

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

    IKEAうまいですよね(笑)

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

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