デザイン - CSSの記事一覧
SakubunCSS - 作文用紙風CSS
Web上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。そこで使ってみたいのがSakubunCSSです。振り仮名まで含めて日本語...
Water.css - 読み込むだけでちょっと綺麗なデザインに
Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...
Twemoji-Picker - Twitterの絵文字Twemoji用ピッカーライブラリ
絵文字はテキストで送るよりも感情豊かになったり、感情がぶつからないように緩衝材として使うことができます（逆もありますが）。そんな絵文字をオープンソースとして公開しているのがTwitterで、Twemoji
natUIve - UIコンポーネントが多数揃ったCSSフレームワーク
WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...
Hello, Goodbye - Webチャットウィンドウを消す
個人的にこれは欲しかった。最近、多くのWebサイトで導入されているチャットシステム。利用者はそこそこいると聞いたことがありますが、個人的には全く使ったことがありません。それだけに勝手にメッセージが幾つも出てくるのはうざったいと感じています。同じように邪魔だと思っていた方に使ってみて欲しいのがHello, Goodbye...
RTS - レスポンシブにテキストサイズを変える
レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...
CSSans Pro - CSS製のフォント
最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです（合字で可能にする方法もあるようですが）。それでは表現力が片手落ちでしょう。そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。...
Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント
マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントで...
MarkDeck - 多機能なHTMLスライドを生成
プレゼンテーションのスライドを作る方法としてはPowerPointやKeynote、Googleスライドと言った専用のソフトウェアを使うのが手軽です。ただし相手が同じ環境でないと使えなかったり、ソフトウェアを手に入れる必要があります。Googleスライドは便利ですがフォントの種類が少なかったりするのが残念です。そこで使...
Slack Theme CLI - コマンドでSlackアプリのテーマを変更
Slackをデスクトップで使う場合、多くの人がSlackアプリを使っているのではないでしょうか。Webブラウザとは別プロセスで実行できるのが便利ですが、長時間利用する上で、白い画面では目が疲れてしまいます。そこで使ってみて欲しいのがSlack Theme CLIです。Slackのテーマを変更できるCLIコマンドです。#...
Wikipedia Dark - Wikipediaをよく使う人こそぜひ！
ダークモードに注目が集まっています。元々エンジニアはエディタのテーマなどを暗く設定することが多かったですが、それが通常のアプリはもちろん、Webサイトにまで広がってきました。目の疲れを軽減したり、集中できる、暗い場所でもコンテンツが読みやすくなると言ったメリットがあります。そんなダークモードをWikipediaに適用す...
Debucsser - CSS情報を可視化してデバッグをサポート
CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。## Debucsserの...
minstyle.io - ミニマムながら十分なCSSフレームワーク
Webデザインを行う際に、スクラッチではなく何らかのフレームワークをベースにするケースが増えています。そんな時、あまり多機能なものを使うとデザイン全体が引きずられてしまったり、ちょっとしたカスタマイズがうまくいかなかったりします。そこで使ってみたいのがあまり多機能ではなく、ちょっと気の利いたシンプルなCSSフレームワー...
PSone.css - プレイステーション風UIを再現するCSS
なぜ人は古いものに憧れとさえ言える感情を抱くのでしょうか。世の中はどんどん便利に、新しいテクノロジーも次々と登場しているにも関わらずです。懐古、アンティーク、ノスタルジックなど様々な言い方で古き良きものを振り返ろうとします。以前はファミコン風のUIを再現するNES.cssを紹介しましたが、今回はそれにインスパイアされた...
NES.css - ファミコン風サイトになるCSS
コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。...
Gmail Classic - Gmailのデザインを旧来のものに戻す
ソフトウェアの進化は決して悪いものでもありませんが、使い慣れてしまっていると従来の手法が使えなくなって生産性が落ちてしまうことがあります。Webサービスの場合、多くは強制的なアップデートであり、古いバージョンを使い続けられないのが不便です。今回紹介するGmail Classicは新しくなったGmailのUIを以前のもの...
Clock Shop - JavaScript/CSSを使ったすごい時計たちを陳列
世の中には時計が好きという方がたくさんいます。時間くらいスマートフォンで見られる一方、手首にする腕時計にこだわる方は多いです。ウォッチフェイスにもこだわりがあり、デジタルで任意の変更できるものの場合、テーマを入念に選ぶ人もいます。そんな時計好きに送りたいのがClock Shopです。時計店といってもECではありません。...
The Every Day Calendar - 日々タスクを達成し続けるカレンダー
ロボットやIoTといった分野で活躍しているSimone Giertzさん。口紅を塗ったり、頭を叩いて起こしたりとロボットとプログラミングを組み合わせて楽しい動画を公開しています。そんな彼女が作った毎日のタスク達成を記録するガジェットがThe Every Day Calendar
Mastodon Deck-Like Style - MastodonをTweetDeck風にするスタイルシート
MastodonをTwitterと使い分けている人が増えています。よりオフィシャルな内容はTwitterで、プライベートな会話はMastodonといった具合です。そこで大事になるのがUIです。使い勝手が異なるとストレスを感じてしまいます。そこで使ってみたいのがMastodon Deck-Like Styleです。普段T...
gitmoji - Gitのコミットメッセージに絵文字を使う
絵文字はテキストで書くよりも分かりやすく、多くの情報を含められます。言葉で書くと問題になりそうなことも、絵文字を使うことで回避できる場合もあるでしょう。チャットだけでなく、利用される場面が増えています。そんな絵文字をGitのコミットメッセージに使っていこうというのがgitmojiです。## gitmojiの使い方git...