フロー未リファクタリング

1. 1

   見出し .bl_flow_item_ttl

   少し強調したいとき

   本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な

2. 2

   見出し .bl_flow_item_ttl

   少し強調したいとき

   • リストも使いたいよね
   • リストも使いたいよね
   • リストも使いたいよね
3. 3

   見出し .bl_flow_item_ttl

   少し強調したいとき

   本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な本文的な

クラス名

bl_flow

マークアップ例

<ol class="bl_flow">
	<li class="bl_flow_item">
		<em class="bl_flow_item_num">1</em>
		<h3 class="bl_flow_item_ttl">見出し</h3>
		<div class="bl_flow_item_txt">
			<p class="bl_flow_item_subTtl"><strong>少し強調したいとき</strong></p>
			<p>本文</p>
		</div>
	</li>
	<li class="bl_flow_item" style="--flow--item--bgc--prev:#ccc;--flow--item--bgc:#aaa;">
		<em class="bl_flow_item_num">2</em>
		<h3 class="bl_flow_item_ttl">見出し</h3>
		<div class="bl_flow_item_txt">
			<p class="bl_flow_item_subTtl"><strong>少し強調したいとき</strong></p>
			<p>本文</p>
		</div>
	</li>
	<li class="bl_flow_item" style="--flow--item--bgc--prev:#aaa;--flow--item--bgc:#999;">
		<em class="bl_flow_item_num">3</em>
		<h3 class="bl_flow_item_ttl">見出し</h3>
		<div class="bl_flow_item_txt">
			<p class="bl_flow_item_subTtl"><strong>少し強調したいとき</strong></p>
			<p>本文</p>
		</div>
	</li>
</ol>
<!-- /.bl_flow -->

定義

機能
流れを説明する

あしらい・振る舞い
3カラムで左から右に順を追って
幅が狭いと1カラムで上から下に矢印変更

特記事項
とくになし

ファイルパス

Change Log

1. 開発開始：2025-12-08
2. 最終更新：2025-12-08