レイアウト, パーツ

実装目安

3分

カード型 記事一覧パーツ（PC3カラム、SP1カラム。枠あり）

無料記事

2023/07/12 [ ID: 6581 ]

【パス会員限定】基本的なカード型の記事一覧パーツを紹介。

html, css

実装目安

3分

スマホ 時に1カラムになるテーブルレイアウト

会員無料

2023/10/03 [ ID: 548 ]

SP幅（ブレークポイント以下）で 1カラム（複数行・1列）になる表組み

レイアウト, パーツ

実装目安

1分

グリッドレイアウト（左上に大きいグリッドアイテムが1つ）

無料記事

2022/06/22 [ ID: 8494 ]

【パス会員限定】左上に大きいグリッドアイテムを配置したグリッドレイアウト。画面幅に応じてカラム数が4、3、2と変化する。

レイアウト, パーツ

実装目安

1分

テーブルパーツ（「行・列」見出しあり）

無料記事

2022/06/24 [ ID: 6066 ]

【パス会員限定】基本的なテーブル(表組み)パーツを紹介。

レイアウト, パーツ

実装目安

1分

テキストを画像の中央に配置したリンクパーツ（高さ可変、ホバーで画像拡大）

無料記事

2022/12/12 [ ID: 11276 ]

【パス会員限定】テキストを画像の上下左右中央に配置した高さ可変のリンクパーツ。ホバー時に画像が拡大するアニメーション付き。

レイアウト, パーツ

実装目安

1分

チェックボックス（ボタン型）

無料記事

2022/10/13 [ ID: 10721 ]

【パス会員限定】ボタン型のチェックボックスパーツ。

html, css

実装目安

1分

縦書き指定 (writing-mode)

無料記事

2023/10/03 [ ID: 660 ]

cssプロパティのwriting-modeでテキストの縦書きを表現する

レイアウト, パーツ

実装目安

1分

見出しパーツ（左右にスラッシュ）

無料記事

2022/06/20 [ ID: 8600 ]

【パス会員限定】見出しの左右にスラッシュがあるパターンの見出し。見出しタグ内にspanタグが有るパターンと無いパターンを記載。

レイアウト, パーツ

実装目安

1分

背景を斜めにカットしたセクション（clip-pathを使用）

無料記事

2022/06/16 [ ID: 8552 ]

【パス会員限定】背景を斜めにカットしたセクションをCSSのclip-pathを使用して実装。斜めの方向・位置が異なるパーツを4パターン用意。

レイアウト, パーツ

実装目安

1分

マーカー付きの見出し（複数行）

無料記事

2022/06/14 [ ID: 8514 ]

【パス会員限定】複数行の見出し(幅可変)に、マーカーの線を引いたパーツ。