Web制作に役立つ情報一覧

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

幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator

2020/05/11(Mon) 09:56

ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。

https://coliss.com/articles/build-websites/operation/work/the-hero-generator.html

これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet

2020/04/17(Fri) 09:51

Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。

https://coliss.com/articles/build-websites/operation/css/bem-naming-cheat-sheet.html

SEOの課題を特定し解決する４つのフレームワーク

2020/04/16(Thu) 09:52

最近、サイトへの自然検索流入が減少、または上昇した際、あなたはどのように感じただろうか。よくあるケースとしては、Googleのアルゴリズムが誤っているという結論をすぐ出すことだろう。しかし、Googleが誤っているという結論をすぐに出してしまうと、SEOにおける成功を獲得できなくなる。さらに悪いケースでは、過ちを繰り返すことになる。

https://www.seojapan.com/blog/a-4-part-framework-for-diagnosing-solving-seo-problems

ランディングページをつくるときに考慮すべき10のこと

2020/04/15(Wed) 10:02

ユーザーが行動を起こしたくなるようなランディングページ（LP）のデザインを依頼されたことはありませんか？　この記事では、私が確実に結果を出すために使っているアプローチを紹介します。

https://uxmilk.jp/87113

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど

2020/04/14(Tue) 10:05

CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/about-auto-value-in-css.html