トップへ戻る
シン・エヴァ
coliss.com
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます...
CSSのtext-shadowとbox-shadow、そしてclip-pathを使用してノイズをつけ、ジジッと動かすグリッチエフェクトのボタンを紹介します。 今年もCSSの進化が楽しみですね！ CSSだけで実装されたグリッチエフェクト 実...
CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCS...
Chrome 88が先週リリースされ、aspect-ratioプロパティがサポートされました。 CSSのaspect-ratioプロパティはボックスのアスペクト比を定義でき、画像や動画のアスペクト比を保持して配置したり、黄金比のレイア...
Adobe CCユーザーに朗報です！🎉 Adobe Fontsに日本語フォントを含む360種類の大量のフォントが追加されたので、紹介します。 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利...
デザインのイメージが湧かない、アイデアがうまく出せない、そのアイデアを形にできない、苦手なデザインがある、そんなデザイナーのよくある悩みを解決するデザインのアイデア帳・解説書を紹介します。 アイデア...
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、...
Fontworksから日本語フォント8書体がSILライセンスで公開されたので、紹介します。ひらがな・カタカナ・漢字・英数記号文字が揃っており、Webや紙のデザイン、動画、同人誌だけでなく、ゲームやアプリの組み込み...
Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox C...
ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるように...
通常は有料ですが、今週末まで無料でダウンロードできる、優雅な筆跡で美しくデザインされたおしゃれな手書きフォントを紹介します。 本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindow...
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニッ...
フロントエンドのデベロッパー、バックエンドのデベロッパー、開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップを紹介します。 2021年、フロントエン...
ボタンやテキストリンク、アイコン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 CSSのエフェクトはスニペットに登録しておくと、すぐ.....
デザインが上手くなりたい、自分のデザインをよくするためにはどうすればよいか、そんな悩みをもっている人に確かなデザイン力が身につく良書を紹介します。 プロのデザイナーによるデザインの思考プロセスが丁寧...
本格的なロゴをオンラインで作成できる「Logaster」で作成された9,500,000個の中から、2020年に人気だったロゴのデザインを調査・分析し、2021年に注目されるロゴデザインのトレンドを紹介します。 中の人から依...
Adobe Creative Cloud コンプリート|12か月版|オンラインコード版 Adobe CC コンプリートプラン12か月版は通常価格 65,760 円のところ、27%オフの 47,760 円！ 18,000 円もお得です。 24か月版、36か月版もセール...
通常は有料ですが、今週末まで無料でダウンロードできる、ロゴのデザインにぴったりなモノラインフォントを紹介します。 本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindowsでもmacOSで...
当ブログで紹介した際に大好評だったので、セール対象になるのをずっとチェックしていたのですが、デザイナーによる思考プロセスを丁寧に解説した良書「デザイン力の基本」が本日限り、なんと70％オフです！ プロ...
2020年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 ....
タップ・クリックするだけで他のデバイスと簡単にファイルを共有できるAirDropをJavaScriptだけで再現したその仕組みを紹介します。 同一WiFiで利用でき、iOSやmacOSだけでなく、AndroidやWindowsでもあらゆるフ...
MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。 アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操...
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパ...
今年発売されたものをはじめ、WebデザインとWeb制作関連の書籍がKindleセールで50％オフの大幅値引きになっています。 初心者向けから、現役で仕事をしている人向けまで揃っており、見逃せません！ 特に、デベロ...
キャラクターの顔の描き方に特化されたイラストの解説書を紹介します。 基本となる顔の構造をはじめ、パーツごとに描き方、感情を表現する表情の描き方、キャラクターの描き分け方、デフォルメの描き方など、キャ...
HTMLは非常にシンプルな実装で、テキストベースのWebページをさくっと実装するための超軽量でシンプルなclassレスの超軽量CSSフレームワークを紹介します。 HTMLにclassは一切不要です、外部CSSを記述するだけで...
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロト...
先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションで...
2021年のトレンドカラーがPantoneから発表されました。 トレンドカラーは2色、希望に満ちた元気なイエロー「イルーミネイティング」と堅実で信頼できるグレー「アルティメットグレー」です。 2色を組み合わせるこ...
次のページ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
