Pickupニュース

スタイルシートで作る見出しデザイン

気に入ったデザインスタイルをコピペで利用
よく使うスタイルシートだけで作る見出しデザインをコピペ可能なスニペットコードと一緒にリストアップしました。随時更新していきます。

CSSだけでlist-styleのマーカーの色を変更する方法

<ul>タグ内のリストのマーカーをdiscにしていたのですが、テキストの色と同じだと強すぎて少し薄くしたいという要望がありました。そこで、HTMLマークアップは変更することなく、CSSだけでlist-styleのマーカーの色を変更する方法を紹介します。

Google Fonts APIによるエフェクト効果

スタイルシートで簡単にデザインテキスト
Google Fonts APIでは、テキストに立体、シャドウ、テクスチャのような様々なエフェクト効果を付加することが出来るスタイルシートセットが公開されています。

Google Fonts

Googleが提供する無料Webフォント
Googleが提供する無料のWebフォントです。英字フォントが主ですが、Noto Fontsのような日本語フォントも公開されています。
このページでは、Google FontsをWebサイトで使用するための導入から基本的な使い方を紹介しています。

IcoMoon AppでアイコンWebフォントを作成

好みのアイコンを選択してアイコンWebフォント作成
ライブラリとして公開されているアイコンの中から選択して、好みのアイコンWebフォントを作成することが出来るWebサービスです。フォントファイルの容量を削減することが出来ます。自分で作成したSVGファイルをインポートして、独自のアイコンWebフォントを作成することも出来ます。

IcoMoon

自作のアイコンWebフォントを作成
IcoMoonはWebフォントを自由に組み合わせて最適なフォントファミリーを制作することが出来ます。
このページでは、IcoMoonで提供されている無料のWebアイコンフォントをWebサイトで使用するための設定方法を紹介しています。

Genericons

Automattic社の提供するアイコンWebフォント
Automattic社の提供するアイコンWebフォントです。
このページでは、GenericonsをWebサイトで使用するための導入から基本的な使い方を紹介しています。