Css on akky@サイボウズラボ・ブログ

pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ

Fri, 12 Aug 2022 00:00:00 +0000

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。

幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。

あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。

ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。

via Hacker News

#HEXWORDS - 16進カラーコードで「意味のある単語」をまとめたサイト

Fri, 10 Jun 2022 00:00:00 +0000

HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。

#3C3

#BD2031

16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE)

これに、0から9までの数字を似た形のアルファベットに見立てて英文を読みにくくし、仲間うちだけで通じるようにするリートスピーク(leetspeek) を組み合わせると、6桁の色コードの中に英単語として読めてしまうものの数がぐっと増えてきます。

この英単語として読めてしまうような16進コードを集めたのが#HEXWORDSというサイト。

#HEXWORDS トップ

サイトには検索機能もあり、使いたい色コードを入れて、その色に近いもので英単語っぽいものを列挙してくれます。

#HEXWORD の検索例

Hacker Newsのスレッドでは、「認識できる英単語と、その16進コードが表示する色の間に関係があるものがあるのでは?」という問いかけが出て、何人もの人がそれっぽいコードを発見・披露しています。

#C0A575 (COASTS, 海岸 - 砂っぽい色?)

#5A6E57 (SAGEST, セージの葉 - 葉っぱの色)

#CABB1E (CABBIE, キャブ - イエローキャブタクシーの色)

このサイトは英単語を列挙していますが、ローマ字で日本語として意味を成すものも探せば日本語版を作ることもできそうですね。

Webサイトのソースコード中に含まれる色のコード、一般的には意識することもないと思います。

なのでこのサイトの実用性はそれほどないでしょうけれど、何か平凡なwebページの中に隠れた情報を埋め込んでおき、色コードを登場順に読んでいくと文章が浮かび上がって情報を伝える、みたいなお遊びをするときに役立つかもしれません。

via Hacker News

Game of Codes - プログラミングツールやライブラリの勢力を表した架空の世界地図

Fri, 21 Jan 2022 00:00:00 +0000

Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。

フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。

React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。

各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。

What if #javascript libraries were countries?

Will the #React Empire dominate the world? Will the Kingdom of #Vue stop the invasion? Will Kingdom of #Angular regain its position?

See Game of Codes project ⚔️https://t.co/jrX3TOVMJf pic.twitter.com/BXz85tzXCq
— Michal Szymanski (@longevity_os) January 10, 2022

2015年版の地図と比べると、6年間でも勢力が変化していますね。Ember とか Backbone とか、そんなのあったなあ、という感じです。

CSSフレームワークについても同じような架空地図が公開されています。

昔、SNSの勢力図で似たようなものがありました。地図の形にすることで詳しくない人に大雑把な関係性が伝えられる場合もあるでしょう。

正しい(イギリス)英語でCSSが書けるプラグイン

Thu, 21 May 2020 00:00:00 +0000

jevakallio/css-properly は、正しい英語でCSSを書くことができるPortCSSのプラグインです。

CSS の整形やトランスパイルを行う PortCSS にこのプラグインを入れて呼び出すことで、以下のように

.foo { colour: black; background-colour: lightgrey; text-align: centre; }

色指定を"colour"、中央寄せを"centre"などと、「正しい」英語で書いても、“color”, “center” など、正しくないけどなぜか受け入れられる文字列に修正してくれます。

他にも、あなたの大好きなクマ padding-ton(パディントン)を padding-top に、表記は変わりませんがゼットインデックス(z-index)をズィーインデックス(z-index)に、など直してくれます。ラブリーですね!

laptop.css - 画像をラップトップ化してくれるスタイルシート

Fri, 13 Sep 2019 00:00:00 +0000

laptop.cssは、画像の周りにアスキーアートのラップトップ枠をつけてくれるという単機能のCSSスタイルシートです。オープンソースです。

3種類のサイズのラップトップが用意されています。

どういう時に有用なライブラリなのか、今一つわかりませんが。

縦横比に注意して画像を用意しないといけないみたいですね。そして、画像につけたリンクが無効になってしまった。

(rss フィード経由の方は元ページを開いて見てください)

via Hacker News

css-only-chat CSSだけで動くブラウザチャット

Wed, 08 May 2019 00:00:00 +0000

ケビン・クッチャさん(Kevin Kuchta)のkkuchta/css-only-chat は、JavaScript を使わない非同期ウェブチャットサーバーです。

二つ(以上)のブラウザからこのサーバに接続し、アルファベットをクリックしてメッセージを作り送信すると、同じサーバに接続した他のブラウザでも即時表示される、いわゆるブラウザチャットです。しかし面白いのは、このページで JavaScript は使われていないというところ。

送信側

CSS の :active 疑似クラスを使うことで、ある領域をクリックした際に、はじめて画像ファイルを読み込ませることができます。つまり、ボタンが押されたタイミングを画像ファイルの読み込みでサーバ側から検知できるということ。

「同じボタンが2度目押された時は(画像はもうブラウザ側にロード済なので)サーバはわからないのでは?」となりますが、たとえば “a"“a” と押した時は、接続しっぱなしの状態で、元のボタンを隠し、新たに「“a"を押した」という情報を持った別の画像ファイル名を持つボタンを表示しているようです。これをすべてのボタンに対して行うことで、ボタンが持つ画像ファイルのパスが、過去のすべてのタイプ内容を保持することになります。

受信側

表示はどうやって更新してるのか、も解説されています。接続しっぱなしの状態で、これまで送った html が不要になったら、style タグを送って過去の要素を display:none で隠し、新たにページ内容を追記します。

これを、自身か他のブラウザから新たなデータが届くまで待機しながら繰り返しているということ。じゃあソースコードはとても長くなるのでは、と思って Chrome でソースを表示しようとしましたが、何も表示されません。Firefox では何千桁もある一行のソースコードを確認できました。

今のところデモサイトは用意されていないので、試すには自分で動かす必要があります。

via Hacker News

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

Wed, 09 May 2018 00:00:00 +0000

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが

“A"キーと"D"キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

ブログでチャット風の会話を表示するCSS

Mon, 15 May 2017 00:00:00 +0000

先日の記事「電話番号間違ってますよ」がどうしても信じてもらえない! 内で、チャットのやりとりを表現したかったので、フキダシ会話っぽく見える CSS を書きました。

WordPress の場合は、[外観]-[カスタマイズ]-[追加CSS]に貼りつけてください。特定のポストでだけ使いたい場合は .post-9067 とかを全部の前につけます。

アイコンの画像はこのCSSの中に URL を書き込んであります。別のアイコンにしたければそこを変えてください。

.akky_conv { padding-top: 1em; } .akky_conv li { display: flex; flex-direction: row; max-width: 95%; } .akky_conv li div { width: 32px; height: 32px; box-shadow: 2px 2px 0px #aaa; flex-shrink: 0; flex-grow: 0; z-index: 1; } .akky_conv li:not(.me) div { background:url('/akky/wp-content/uploads/2017/04/user-alt-1_0.png') center no-repeat; background-color: #fcf; } .akky_conv li.me { justify-content: flex-end; } .akky_conv li.me div { background:url('/akky/wp-content/uploads/2017/04/user-alt-2.png') center no-repeat; background-color: #cff; order: 2; position: relative; bottom: -3em; } .akky_conv li p { background-color: #ddd; margin: 1em; padding: 1em; position: relative; text-align: center; } .akky_conv li.me p{ order: 1; } /* 吹き出し */ .akky_conv li p:before { content: ""; display: block; width: 0; height: 0; position: absolute; } .akky_conv li:not(.me) p:before { border-right: 12px solid #ddd; border-bottom: 12px solid transparent; top: 0px; left: -12px; } .akky_conv li.me p:before { border-left: 12px solid #ddd; border-top: 12px solid transparent; bottom: 0px; right: -12px; }

WordPress Admin Style - ワードプレス管理画面で使えるCSSスタイルを列挙するプラグイン

Fri, 30 Sep 2016 00:00:00 +0000

WordPress Admin Style は、ワードプレスのプラグイン開発者のためのサポートツールです。

プラグインは公式レポジトリにはなく、GitHubで公開されています。

cloneするなりzipでダウンロードするなりして、WordPressの開発環境、plugins以下へコピーします。

プラグインを有効化すると、サイドメニューに"Admin Style"というメニューが増え、クリックすると、管理画面で最初から使えるスタイルが列挙されたページが開きます。

Admin画面のデザインをする際に、どんな要素にどんなデザインが当たっているのかを把握しやすくて便利かなと思いました。

ウェブページ制作のたいへんさを見せるページ

Tue, 07 Apr 2015 00:00:00 +0000

英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのをブラウザ上で見せてくれるページです。

画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。

redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。

このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。

このデモで生成される掲示板のやりとり自身が指しているように、Jake Albaughさんの脈打つハートを作る様子を再現するコードを見て、それに触発されて作られたということです。

同じコードを参考に、CSSで描くダースベイダーをデモ化したページも作られています。

via TheNextWeb