Web制作に役立つ情報一覧

CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

2020/06/17(Wed) 09:50

複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。そんな:is()と:where()の便利な使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-new-pseudo-classes-is-and-where.html

SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation

2020/06/15(Mon) 10:11

テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/create-and-animate-hand-drawn-annotations.html

手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10

2020/06/08(Mon) 10:01

ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。

https://www.nxworld.net/services-resource/10-background-useful-resources-and-generators.html

レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法

2020/06/04(Thu) 09:49

Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。

https://coliss.com/articles/build-websites/operation/work/thinking-about-the-in-between-design-cases.html

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

2020/06/03(Wed) 09:49

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。

https://coliss.com/articles/build-websites/operation/css/ready-to-use-tailwind-css-blocks.html

ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】

2020/06/02(Tue) 09:55

この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。

http://photoshopvip.net/122716

デザインが変わる、最新おしゃれ英語フリーフォント44個まとめ 2020年5月度

2020/05/29(Fri) 09:58

この記事では、最新デザインスタイルを実現する、おしゃれな英語フリーフォントをまとめてご紹介しています。2020年に入り、よく見かけるようになっった高級感のあるセリフ書体や、人気の筆記体や手書きスタイルはもちろん、ユニークな毛筆、かっこいいフォントなど豊富なセレクションが今月も揃いました。

http://photoshopvip.net/122611

CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説

2020/05/28(Thu) 09:54

CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html

よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout

2020/05/27(Wed) 10:02

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。

https://coliss.com/articles/build-websites/operation/css/layouts-and-patterns-made-with-css.html

CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール

2020/05/22(Fri) 09:50

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。

https://coliss.com/articles/build-websites/operation/css/fluid-responsive-font-size-calculator.html