Web制作に役立つ情報一覧

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

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

ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io

2020/05/20(Wed) 10:21

数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。

https://coliss.com/articles/build-websites/operation/work/favicon-generator-faviconio.html

CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場

2020/05/19(Tue) 10:05

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。

https://coliss.com/articles/build-websites/operation/css/css-lh-and-rlh-units.html

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説

2020/05/14(Thu) 09:52

Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。

https://coliss.com/articles/build-websites/operation/css/spacing-in-css-margin-and-padding-and-etc.html

これでもうSVGのアイコンには困らない！オープンソースで利用できる、SVGアイコンのライブラリのまとめ

2020/05/12(Tue) 09:52

無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/work/open-source-free-svg-icon-libraries.html

CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション

2020/05/12(Tue) 09:51

ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。

https://www.nxworld.net/tips/css-scroll-down-line.html