ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - CSSの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2019/01/28

MarkDeck - 多機能なHTMLスライドを生成

プレゼンテーションのスライドを作る方法としてはPowerPointやKeynote、Googleスライドと言った専用のソフトウェアを使うのが手軽です。ただし相手が同じ環境でないと使えなかったり、ソフトウェアを手に入れる必要があります。Googleスライドは便利ですがフォントの種類が少なかったりするのが残念です。そこで使...

List

  • 2019/01/18

Slack Theme CLI - コマンドでSlackアプリのテーマを変更

Slackをデスクトップで使う場合、多くの人がSlackアプリを使っているのではないでしょうか。Webブラウザとは別プロセスで実行できるのが便利ですが、長時間利用する上で、白い画面では目が疲れてしまいます。そこで使ってみて欲しいのがSlack Theme CLIです。Slackのテーマを変更できるCLIコマンドです。#...

List

  • 2019/01/13

Wikipedia Dark - Wikipediaをよく使う人こそぜひ!

ダークモードに注目が集まっています。元々エンジニアはエディタのテーマなどを暗く設定することが多かったですが、それが通常のアプリはもちろん、Webサイトにまで広がってきました。目の疲れを軽減したり、集中できる、暗い場所でもコンテンツが読みやすくなると言ったメリットがあります。そんなダークモードをWikipediaに適用す...

List

  • 2018/12/28

Debucsser - CSS情報を可視化してデバッグをサポート

CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。## Debucsserの...

List

  • 2018/12/21

minstyle.io - ミニマムながら十分なCSSフレームワーク

Webデザインを行う際に、スクラッチではなく何らかのフレームワークをベースにするケースが増えています。そんな時、あまり多機能なものを使うとデザイン全体が引きずられてしまったり、ちょっとしたカスタマイズがうまくいかなかったりします。そこで使ってみたいのがあまり多機能ではなく、ちょっと気の利いたシンプルなCSSフレームワー...

List

  • 2018/12/20

PSone.css - プレイステーション風UIを再現するCSS

なぜ人は古いものに憧れとさえ言える感情を抱くのでしょうか。世の中はどんどん便利に、新しいテクノロジーも次々と登場しているにも関わらずです。懐古、アンティーク、ノスタルジックなど様々な言い方で古き良きものを振り返ろうとします。以前はファミコン風のUIを再現するNES.cssを紹介しましたが、今回はそれにインスパイアされた...

List

  • 2018/12/15

NES.css - ファミコン風サイトになるCSS

コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。...

List

  • 2018/12/02

Gmail Classic - Gmailのデザインを旧来のものに戻す

ソフトウェアの進化は決して悪いものでもありませんが、使い慣れてしまっていると従来の手法が使えなくなって生産性が落ちてしまうことがあります。Webサービスの場合、多くは強制的なアップデートであり、古いバージョンを使い続けられないのが不便です。今回紹介するGmail Classicは新しくなったGmailのUIを以前のもの...

List

  • 2018/12/01

Clock Shop - JavaScript/CSSを使ったすごい時計たちを陳列

世の中には時計が好きという方がたくさんいます。時間くらいスマートフォンで見られる一方、手首にする腕時計にこだわる方は多いです。ウォッチフェイスにもこだわりがあり、デジタルで任意の変更できるものの場合、テーマを入念に選ぶ人もいます。そんな時計好きに送りたいのがClock Shopです。時計店といってもECではありません。...

List

  • 2018/11/12

The Every Day Calendar - 日々タスクを達成し続けるカレンダー

ロボットやIoTといった分野で活躍しているSimone Giertzさん。口紅を塗ったり、頭を叩いて起こしたりとロボットとプログラミングを組み合わせて楽しい動画を公開しています。そんな彼女が作った毎日のタスク達成を記録するガジェットがThe Every Day Calendar

List

  • 2018/10/13

Mastodon Deck-Like Style - MastodonをTweetDeck風にするスタイルシート

MastodonをTwitterと使い分けている人が増えています。よりオフィシャルな内容はTwitterで、プライベートな会話はMastodonといった具合です。そこで大事になるのがUIです。使い勝手が異なるとストレスを感じてしまいます。そこで使ってみたいのがMastodon Deck-Like Styleです。普段T...

List

  • 2018/10/03

gitmoji - Gitのコミットメッセージに絵文字を使う

絵文字はテキストで書くよりも分かりやすく、多くの情報を含められます。言葉で書くと問題になりそうなことも、絵文字を使うことで回避できる場合もあるでしょう。チャットだけでなく、利用される場面が増えています。そんな絵文字をGitのコミットメッセージに使っていこうというのがgitmojiです。## gitmojiの使い方git...

List

  • 2018/09/08

Zendesk Garden - Zendeskで使われているデザインコンポーネント

Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。そんなZendeskの各サービスで使われているデザ...

List

  • 2018/09/08

SimpleBar - ページ内スクロールをサポートする軽量ライブラリ

Web上でダッシュボードなどを提供すると、様々な情報をまとめて表示しなければなりません。何も考えずに表示してしまうと、縦スクロールがすごいことになるでしょう。そこでページ内のコンポーネントごとにスクロールがあると便利です。SimpleBarはそんなページ内スクロールを提供するライブラリです。依存性もなく簡単に使えるのが...

List

  • 2018/07/28

CssGitHubWindows - GitHubにWindowsのデザインを適用したら…

GitHubがMicrosoftによって買収されたことによってどんな変化が起きるのか心配している人は多数います。無茶なことはしないと思いますが、それでも緩やかな変化は起こるかも知れません。もしかしたらこんな変化が起きるかも、というのがCssGitHubWindowsです。ジョークですが、意外と良くできています。## C...

List

  • 2018/07/19

Micron.js - CSSアニメーションをJavaScriptで制御

CSS3によってアニメーション機能が強化されています。JavaScriptで動きを書かなくて良くなっているのは良いことですが、それでもユーザ操作を受けて動かしたり、より細かく制御するためにはJavaScriptの存在は欠かせません。そこで使ってみたいのがMicron.jsです。CSSアニメーションをJavaScript...

List

  • 2018/07/16

BoxIcons - シンプルで使いやすいアイコンセット

テキストによる説明よりもアイコンの方が分かりやすいケースは多いです(逆もありますが)。アイコンは言語を超えて使えるので、多言語対応しなければならない場合にもほぼ同じものが使えます。今回は400を超えるシンプルなアイコンセットを提供するBoxIconsを紹介します。## BoxIconsの使い方一例です。単色で分かりやす...

List

  • 2018/06/24

GitHub XP - GitHubをWindows XP風に

GitHubがマイクロソフトに買収されました。かつてのマイクロソフトとは違うとはいえ、Skypeのことを思うと一抹の不安を拭えずにはいます(CEOも代わるので)。今後数年は色々あるかも知れません。そんなGitHubをWindows XPにしてしまうデザインテーマがGithub XPです。## Github XPの使い方...

List

  • 2018/06/22

TODC Bootstrap - Google風のBootstrapテーマ

Bootstrapの良いところは簡単にある程度デザインが整ったサイトが作れるだけではありません。多彩なテーマが作られていることで、あっという間にサイトの雰囲気を変えられるのも魅力です。今回はそんなテーマの一つ、TODC Bootstrapを紹介します。Google風なサイトが作れるBootstrapテーマです。## T...

List

  • 2018/06/11

PatternFly - Red Hat製のWeb UIフレームワーク

HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...