社内サイト管理者を育てる会社、中小企業119専門家、デジタル化応援隊専門家

SWELLブロックを利用したブロックパーツの制作・パターン11~20

目次

ブロックパーツの制作11  3カラム( フルワイド 背景画像無し )

3カラム (フルワイド 背景画像無し)

  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力

ブロックパーツの制作12  3カラム(サイト幅)

3カラム (フルワイド 背景画像あり 透明度50%)

  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力
  1. ここに文字を入力
  2. ここに文字を入力
  3. ここに文字を入力
  4. ここに文字を入力

ブロックパーツの制作13 カラム(背景にグラデーション )

カラム背景にグラデーション)

カラムの背景をグラデーション

カラムの背景をグラデーション

カラムの背景をグラデーション

ブロックパーツの制作14  カラム背景:白 フルワード画像指定

カラム背景:白 フルワード画像指定

カラムの背景をグラデーション

カラムの背景をグラデーション

カラムの背景をグラデーション

ブロックパーツの制作15  画像のスタイル

画像のスタイル

ブラウザ風

角丸

デスクトップ風

デフォルト

枠あり

影あり

ブロックパーツの制作16  段落、グループ化、スタイル

段落 ⇒ グループ化 ⇒  スタイル

ここが1行目

ここが2行目

ここが3行目

ここが1行目

ここが2行目

ここが3行目

ここが1行目

ここが2行目

ここが3行目

ブロックパーツの制作17  文字色 / 強調、斜め /  マーカー線

文字色 / 強調、斜め /  マーカー線

ここが1行目

ここが2行目

ここが3行目

ここが強調BOLD

ここが斜めイタリック

ここが取り消し線

ここが1行目

ここが2行目

ここが3行目

ブロックパーツの制作18  背景範囲の区別

文字背景 / グループ背景 /  カラム背景

ここが1行目

ここが2行目

ここが3行目

ここが1行目

ここが2行目

ここが3行目

ここが1行目

ここが2行目

ここが3行目

ブロックパーツの制作19  改行とShift改行の違い、スペーサーで行間調整

改行 / シフト改行 /  スペーサ 行間調整

1行目最後で改行

2行目最後で改行

3行目入力

1行目最後でShift改行
2行目最後でShift改行
3行目入力

1行目

2行目(上にスペーサー挿入)

ブロックパーツの制作20  行間の調整

普通1.5行 / 行間2行 /  行間0行

1行目

2行目

3行目

1行目

2行目

3行目

1行目

2行目

3行目

この記事を書いた人

目次
閉じる