デザイン - CSSの記事一覧
SPCSS - 素のHTMLでも素敵なデザインに
プログラマーにとって一つの鬼門とも言えるのがデザインです。新しいWebサービスを立ち上げようと思って粗く作ったものの、その後のデザインで頓挫してしまってやる気をなくすことは少なくありません。かといって最初からデザインをやると、いつまで経っても開発に入れなかったりします。そこで使ってみたいのがSPCSSです。素のHTML...
3D Book Image CSS Generator - CSSで3D風に書籍を表示
コンピュータ上では2Dが基本です。そのため、3Dのコンテンツがあるとそれだけで見た目にインパクトがあります。それは分かっていつつも作成するのが大変なのが3Dコンテンツです。ちょっとした素材のために3Dソフトウェアで作成というのは面倒です。そこで擬似的な3D表示にチャレンジしてみましょう。今回はCSSを使った3D表現を行...
Plaiceholder - 画像をぼかしてプレイスホルダー化
Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。## Plaiceholderの使い...
CSS Spider - CSS設定を素早く確認、編集
表示されているCSSの内容を確認する際には開発者ツールを利用するでしょう。しかし、情報が多すぎて分かりづらかったり、スタイルをコピーすると余計な情報もたくさん付いてきたりします。そこで使ってみたいのがCSS Spiderです。開発者ツールよりも使いやすく、分かりやすいスタイルチェッカーです。## CSS Spiderの...
Water.css - シンプルなWebサイトをちょっと良い感じに
HTMLは自由な表現が可能ですが、素のままでは本当に貧相な表示になります。かといって気の利いたデザインを作るのは大変です。一部の表現が足りないために、全体のバランスが崩れてしまうことも多々あります。そこで使ってみたいのがWater.cssです。読み込むだけで、Webサイトをそれっぽくしてくれます。## Water.cs...
filters.css - CSSを使って画像の簡易編集
写真を加工する際には画像編集ソフトウェアを使います。UGM（ユーザー生成コンテンツ）の場合、アップロードされる画像すべてを加工するのはたいへんです。サーバ側で処理できますが、サーバの負荷は大きくなるでしょう。そこで使ってみたいのがfilters.cssです。CSSベース、クライアント側でフィルタリング処理が可能です。#...
Flexbox Defense - タワーディフェンスゲームを通じてFlexboxの使い方を学ぶ
ゲームを通じて技術を学ぶのは興味深い手法です。体験する人も楽しみながらプログラミングが学べます。書籍やオンライン情報を元に自分だけで学んでいくのは困難ですが、ゲームで対話を楽しみながらできれば継続できそうです。今回紹介するFlexbox DefenseはCSS3のFlexboxをタワーディフェンスゲームをベースに学ぶソ...
Made In India CSS - どんなサイトもインド風にしてくれるスタイルシート
先日、USA.css
Perfect Edition - HTMLとePub対応の電子書籍テンプレート
電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...
Hacker95 - Hacker News向けWindows 95風スキン
Hacker Newsは最新のテクノロジーに関するニュースが集まるのですが、そのUIはとても簡素で、レガシーです。コンテンツが大事なので、UIはこだわらなくてもいいですのが（ハッカーと付いていますし）、今同じようなUIでサービスが立ち上がったとしても決して使われなさそうです。そんなHacker Newsを昔懐かしいUI...
CSS-Sweeper - CSSだけで作られたマインスイーパ
簡単にできることをやっても面白くはありません。一定の制限を設けることで、面白さや新しい発見を見つけられることがあります。いわゆる縛りと呼ばれるものですが、縛りによって別な解法が求められるようになり、新しい楽しみ方が生まれます。今回紹介するCSS-Sweeperは、Webベースのマインスイーパです。そこにJavaScri...
Halfmoon - Bootstrapに似た、IE11をサポートするフロントエンドフレームワーク
Bootstrapがフロントエンドのフレームワークとして多用されています。しかし、デザインの束縛が強いためか、Bootstrapで作られているサイトはそれっぽさが残ってしまいます。そのためBootstrapを避けたいと思いつつも、便利さ故に離れられない人はHalfmoonを試してみましょう。Bootstrapに似せたク...
Ward - ポップなデザインのシステム管理画面
一般的に開発者向けに作られるものは、UIが質実剛健で、簡素なものが多いように感じます。必要な情報だけを並べて、遊び心は少ないのではないでしょうか。それでもいいのですが、どうせなら触っていて楽しい気持ちになれるものがいいですよね。今回紹介するWardはサーバのダッシュボードUIになります。デザインがほんの少しポップです。...
USA.css - 皆で使おう。アメリカっぽいCSS
アメリカは2020年に入って、様々な問題が噴出しています。インフルエンザが問題だったかと思えば、新型インフルエンザ、そしてBLMによるデモや暴動もはじまり、どうなるか余談が許しません。そんな中にあっても大統領選挙は実施されます。アメリカ国民が注目する大統領選挙、そんなアメリカンな情報サイトを作るのにぴったりなのがUSA...
tailblocks - Tailwindをベースにしたブロックデザインパターン
CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。そんなTailwindを使ってブロ...
new.css - HTMLタグのまま使えるCSSフレームワーク
デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要（クラスレス）なCSSフレームワークになります。## new.cssの...
ChartS.css - Markdownのリストをグラフに変換
グラフを描く際には専用のライブラリを使うことが多いですが、それに不慣れだとうまく表示できずにストレスが溜まります。ちょっとしたグラフであれば、もっとシンプルに描きたいと思うのではないでしょうか。そこで使ってみたいのがChartS.cssです。Markdown形式からグラフに表示になる、シンプルなライブラリです。## C...
LaTeX.css - HTMLをLaTeX風に表示するCSS
LaTeXで文書を書いていて、HTMLに変換して欲しいというニーズはよくあります。そうしたHTMLはどことなくLaTeXっぽく感じられるでしょう。論文やレポートとしてはよくても、読み物としては読みづらい雰囲気があります。LaTeX.cssはその逆です。HTMLをLaTeXっぽく見せてくれるCSSになります。## LaT...
XP.css - Windows XPを彷彿とさせるCSS
Windows XPは非常によくできたOSだったように思います。2000もよかったですが、XPの完成度は高く、安定していました。その後のVistaなどになってからは微妙で、今なおXPを使い続ける企業があるのも致し方ない気さえします。そんなXPらしいUIをWebブラウザでも再現したければXP.cssを使ってみましょう。#...
Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張
最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals C...