シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css

シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。

シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。

サイトのキャプチャ

new.css
new.css -GitHub

続きを読む

有料フォントが今週末まで無料!スタンプに使われているようなかわいいヴィンテージのフォント -Loma

通常は有料ですが、今週末まで無料でダウンロードできる、ヴィンテージのスタンプにインスパイアされたかわいいフォントを紹介します。

本来は有料なだけあってかなり高品質。フォントファイルは.otfでWindowsでもmacOSでも利用できます。
期間中にダウンロードしておけば、いつでも使えて、再ダウンロードも無料です。

フォントを使用したデザイン例

Loma - A Vintage-Style Stamp Font

続きを読む

レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法

Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。

スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。

スクリーンサイズが中途半端なときにデザインが崩れないようにする実装方法

Thinking About The In-between Design Cases
by Ahmad Shadeed

続きを読む

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。

それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

tailblocks -GitHub

続きを読む

2020年最新版!最近見かけるロゴのデザインに使用されているトレンドのまとめ -2020 Logo Trends

トレンドを押さえておくことは、デザインの引き出しを増やすために役立ちます。
最近のロゴのデザインに使用されているタイポグラフィ、カラー、形など、トレンド、デザインテクニックを紹介します。

2020年のロゴデザインのトレンド

2020 Logo Trend Report

続きを読む

ノンデザイナーズ・デザインブックの特典PDF「フォント、タイポグラフィの基本」が応募者全員にもらえます

不朽のデザイン書「ノンデザイナーズ・デザインブック」累計60刷を記念して、期間限定のキャンペーンが開催されています!

なんと応募者全員に、日本語のテキスト・フォント・タイポグラフィについて解説した特典PDFがもらえます。

ノンデザイナーでも役立つフォント、タイポグラフィの基本

続きを読む

Webサイトやブログを高速化、PWA対応!静的サイトジェネレーターの導入方法を詳しく解説した入門書

これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。

ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。

Webサイト高速化のための静的サイトジェネレーター活用入門

続きを読む

CSSの数学関数が便利すぎる!min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。
しかし、便利な数学関数はcalc()だけではありません!
先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。

最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、
これからのWebページやスマホアプリの実装にかなり役立つと思います。

CSSの比較関数「min()」「max()」「clamp()」の使い方を詳しく解説CSSの比較関数「min()」「max()」「clamp()」の使い方を詳しく解説

Everything I Learned About min(), max(), clamp() In CSS
by Ahmad Shadeed

続きを読む

top of page

©2020 coliss