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

デザイン - CSSの記事一覧

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

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

もっと見る

List

  • 2020/09/28

filters.css - CSSを使って画像の簡易編集

写真を加工する際には画像編集ソフトウェアを使います。UGM(ユーザー生成コンテンツ)の場合、アップロードされる画像すべてを加工するのはたいへんです。サーバ側で処理できますが、サーバの負荷は大きくなるでしょう。そこで使ってみたいのがfilters.cssです。CSSベース、クライアント側でフィルタリング処理が可能です。#...

List

  • 2020/09/26

Flexbox Defense - タワーディフェンスゲームを通じてFlexboxの使い方を学ぶ

ゲームを通じて技術を学ぶのは興味深い手法です。体験する人も楽しみながらプログラミングが学べます。書籍やオンライン情報を元に自分だけで学んでいくのは困難ですが、ゲームで対話を楽しみながらできれば継続できそうです。今回紹介するFlexbox DefenseはCSS3のFlexboxをタワーディフェンスゲームをベースに学ぶソ...

List

  • 2020/09/10

Perfect Edition - HTMLとePub対応の電子書籍テンプレート

電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...

List

  • 2020/08/26

Hacker95 - Hacker News向けWindows 95風スキン

Hacker Newsは最新のテクノロジーに関するニュースが集まるのですが、そのUIはとても簡素で、レガシーです。コンテンツが大事なので、UIはこだわらなくてもいいですのが(ハッカーと付いていますし)、今同じようなUIでサービスが立ち上がったとしても決して使われなさそうです。そんなHacker Newsを昔懐かしいUI...

List

  • 2020/08/22

CSS-Sweeper - CSSだけで作られたマインスイーパ

簡単にできることをやっても面白くはありません。一定の制限を設けることで、面白さや新しい発見を見つけられることがあります。いわゆる縛りと呼ばれるものですが、縛りによって別な解法が求められるようになり、新しい楽しみ方が生まれます。今回紹介するCSS-Sweeperは、Webベースのマインスイーパです。そこにJavaScri...

List

  • 2020/08/17

Halfmoon - Bootstrapに似た、IE11をサポートするフロントエンドフレームワーク

Bootstrapがフロントエンドのフレームワークとして多用されています。しかし、デザインの束縛が強いためか、Bootstrapで作られているサイトはそれっぽさが残ってしまいます。そのためBootstrapを避けたいと思いつつも、便利さ故に離れられない人はHalfmoonを試してみましょう。Bootstrapに似せたク...

List

  • 2020/08/02

Ward - ポップなデザインのシステム管理画面

一般的に開発者向けに作られるものは、UIが質実剛健で、簡素なものが多いように感じます。必要な情報だけを並べて、遊び心は少ないのではないでしょうか。それでもいいのですが、どうせなら触っていて楽しい気持ちになれるものがいいですよね。今回紹介するWardはサーバのダッシュボードUIになります。デザインがほんの少しポップです。...

List

  • 2020/07/31

USA.css - 皆で使おう。アメリカっぽいCSS

アメリカは2020年に入って、様々な問題が噴出しています。インフルエンザが問題だったかと思えば、新型インフルエンザ、そしてBLMによるデモや暴動もはじまり、どうなるか余談が許しません。そんな中にあっても大統領選挙は実施されます。アメリカ国民が注目する大統領選挙、そんなアメリカンな情報サイトを作るのにぴったりなのがUSA...

List

  • 2020/07/08

tailblocks - Tailwindをベースにしたブロックデザインパターン

CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。そんなTailwindを使ってブロ...

List

  • 2020/06/26

new.css - HTMLタグのまま使えるCSSフレームワーク

デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要(クラスレス)なCSSフレームワークになります。## new.cssの...

List

  • 2020/06/18

ChartS.css - Markdownのリストをグラフに変換

グラフを描く際には専用のライブラリを使うことが多いですが、それに不慣れだとうまく表示できずにストレスが溜まります。ちょっとしたグラフであれば、もっとシンプルに描きたいと思うのではないでしょうか。そこで使ってみたいのがChartS.cssです。Markdown形式からグラフに表示になる、シンプルなライブラリです。## C...

List

  • 2020/06/14

LaTeX.css - HTMLをLaTeX風に表示するCSS

LaTeXで文書を書いていて、HTMLに変換して欲しいというニーズはよくあります。そうしたHTMLはどことなくLaTeXっぽく感じられるでしょう。論文やレポートとしてはよくても、読み物としては読みづらい雰囲気があります。LaTeX.cssはその逆です。HTMLをLaTeXっぽく見せてくれるCSSになります。## LaT...

List

  • 2020/06/09

XP.css - Windows XPを彷彿とさせるCSS

Windows XPは非常によくできたOSだったように思います。2000もよかったですが、XPの完成度は高く、安定していました。その後のVistaなどになってからは微妙で、今なおXPを使い続ける企業があるのも致し方ない気さえします。そんなXPらしいUIをWebブラウザでも再現したければXP.cssを使ってみましょう。#...

List

  • 2020/05/31

Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張

最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals C...

List

  • 2020/05/25

lit - 軽量なレスポンシブWebフレームワーク

CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけ...

List

  • 2020/05/20

pattern.css - 背景に使えるパターンをCSSで

Webサイトの背景というと、一色で塗りつぶされたものをつい想像してしまいます。派手なものになると画像を使いますが、用意するのも面倒です。もう少し手軽に、それでいて印象深い方法はないでしょうか。そこで使ってみたいのがpattern.cssです。繰り返しのパターンを背景に適用できるCSSライブラリです。## pattern...

List

  • 2020/05/20

98.css - Windows 98を再現するCSS

世の中は進化しており、どんどんいい方向に進んでいるはずです(恐らく)。コンピュータも年々進化しており、時代に合わせて使い勝手がよくなっています。しかし、人はつい過去の思い出を美化し、ノスタルジックに浸りたくなるもののようです。今回紹介する98.cssはWindows 98を彷彿とさせるCSSになります。## 98.cs...

List

  • 2020/03/30

SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集

Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。しかしWebブラウザ側でJavaScr...

List

  • 2020/03/28

css.gg - 500種類を超えるCSSアイコン集

Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗...