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

デザイン - CSSの記事一覧

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

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

もっと見る

List

  • 2019/05/23

IsometricSass - CSSだけで実現する3Dライブラリ

Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...

List

  • 2019/05/23

FullScreen Slider - アニメーションしながらコンテンツを切り替え

SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせ...

List

  • 2019/05/20

Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット

Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...

List

  • 2019/05/16

Remix Icon - 小さめな表示にぴったりなSVGアイコン

アイコンはWebサイトのデザイン、特徴によって雰囲気に合わせて選ばなければなりません。そのため、一つのアイコンセットを知っていれば良いのではなく、様々なものを見ておくと良いでしょう。フォントと変わらない存在です。そんなアイコンセットとしてRemix Iconを紹介します。小さめのアイコンで、控えめなデザインが特徴です。...

List

  • 2019/05/13

SakubunCSS - 作文用紙風CSS

Web上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。そこで使ってみたいのがSakubunCSSです。振り仮名まで含めて日本語...

List

  • 2019/05/11

Water.css - 読み込むだけでちょっと綺麗なデザインに

Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...

List

  • 2019/04/28

Twemoji-Picker - Twitterの絵文字Twemoji用ピッカーライブラリ

絵文字はテキストで送るよりも感情豊かになったり、感情がぶつからないように緩衝材として使うことができます(逆もありますが)。そんな絵文字をオープンソースとして公開しているのがTwitterで、Twemoji

List

  • 2019/04/14

natUIve - UIコンポーネントが多数揃ったCSSフレームワーク

WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...

List

  • 2019/04/09

Hello, Goodbye - Webチャットウィンドウを消す

個人的にこれは欲しかった。最近、多くのWebサイトで導入されているチャットシステム。利用者はそこそこいると聞いたことがありますが、個人的には全く使ったことがありません。それだけに勝手にメッセージが幾つも出てくるのはうざったいと感じています。同じように邪魔だと思っていた方に使ってみて欲しいのがHello, Goodbye...

List

  • 2019/03/12

RTS - レスポンシブにテキストサイズを変える

レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...

List

  • 2019/02/25

CSSans Pro - CSS製のフォント

最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです(合字で可能にする方法もあるようですが)。それでは表現力が片手落ちでしょう。そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。...

List

  • 2019/02/16

Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント

マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントで...

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を以前のもの...