シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
Post on:2020年6月5日
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。
シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。
有料フォントが今週末まで無料！スタンプに使われているようなかわいいヴィンテージのフォント -Loma
Post on:2020年6月5日
通常は有料ですが、今週末まで無料でダウンロードできる、ヴィンテージのスタンプにインスパイアされたかわいいフォントを紹介します。
本来は有料なだけあってかなり高品質。フォントファイルは.otfでWindowsでもmacOSでも利用できます。
期間中にダウンロードしておけば、いつでも使えて、再ダウンロードも無料です。
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
Post on:2020年6月4日
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。
スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。
Thinking About The In-between Design Cases
by Ahmad Shadeed
最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks
Post on:2020年6月3日
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。
それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。
2020年最新版！最近見かけるロゴのデザインに使用されているトレンドのまとめ -2020 Logo Trends
Post on:2020年6月2日
トレンドを押さえておくことは、デザインの引き出しを増やすために役立ちます。
最近のロゴのデザインに使用されているタイポグラフィ、カラー、形など、トレンド、デザインテクニックを紹介します。
ノンデザイナーズ・デザインブックの特典PDF「フォント、タイポグラフィの基本」が応募者全員にもらえます
Post on:2020年6月1日
不朽のデザイン書「ノンデザイナーズ・デザインブック」累計60刷を記念して、期間限定のキャンペーンが開催されています！
なんと応募者全員に、日本語のテキスト・フォント・タイポグラフィについて解説した特典PDFがもらえます。
Webサイトやブログを高速化、PWA対応！静的サイトジェネレーターの導入方法を詳しく解説した入門書
Post on:2020年5月29日
これからのWebサイトに求められる要件「高速化」「メタデータ」「PWA」などに対応するための一つの答えが、静的サイトジェネレーターだと思います。Reactベースの静的サイトジェネレーター「GatsbyJS」で、Webサイトやブログを構築する手順を詳しく解説した入門書を紹介します。
ReactやJavaScriptに自信が無くても、非常に分かりやすい解説なので、必要となる制作知識を身につけることができます。
CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
Post on:2020年5月28日
CSSの数学関数と言えば、calc()が便利ですよね。
しかし、便利な数学関数はcalc()だけではありません！
先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。
最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、
これからのWebページやスマホアプリの実装にかなり役立つと思います。
Everything I Learned About min(), max(), clamp() In CSS
by Ahmad Shadeed
