タイトルに入力したテキストには上記のようにグラデーションボーダーが付きます。
以下はデザインブロックを使用したサンプルになります。ページ制作にご活用いただけると幸いです。
見出し
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
段落
こちらが通常のテキストになります。
リスト
1つ目は順序なしリスト、2つ目は順序ありリスト
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
引用
こちらは引用文になります。こちらは引用文になります。こちらは引用文になります。こちらは引用文になります。こちらは引用文になります。こちらは引用文になります。
引用元
テーブル
1つ目はデフォルトスタイル、2つ目はストライプスタイル
| プラン | 内容 | 費用 |
| サンプル1 | テーブルデフォルトスタイル | ○○,○○○円 |
| サンプル2 | テーブルデフォルトスタイル | ○○,○○○円 |
| プラン | 内容 | 費用 |
| サンプル1 | テーブルストライプスタイル | ○○,○○○円 |
| サンプル2 | テーブルストライプスタイル | ○○,○○○円 |
| サンプル3 | テーブルストライプスタイル | ○○,○○○円 |
ボタン
1つ目は塗りつぶし、2つ目は輪郭
画像
ギャラリー
メディアとテキスト
メディアとテキストを横並びにすることができます。
カラム
カラムを作成できます。
画像や動画、テキストを横並びにできます。
3カラム×3カラムの合計9個のアイテムを横並びにできます。
- リスト1
- リスト2
- リスト3
スペーサー
ブロックの高さを自由に調節してスペースを作ることができます。
↑40px
↑60px
埋め込みTwitter
埋め込みYouTube
クラスを使ったデザイン
gradationTxt
classにgradationTxtを追加するとこのようなカラーに変更できます。
gradationBtn
ボタンを作る際にaタグにgradationBtnとtext-decoration-noneというクラスを追加し、中身をspanで囲うことで下記のようなデザインのボタンを作れます。またbootstrapを使用しているのでpx-2やpy-2とクラスに追加することで余白を追加できます。
詳細はこちら