コリス https://coliss.com Web制作に関する最新の情報をご紹介 Fri, 29 May 2020 00:37:02 +0000 ja hourly 1 https://wordpress.org/?v=5.4.1 Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書 https://coliss.com/articles/book-review/isbn10-4839973008.html Fri, 29 May 2020 00:36:58 +0000 https://coliss.com/?p=27329 Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書 これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイ

...記事の続きを読む

]]>
CSSの数学関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説 https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html Thu, 28 May 2020 00:36:13 +0000 https://coliss.com/?p=27277 CSSの数学関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説 CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません! 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「m

...記事の続きを読む

]]>
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout https://coliss.com/articles/build-websites/operation/css/layouts-and-patterns-made-with-css.html Wed, 27 May 2020 00:36:59 +0000 https://coliss.com/?p=27365 よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout 最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプル

...記事の続きを読む

]]>
有料フォントが今週末まで無料!刺繍好きにぴったり、クロスステッチのかわいいフォント -Cross Stitched https://coliss.com/articles/products/cross-stitched-by-kassy.html Wed, 27 May 2020 00:26:08 +0000 https://coliss.com/?p=27356 有料フォントが今週末まで無料!刺繍好きにぴったり、クロスステッチのかわいいフォント -Cross Stitched 通常は有料ですが、今週末まで無料でダウンロードできる、ちょっと珍しい、クロスステッチがかわいい刺繍フォントを紹介します。 本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindowsでもmac

...記事の続きを読む

]]>
アイコンの管理が簡単に!たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager https://coliss.com/articles/build-websites/operation/work/norde-svg-icon-manager-and-editor.html Tue, 26 May 2020 00:36:30 +0000 https://coliss.com/?p=27350 アイコンの管理が簡単に!たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager SVGアイコンの管理ができ、編集もできる便利な無料ツールを紹介します。 Windows, macOS, Linux対応で、たくさんのSVGアイコンを一元管理できてしまう優れものです。 Norde -SVG Icon ma

...記事の続きを読む

]]>
アドビのセールがAmazonで開催!Adobe CC コンプリートをはじめ、主要プランすべてが激安価格でお買い得です https://coliss.com/articles/products/adobe-cc-amazon-202005.html Tue, 26 May 2020 00:26:54 +0000 https://coliss.com/?p=27357 アドビのセールがAmazonで開催!Adobe CC コンプリートをはじめ、主要プランすべてが激安価格でお買い得です GWにもセールがありましたが、早くも新しいアドビのセールがAmazonで開催されています! 今回は5/29までの超短期間で、Adobe CC コンプリートプラン、Photoshop+Illustratorプラン、単体プラ

...記事の続きを読む

]]>
ビフォーとアフターの画像をスライドして比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer https://coliss.com/articles/build-websites/operation/javascript/image-compare-viewer.html Mon, 25 May 2020 00:36:22 +0000 https://coliss.com/?p=27344 ビフォーとアフターの画像をスライドして比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います

...記事の続きを読む

]]>
CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール https://coliss.com/articles/build-websites/operation/css/fluid-responsive-font-size-calculator.html Fri, 22 May 2020 00:36:53 +0000 https://coliss.com/?p=27313 CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシ

...記事の続きを読む

]]>
有料フォントが今週末まで無料!ブラシで書かれた躍動感のある、かわいい手書きフォント -Rosseville https://coliss.com/articles/products/rosseville-by-typehandstudio.html Fri, 22 May 2020 00:26:43 +0000 https://coliss.com/?p=27328 有料フォントが今週末まで無料!ブラシで書かれた躍動感のある、かわいい手書きフォント -Rosseville 通常は有料ですが、今週末まで無料でダウンロードできる、ブラシで書かれた躍動感のある、かわいい手書きフォントを紹介します。 本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindowsでもmac

...記事の続きを読む

]]>
TwitterのUIデザインで見つけたCSSのテクニックのまとめ https://coliss.com/articles/build-websites/operation/css/css-findings-from-twitter-design.html Thu, 21 May 2020 00:36:40 +0000 https://coliss.com/?p=27276 TwitterのUIデザインで見つけたCSSのテクニックのまとめ TwitterのUIデザインで見つけたCSSのテクニックを解説した記事を紹介します。 さまざまなコンテンツが入る可能性のあるコンポーネント、コンテンツが長い・短い場合、アイテムの数などを想定した興味深いテクニックが解説さ

...記事の続きを読む

]]>