Web制作に役立つ情報一覧

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper

2021/09/06(Mon) 09:55

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。

https://coliss.com/articles/build-websites/operation/work/interface-styles-shaper.html

CSSの変数（カスタムプロパティ）が期待通りに動作しないときの解決方法

2021/09/02(Thu) 09:57

CSSの変数（カスタムプロパティ）は、IEを除くすべてのブラウザでサポートされており、実際のプロジェクトで使用している人も増えてきたと思います。CSSの変数は非常に便利で使いやすいのですが、期待通りに動作しないときの解決方法を紹介します。

https://coliss.com/articles/build-websites/operation/css/solution-when-custom-properties-do-not-work.html

レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize

2021/09/01(Wed) 10:02

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。

https://coliss.com/articles/build-websites/operation/work/responsivize-for-develop-responsive-websites.html

これから実装する人にオススメ！レイティングに使用するスター（星形）を実装するSVGのテクニック

2021/08/31(Tue) 09:55

Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。

https://coliss.com/articles/build-websites/operation/work/star-rating-svg-solution.html

日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです

2021/08/30(Mon) 09:57

フリーフォントが大好物な人に朗報です！ 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。

https://coliss.com/articles/freebies/google-fonts-for-japanese.html

CSSの実務で役立つスキルが身につく、本気で学びたい人にお勧めの解説書 -現場のプロから学ぶ CSSコーディングバイブル

2021/08/27(Fri) 09:56

CSSとSassの基礎知識から実装テクニックまで、実務に役立つスキルを身につけたい人にお勧めの解説書を紹介します。CSSの設計に重点が置かれており、実装をはじめる前の段階から、仕様策定、デザイン確認、そしてレイアウト作成、エレメント作成、コンポーネント作成、とコーディングのテクニックが詳しくていねいに解説された良書です。

https://coliss.com/articles/book-review/isbn-9784839974824.html

【フォトショップ】こすって完成！圧倒的な「ぼかし」をデザインする簡単テクニック

2021/08/25(Wed) 10:03

この記事では、フォトショップで圧倒的な「ぼかし」具合をデザインする超簡単なテクニックをご紹介します。たったひとつのツールを利用するだけで、手軽にぼかしエフェクトを楽しむことができます。

https://photoshopvip.net/130776

CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック

2021/08/24(Tue) 09:51

ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/aligning-button-label-vertically.html

「シンプル」こそ大事！ホームページ制作で基本の「やるべきこと」とよくある間違い

2021/08/19(Thu) 09:56

完璧と言えるホームページを制作するのは、プロのWebデザイナーでもない限り、正直なところむずかしいかもしれません。さらに競合サイトとの検索順位争いが激しすぎ、隣の芝生が青く見えてしまうこともあるでしょう。「ホームページを作りたいけど、なにからはじめてよいか分からない」というひとも少なくありません。

https://photoshopvip.net/130600

これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

2021/08/19(Thu) 09:55

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。

https://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html