CSSデザインサンプル

DESIGN投稿・固定ページで使用される HTML タグの CSS デザインサンプルをご紹介します。

Gush5 ではカスタマイズを前提としているため、シンプルなデザインにしました。

見出し2 h2

見出し3 h3

見出し4 h4

見出し5 h5

見出し6 h6

<h1> は記事タイトルに使用していますので、<h2> ~ <h6> を使ってください。

テーブル

見出しセル1 見出しセル2 見出しセル3
通常のセル 通常のセル 通常のセル

表に幅や高さを指定していない場合、各セルの文字数に応じて列幅が変わります。

スマホ閲覧時は枠を飛び出さないよう max-width を指定していますが、px などで幅を指定すると画面から見切れてしまいますのでご注意ください。

リスト

番号なしリスト

  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル

番号ありリスト

  1. リストサンプル
  2. リストサンプル
  3. リストサンプル
  4. リストサンプル

定義リスト

定義リスト見出し
定義リストの内容

定義リスト <dl> にクラス名 dl-check をつけると以下のようになります。

定義リスト見出し
定義リストの内容

ボックス

引用

<blockquote> を使えばなんでも引用とみなされるわけではありません。

要件を満たしたものだけが引用となり、タグはそれを補完するものです。

ブログ初心者が覚えておきたいHTMLタグ一覧と基本的な使い方

背景色つきボックス

クラス名に gray_box をつけることで、背景色がグレーのボックスになります。

画像配置

薔薇

配置を「中」にすると、画像が中央に配置されます。

キャプションをつけた場合は、以下のように表示されます。

きれいな薔薇の画像

きれいな薔薇の画像

nature配置を「右」にすると、画像は右側に配置され、文章が回り込みます。

回り込みを解除する場合は、段落や改行にクラス名 clear をつけてください。

バレエ

バレエ

配置を「左」にすると、画像が左側に配置され、文章が回り込みます。

画像のサイズによってはスマホ閲覧時に見づらくなってしまいますので、パソコンだけではなくスマホで見たときにどうなるか、というのも考慮に入れて配置してください。

YouTube動画

YouTube 動画はそのままコードを貼りつけるだけで自動的にレスポンシブ対応となります。

カスタマイズを楽しもう!

Gush5 では読みやすさを考慮して、段落の余白や行間、フォントカラーを調整しています。

ただ、どれが読みやすいかはそれぞれの好みもありますので、自由にカスタマイズを楽しんでください。