プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS

ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。

HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。

Neat CSS
Neat CSS -GitHub

• Neat CSSの特徴
• Neat CSSの仕様
• Neat CSSの使い方

Neat CSSの特徴

Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。

MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Neat CSS

Neat CSSの主な用途

• ブログ
• ジャーナル
• テクニカルサイト
• ドキュメンテーション
• 書籍
• シンプルなショップ

Neat CSSの主な特徴

• Neat CSSはミニマルに設計されており、高速にページが表示されます。
• ミニマルで高速なため、消費されるリソースも最小限。
• プレーンなHTMLで実装するため、将来的にも長持ちします。
• CSSは未圧縮の状態にしており、オープン性を高くしています。

Neat CSSのGitHubは、下記ページから。

Neat CSS -GitHub

Neat CSSの仕様

Neat CSSはシンプルでミニマルにデザインされており、仕様がいくつかあります。

Neat CSS

ページの最大幅

デフォルトで最大幅は、800pxです。調査によると、幅を制限すると、コンテンツ自体の保持力が向上し、目の疲れが軽減されることが分かっています。また、薄いテキストの列、非常に大きなモニターでより読みやすくなります。これは、custom.cssファイルのbody要素のmax-widthを編集することで簡単に変更できます。

中央揃え

Neat CSSでは、中央揃えを採用しています。私は自分のプロジェクトのほとんどでNeatを出発点として使用しており、ほとんどの場合、ボディを中央寄せにしていることに気づきました。その結果、デフォルトは中央揃えになりました。custom.cssファイルにmargin-leftとmargin-rightを追加すれば、左寄せにできます。

画像

デフォルトで画像の幅は、100%です。これは、幅が広くて短い画像に最適です。必要に応じて個々の画像を手動サイズで設定したり、アスペクト比を使用する場合は、custom.cssで画像の幅を変更できます。

左側の溝

中央揃えに配置しない場合、大きなモニターでは左の余白が広くなり、デスクトップやタブレットのサイズではページにもう少しゆとりが生まれます。デフォルトは中央揃えになっているため、通常はこれに気づきません。

ボタン

ボタンには複数の種類があります。ボタンのように見えるaタグ、buttonタグ、送信スタイルのinputタグがあります。

レスポンシブ

Neat CSSは、レスポンシブが高いように設計されています。

dt>グリッド

Neat CSSには、シンプルなグリッドシステムがあります。各列のサイズは自動的に調整されます。4つの列を用意すると、4つの同じサイズの列が得られます。スマホではすべてが単一の列に折りたたまれます。

dt>中央配置

divタグをはじめ、中央配置にしたいものは.centerで配置できます。

Neat CSS

Neat CSSを実際にブログで使用しているページがこちらです。

100R

Neat CSSの使い方

neat.cssファイルとneat.htmlファイルを取得します。

次に、neat.htmlをindex.htmlにコピーし、変更を加えます。

CSSのカスタマイズをする際は、新しくcustom.cssファイルを作成し、HTMLファイルに外部ファイルとして記述します。

詳しくは、下記をご覧ください。

Neat CSS

neat.cssの中身は、下記の通りです。