H2見出しa
H2見出しb
H3見出しa
H3見出しb
H4見出しa
H4見出しb
H5見出しa
H5見出しb
囲み枠のスタイル
WEBコンテンツを運営されている方にとって、記事を書く中で「ここに注目してほしい！」と思うことは多くあると思います。そんなときにはパッと目をひく、囲み枠（ボックスデザイン）がおすすめです。TCDクイックタグでは3種の囲み枠を用意しています。
文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。
枠を多用しすぎると、強調したい箇所が主張をしすぎているため、読みにくくなってしまい、これでは本末転倒です。枠をつけるのは必要なものだけにし、その他は、下線を引く、文字を大きくする、色を変える、太字にする、書体を変えるなどしましょう。
カスタマイズ＊囲み枠のカラーバリエーション
※クラス指定を追加することで配色の変更が可能です。
「揃える」ことは重要です。文字の位置や、見出しなど揃えられるところはすべて揃えます。文章の端が揃うことで文頭が見つけやすくなり、文章が読みやすくなります。画像の大きさ、ボックスの色を揃えると見た目のバランスが良くなります。
「まとめる」ことも効果的です。項目名と説明、写真と写真のタイトルなどのデザインを揃えるように、関連のあるもの（例えば注釈など）を同じ枠、背景色で表示することで直感的に理解をしやすくなり、劇的に全体の視認性が向上します。
まとめた情報を「区別する」とグループが強調され、情報を素早く見つけることができ、正確に伝えることができます。グループを区別するには、罫線を引く、色分けをするなどの方法があります。TCDクイックタグを使ってサッとデザインを整えましょう。
プロのデザイナーは、これらのルールを経験からほとんど無意識に使いこなします。このルールを身に付ければ、誰でもレイアウトが上達します。様々なルールがありますが、基本ルールは「揃える」「まとめる」「区別する」を使った情報の整理整頓です。
ボタンのスタイル
フラットボタン（デフォルトサイズ）
フラットボタン-L
フラットボタン-S
フラットボタン（red）
フラットボタン（blue）
フラットボタン（green）
フラットボタン（yellow）
角丸ボタン（デフォルトサイズ）
角丸ボタン-L
角丸ボタン-S
ラウンドボタン（デフォルトサイズ）
ラウンドボタン-L
ラウンドボタン-S
カスタマイズ＊ボタンの配置方法を指定する
※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。
テーブルのレスポンシブ表示
テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
| CSS | Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは… |
|---|---|
| レスポンシブデザイン | レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する… |