CSS– tag –

以前からMacを使用している熱心なファンの方は、Apple復活後のモダンなmacOSよりも、古き良き時代の、いわゆる「Classic MacOS」が好きな方もいるかもしれません。 本日紹介する「System.css」は、1984年から1991年まで稼働していた、AppleのSystem OSに似...

簡単な問題でありながらプログラマーの適正を測ることができるとされるFizzBuzz問題。多種多様なプログラミング言語を使った解法が公開されているなか、CSSを使ってこの問題を解くことに成功した「CSS FizzBuzz」が公開されています。 念のため復習すると...

CSSだけで作られたフォント「CSS Sans」が公開され話題となっています(Reddit、Hacker News)。サイトの説明によるとCSS SANSは、「WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント」。ブラウザによって見え方が変わるた...

「ICONO」は純粋にCSSだけで作られたアイコンのコレクションです(GitHub)。icono.min.cssをスタイルシートとしてリンクするだけで利用可能で、その他の外部リソースは一切必要としません。 <link rel="stylesheet" href="icono.min.css"> ↑スタイル...

「Name that Color」は選択した色の名前を画面に表示してくれるサービスです。例えばCSSを使ってデザインしていて、色の名前をどうすれば良いのか悩ましいときに役立つのではないでしょうか。 使用方法 色はサークルの上のカーソルを動かしたり、値を直接...

モダンなWebサイトを構築できることでお馴染みのTwitter製人気CSS/JavaScriptフレームワーク「Bootstrap」の最新版 v3.2.0 がリリースされました(公式ブログ)。 最新版 3.2.0 はおよそ4ヶ月ぶりのリリースで、新しい新機能の追加、大量のバグの修正、ドキ...

CSSのスタイルを適用する対象を指定する、CSSセレクタの書き方を楽しく学べるサイト「CSS Diner」が公開されています。 単にタグを指定するだけの超基本的なモノから、何番目の子供とか、何番目の型とか、あまり使わないようなめんどくさいものまで、全部...

「CSS Shake」は、DOM要素にスタイルを適用するだけで、多種多様なシェイクを実現することができるCSSライブラリです(GitHub)。 パターンもたくさんあるので、DOM要素をありとあらゆる方法で振動させることが可能です。使ってみよう 使い方は簡単で、 <...

空港などで見かける、数字がパタパタとめくれるカウントダウンタイマーを、CSSとJavaScriptで実装した「Flippin’ 3D Countdown」が公開されています(作者ブログ)。 カウントダウンタイマーは、ラッパー、上側に2つのパート("current"と"next")、下側に2つ...

「CSS Arrow Please」はCSSの吹き出しを簡単にカスタマイズしてつくることができるWebサービスです。 吹き出しの矢印位置を「Position」で指定、大きさを「Size」で指定。他に背景色やボーダーの太さ、色を変更することも可能です。右側にCSSコードが表示...

最小バージョンでわずか176バイトという極小サイズのコードエディタ「MiniCodeEditor」が公開されています(Hacker News)。 サイトにLiveDemoが貼り付けられているのですぐ試してみることができますが、HTML、CSS、JavaScriptをそれぞれのペインで入力する...

「Stopwatch in CSS」はその名の通り、CSSで作られたストップウォッチです。 画面を開くと秒以下の数字がカウントされていますがこの状態だとまだ計測されていません。真ん中の、再生ボタンを押すと計測開始です。 背景が濃い青にかわり、時間の測定が始ま...