{"id":23270428,"url":"https://github.com/umanari145/css","last_synced_at":"2026-04-08T18:31:28.299Z","repository":{"id":21354883,"uuid":"92467617","full_name":"umanari145/css","owner":"umanari145","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-31T02:30:54.000Z","size":9561,"stargazers_count":0,"open_issues_count":24,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T19:33:53.387Z","etag":null,"topics":["bootstrap","css","flex","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umanari145.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-26T03:19:53.000Z","updated_at":"2025-12-31T02:52:43.000Z","dependencies_parsed_at":"2024-12-19T18:51:45.092Z","dependency_job_id":"f3b8e8e3-ff2d-4977-a02a-9402879e07cb","html_url":"https://github.com/umanari145/css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umanari145/css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Fcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Fcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Fcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Fcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umanari145","download_url":"https://codeload.github.com/umanari145/css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Fcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31568584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","flex","tailwindcss"],"created_at":"2024-12-19T18:51:38.414Z","updated_at":"2026-04-08T18:31:28.289Z","avatar_url":"https://github.com/umanari145.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css\n\n## ファイル概要\n- animation.html cssを使った動的なアニメーション keyframe,animate, transition, before\u0026afterの枠線, scroll検知など\n- css_framework bulmaをベースにしたCSSフレームワーク npx gulpで動く\n\n- checked_css radio,checkboxのチェック状態での連動表示、非表示\n\n- font_chousei.html fontサイズ vwの使用など\n\n- fontsize.html %表記,px,remなどについて\n\n- image_font.html cssが画像とフォントサイズについての制御パターン\n\n- image_object.php object-fitのプロパティについて。主に画像比率を保ったままのセンタリング\n\n- main_visual.html メインキャッチ画像の固定方法などについて。backgroundがらみのプロパティ説明\n\n- main_visual2.html 大型の背景画像の固定方法について。\n\n- margin_float.html floatを使ったレイアウトの組み方について\n\n- modal.html bootstrapを使ったモーダルウィンドウについて\n\n- original_pararax.php transformを使ったpararaxエフェクトに関して\n\n- position.html positionの細かい挙動などについて\n\n- table.html tableについて。各幅のロジックがどのように決まるかなど\n\n- table.html tableのborderのコツについて。\n\n- table2.html ヘッダー固定テーブルの挙動について JSのライブラリ(jquery.tablefix.js)とcssを使ったパターンに関して\n\n- vertical.html テーブルの中央よせに関して\n\n- prohazusample 書籍「プロとして恥ずかしくない新CSSデザインの大原則」のソース。比較的オーソドックスなページのレイアウトについて\n\n- sample/index.html 比較的小ネタ的なCSSについて。書籍「初めてのCSS設計」ネタ多し。またカスタマイズされたチェックボックスなど。\n\n- samplesite01 書籍「現場のプロが本気で教える」HTML/CSSデザイン講義\n\n- samplesite02〜04 サイトの作成サンプル。書籍「HTML5/CSS3モダンコーディング」のサンプルなど\n\n- src/customer.scss mystyle.scssとmyvariable.scssの読み込み。これ1つで他のcssを読み込める\n\n\n- tailwind 新しいCSSの手法\n```\ncd ./tailwind\nnpx tailwind build tailwind.css -c tailwind.js -o output.css\n# https://tailwindcss.com/docs/what-is-tailwind/\n# 元実際に読み込むcssはoutput.css\n```\n\n- sass/sample.scss sassの基礎的なサンプル\n\n- flex flexのサンプル\n\n- ejs ejs(htmlのテンプレートエンジン)を使ったサンプル(gulpで吐き出す)\n\n- compassdemo compassを使ったdemo。201709ごろ使用。\n\n- bulma bulmaを使ったhtmlのサンプル\n\n## セットアップ（2025年版 - Gulp廃止）\n\n### npmインストール\n\npackage.jsonに記述されたライブラリの読み込み\n\n```bash\nnpm install\n```\n\n### ビルドコマンド\n\npackage.jsonのscriptに書かれたコマンドで各種ファイルをコンパイル\n\n```bash\n# すべてのファイルをビルド（LESS, SASS, EJS, カスタムCSS）\nnpm run build\n\n# ファイル監視モード（開発用）- 変更を自動検知してビルド\nnpm start\n\n# 個別ビルド\nnpm run build:less    # LESSのコンパイル\nnpm run build:sass    # SASSのコンパイル（Bulma）\nnpm run build:ejs     # EJSのコンパイル\nnpm run build:custom  # カスタムCSSのビルド（Bootstrap用）\n```\n\n### 使用技術（2025年版）\n\n- **Dart Sass**: node-sassの代わりに最新のSassコンパイラを使用\n- **Bootstrap 5.3**: 最新のBootstrapフレームワーク\n- **Bulma 1.0**: 最新のBulmaフレームワーク\n- **PostCSS + Autoprefixer**: ベンダープレフィックスの自動付与\n- **chokidar-cli**: ファイル監視（Gulp不要）\n- **npm-run-all**: 複数のnpmスクリプトを並列実行\n\n\n\n## Docker環境（2025年版）\n\n最新のNode.js環境で実行\n\n```bash\n# コンテナ起動（自動的にnpm install \u0026 npm startを実行）\ndocker-compose up -d\n\n# ログを確認\ndocker-compose logs -f\n\n# コンテナに入る\ndocker-compose exec node bash\n\n# コンテナ内でコマンド実行\ndocker-compose exec node npm run build\n\n# 停止\ndocker-compose down\n```\n\n### ローカル環境での実行\n\nDockerを使わない場合は、Node.js 18以上をインストール後：\n\n```bash\nnpm install\nnpm start  # 開発モード（ファイル監視）\nnpm run build  # ビルドのみ\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Fcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumanari145%2Fcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Fcss/lists"}