C-Labo. モジュール基本セット

再利用性が高いもの、いつものセット、忘れがちなものをカバーする目的

モジュール一覧

カテゴリ名	モジュール名称	モディファイア/子孫要素	class値	ファイル
レイアウト
	基本のコンテンツ幅		ly_cont	assets/scss/layout/content
		少し狭いコンテンツ幅	ly_cont__thin	assets/scss/layout/content
		少し広いコンテンツ幅	ly_cont__wide	assets/scss/layout/content
エレメント
	背景色付き見出し		el_hasBgcHeading	assets/scss/element/bgc-heading
	ページの先頭に戻るボタン		el_toPageTop	assets/scss/element/to-page-top
	メニューボタン（ハンバーガー）		bl_btnMenu	assets/scss/element/menu-button
	クリップメディア		el_clipMedia	assets/scss/element/clip-media
		子要素を4：3に	el_clipMedia__4to3	assets/scss/element/clip-media
		子要素を16：9に	el_clipMedia__16to9	assets/scss/element/clip-media
		丸く切り抜く	el_clipMedia__circle	assets/scss/element/clip-media
	ボタン		el_btn	assets/scss/element/button
		色違いボタン	el_btn__subcolor, el_btn__accent	assets/scss/element/button
		サイズ違いボタン	el_btn__sm, el_btn__lg	assets/scss/element/button
	スクリーンリーダ		el_readerOnly	assets/scss/element/a11y
	スキップリンク		el_skipLink	assets/scss/element/a11y
ブロック
	ページヘッダー		bl_pageHeader	assets/scss/block/page-header
	カラムレイアウト		bl_column	assets/scss/block/column
	フレックスカラム		bl_flexCol	assets/scss/block/flex-column
	ページネーション（CSS描画アイコン）		bl_pagenation	assets/scss/block/pagenation
	カード		bl_card	assets/scss/block/card
		カードで使うNewバッジ	bl_card_badge	assets/scss/block/card
		カードで使うブクマじるし	bl_card_bookMark	assets/scss/block/card
ヘルパー
	フォントサイズ		hp_fzXX	assets/scss/helper/font-size
	クリアフィクス		clear, hp_clearFix	assets/scss/helper/clear-fix
	上下マージン (rem)		hp_mtXrem, hp_mbXrem	assets/scss/helper/margin-rem
JSイベント絡み
アイデア

開発状況

背景色付き見出し：未リファクタリング（最終更新日：2025-10-02）
ページヘッダー：一旦開発完了（最終更新日：2022-09-18）
カラムレイアウト：一旦開発完了（最終更新日：2022-09-21）
フレックスカラム：一旦開発完了（最終更新日：2022-07-15）
ページネーション（CSS描画アイコン）：開発中（最終更新日：2023-02-10）
ページの先頭に戻るボタン：一旦開発完了（最終更新日：2024-03-27）
フォントサイズ：一旦開発完了（最終更新日：2021-10-24）
基本のコンテンツ幅：一旦開発完了（最終更新日：2021-10-24）
- 少し狭いコンテンツ幅：一旦開発完了（最終更新日：2021-09-19）
- 少し広いコンテンツ幅：一旦開発完了（最終更新日：2021-09-19）
カード：未リファクタリング（最終更新日：2021-10-24）
- カードで使うNewバッジ：一旦開発完了（最終更新日：2021-09-19）
- カードで使うブクマじるし：一旦開発完了（最終更新日：2021-09-19）
メニューボタン（ハンバーガー）：一旦開発完了（最終更新日：2022-05-24）
クリップメディア：一旦開発完了（最終更新日：2023-02-14）
- 子要素を4：3に：一旦開発完了（最終更新日：2021-09-19）
- 子要素を16：9に：一旦開発完了（最終更新日：2021-09-19）
- 丸く切り抜く：一旦開発完了（最終更新日：2022-07-15）
ボタン：一旦開発完了（最終更新日：2022-02-19）
- 色違いボタン：一旦開発完了（最終更新日：2021-09-20）
- サイズ違いボタン：一旦開発完了（最終更新日：2021-09-20）
スクリーンリーダ：一旦開発完了（最終更新日：2021-10-24）
スキップリンク：一旦開発完了（最終更新日：2021-10-24）
クリアフィクス：一旦開発完了（最終更新日：2021-10-24）
上下マージン (rem)：一旦開発完了（最終更新日：2021-10-24）

SCSSインポート用


/**
 * 00: Vars
 * 01: BASE
 * 02: Layout
 * 03: Module: Element
 * 04: Module: Block
 * 07: Unique
 * 08: Helper
 * 09: Print
 * 
 */


//
// 00: Vars
// SCSSおよび変数の定義
// 

@use "vars";
@use "global";
@use "mixin/breakpoints";


//
// 01: BASE
// normalize.css 採用
// ソフトリセット
// PRECSS ベースCSS
// 

@use "base/normalize";
@use "base/base";


//ここまでは常に読み込む




//
// 02: Layout
// PRECSS レイアウトCSS (ly_)
// 

@use "assets/scss/layout/content";


//
// 03: Module: Element
// PRECSS エレメントモジュールCSS (el_)
// 

@use "assets/scss/element/bgc-heading";
@use "assets/scss/element/to-page-top";
@use "assets/scss/element/menu-button";
@use "assets/scss/element/clip-media";
@use "assets/scss/element/button";
@use "assets/scss/element/a11y";
@use "assets/scss/element/a11y";


//
// 04: Module: Block
// PRECSS ブロックモジュールCSS (bl_)
// 

@use "assets/scss/block/page-header";
@use "assets/scss/block/column";
@use "assets/scss/block/flex-column";
@use "assets/scss/block/pagenation";
@use "assets/scss/block/card";
//@use "assets/scss/block/card-unit";


//
// 08: Helper
// PRECSS ヘルパーモジュールCSS (hp_)
// 

@use "assets/scss/helper/font-size";
@use "assets/scss/helper/clear-fix";
@use "assets/scss/helper/margin-rem";