CSSの記事一覧プレミアムユーザー限定記事MOONGIFTプレミアムは、月額500円の有料サービスです。画像にマウスカーソルを当てると情報を表示リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。マウスオーバーで画像を切り替えWebページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。ラップトップ風の枠を表示するCSS同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。CSSはそんな映像を表示する枠のようなものです。95風のWebサイトを作る際に懐古主義という言葉があります。過去の出来事は美化される傾向にあり、当時味わったはずの嫌な思い出は忘却の彼方へ飛んでいってしまいます。その結果、古き良きなんて言葉が出てきます。95風のUIをWebブラウザ上に再現できるCSSデザインです。Twitterを見慣れたUIに戻すどんなものでも慣れが存在します。いいものを目指していたとしても、かつての仕組みに慣れてしまった人にとっては使いづらく感じるものです。その変化がダイナミックであればあるほど、反発も大きくなるでしょう。TwitterのUIが大きく変わりましたが、それが嫌な人はGoodTwitterを使ってみましょう。開発者にとってターミナルは切っても切り離せない存在です。ターミナルがなかったら仕事にならないという人も多いですし、Windowsのターミナルが新しくなることで生産性が向上する人も多いのではないでしょうか。そんなターミナルの画面をWeb上に再現するのがoldTerminalです。名前の通り、古いターミナルの画面です。JavaScriptでタイムラインベースのアニメーションアニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。JavaScriptを使わないWebチャット技術の凄さを感じるのはどんな時か。一見すると無理と思えるようなことを実現できてしまっている時もその一つです。最近では機械学習を用いて粗い映像を高画質化するプロジェクトもあります。SFと思わんばかりの世界が実現しようとしています。Chatもすごいです。GmailのUIをすっきりシンプルにアプリケーションのUIはとても大事で、その見た目次第でやる気になったり、逆に削がれたりします。大事なのは不要な要素を省き、作業に集中できる環境を作り出すことです。いってあまりなくすと機能があることにも気付いてもらえなくなるのでバランスが重要です。CSSだけで実現する3DライブラリWeb上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。アニメーションしながらコンテンツを切り替えSPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。しないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。Sliderもそんなスクロール用ライブラリです。120を超えるコンポーネントが用意されたBootstrap互換のUIキットWebデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。いった点においてBootstrapの汎用性は高く、利用者も多いのです。小さめな表示にぴったりなSVGアイコンアイコンはWebサイトのデザイン、特徴によって雰囲気に合わせて選ばなければなりません。そのため、一つのアイコンセットを知っていれば良いのではなく、様々なものを見ておくと良いでしょう。フォントと変わらない存在です。Iconを紹介します。小さめのアイコンで、控えめなデザインが特徴です。作文用紙風CSSWeb上の文章などは横書きが多いですが、日本語は本来縦書きのために作られています。それだけにWeb上であっても縦書きで文章を公開したいと考えている人は多いでしょう。アラビア語などは右から表示されるのに、日本語にしても横書きのままなのは気になります。そこで使ってみたいのがSakubunCSSです。読み込むだけでちょっと綺麗なデザインにWebは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。Twitterの絵文字Twemoji用ピッカーライブラリ絵文字はテキストで送るよりも感情豊かになったり、感情がぶつからないように緩衝材として使うことができます(逆もありますが)。UIコンポーネントが多数揃ったCSSフレームワークWebのUIフレームワークとしてはBootstrap一強が続いています。フレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。Webチャットウィンドウを消す個人的にこれは欲しかった。最近、多くのWebサイトで導入されているチャットシステム。利用者はそこそこいると聞いたことがありますが、個人的には全く使ったことがありません。それだけに勝手にメッセージが幾つも出てくるのはうざったいと感じています。レスポンシブにテキストサイズを変えるレスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。${article.post_date_view}${article.post_title}${article.except_content}プレミアムでしか読めない記事が733あります。blockworks。