GSS (Go Style Sheets) は、HTML ファイル内のクラス名に基づいて動的に CSS ファイルを生成および監視するための便利なツールです。 HTML ファイルに変更が加えられると、GSS はそれらの変更を検出し、対応する CSS ファイルを自動的に更新します。
- 動的な CSS 生成: HTML ファイル内のクラス名を検出し、それらのクラスに対して CSS ルールを動的に生成します。
- 監視モード: HTML ファイルの変更を監視し、変更が検出されたときに CSS ファイルを自動的に更新します。
- カスタム CSS テンプレート: ニーズに合わせてカスタマイズできる一連の CSS テンプレートを提供します。
- 応答性: さまざまな画面サイズに対応するレスポンシブ デザイン用のメディア クエリをサポートします。
- アニメーションと遷移: ボタンやその他の要素にアニメーション効果を追加します。
- フォーム スタイリング: 入力フィールドやエラーメッセージなど、フォーム要素のスタイリングを強化します。
- グリッド システム: グリッド レイアウトを使用して、応答性の高いレイアウトを作成します。
- カラー スキーム: プロジェクト全体で使用するカラー パレットを定義します。
GSS を使用するには、次の手順に従います。
-
インストール: GSS は Go モジュールとして配布されます。プロジェクトでまだ行っていない場合は、次のコマンドを実行してインストールします。
go get github.com/username/gss
-
HTML フォルダーを準備する: HTML ファイルを含むフォルダーを作成します。 GSS はこのフォルダー内の HTML ファイルを処理します。
-
CSS テンプレートをカスタマイズする:
css_templates.goファイルで提供される CSS テンプレートをカスタマイズして、独自のデザインと要件に合わせて調整できます。 -
コマンドラインから実行する: 次のコマンドを使用して GSS を実行します。
go run main.go <HTML_FOLDER_PATH> [--watch]
<HTML_FOLDER_PATH>を HTML ファイルを含むフォルダーのパスに置き換えます。オプションの--watchフラグを含めると、GSS は HTML ファイルの変更を監視し、自動的に CSS ファイルを更新します。 -
HTML ファイルを編集する: HTML ファイルにクラス名を追加または編集します。 GSS はこれらの変更を検出し、対応する CSS ルールを生成します。
GSS は、さまざまなデザイン要件に対応する幅広い CSS テンプレートを提供します。
クラス名: container
使用法: このクラスは、コンテンツを中央に配置し、最大幅を画面幅の 100% に制限するコンテナーを作成します。これは、Web サイトのメイン コンテンツ領域をラップするのに便利です。
<div class="container">
<!-- コンテンツここに -->
</div>クラス名: flex
使用法: このクラスは、要素をフレックスボックス コンテナーとして表示し、子要素を水平方向に並べて配置します。これは、親要素内で項目を柔軟にレイアウトする場合に便利です。
<div class="flex">
<div>フレックスアイテム 1</div>
<div>フレックスアイテム 2</div>
<div>フレックスアイテム 3</div>
</div>クラス名: blue
使用法: このクラスは、要素の背景色を青色 (#5980F6) に設定します。このクラスは、背景色をすばやく追加するのに役立ちます。
<div class="blue">青色の背景を持つ要素</div>クラス名: grid、grid-cols-1、grid-cols-2、grid-cols-3、grid-cols-4
使用法: これらのクラスは、グリッド レイアウトを作成するために使用されます。 grid クラスはグリッド コンテナーを定義し、grid-cols-N クラスはグリッド内の列の数を指定します (N は 1 から 4 までの数)。
<div class="grid grid-cols-2">
<div>グリッド アイテム 1</div>
<div>グリッド アイテム 2</div>
<div>グリッド アイテム 3</div>
</div>クラス名: text-center、text-left、text-right
使用法: これらのクラスは、テキストの配置を制御します。 text-center はテキストを中央揃えに、text-left はテキストを左揃えに、text-right はテキストを右揃えにします。
<h1 class="text-center">中央揃えの見出し</h1>
<p class="text-left">左揃えの段落</p>クラス名: font-bold、text-xl、text-2xl、text-3xl、text-4xl、text-5xl
使用法: これらのクラスは、フォントの太さとサイズを変更します。 font-bold はフォントを太字にします。 text-xl、text-2xl などでは、フォント サイズが増加します ( text-2xl は text-xl より大きくなります)。
<h1 class="font-bold text-2xl">太字で大きな見出し</h1>クラス名: btn、btn-primary、btn-secondary
使用法: これらのクラスは、ボタンのスタイルを定義します。 btn クラスは基本的なボタンを作成し、btn-primary と btn-secondary は異なる色のボタンを作成します。
<button class="btn btn-primary">プライマリ ボタン</button>
<button class="btn btn-secondary">セカンダリ ボタン</button>GSS には、レスポンシブ デザイン用のメディア クエリが組み込まれています。特定の画面サイズに対して異なるスタイルを適用できます。
@media (max-width: 768px) {
/* 768px 以下の画面幅に対するスタイル */
}
@media (min-width: 768px) and (max-width: 1024px) {
/* 768px から 1024px の画面幅に対するスタイル */
}GSS は、ボタンのような要素にアニメーション効果を追加できます。
.btn {
/* ボタンのアニメーション */
transition: background-color 0.3s, transform 0.2s;
}
.btn:hover {
/* ホバーエフェクト */
background-color: #4FD1C5;
transform: translateY(-2px);
}GSS は、入力フィールドやエラーメッセージなど、フォーム要素のスタイリングを強化します。
.input-field {
/* 入力フィールドのスタイル */
border: 1px solid #D1D5DB;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.3s;
}
.input-field:focus {
/* フォーカス時のスタイル */
border-color: #4FD1C5;
outline: none;
box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.2);
}
.error-message {
/* エラーメッセージのスタイル */
color: #EF4444;
font-size: 0.875rem;
}GSS は、グリッド レイアウトを使用して応答性の高いデザインを作成するグリッド システムを提供します。
.container {
/* コンテナのスタイル */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.column {
/* カラムのスタイル */
padding: 1rem;
background-color: #F3F4F6;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}GSS を使用すると、プロジェクト全体で使用するカラー パレットを定義できます。
.primary-color {
/* プライマリカラー */
color: #4FD1C5;
}
.secondary-color {
/* セカンダリカラー */
color: #6B7280;
}プルリクエストは歓迎です！ GSS をより良いものにするために、バグ修正、機能強化、または追加の CSS テンプレートの貢献を歓迎します。
このプロジェクトは MIT ライセンスの下でライセンスされています。詳細については、「LICENSE」ファイルを参照してください。