パーツサンプル

h2見出しテキストテキストテキストテキストテキストテキスト

h3見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

h4見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

h5見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h6見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • リスト
  • リスト
  • リスト
    • リスト
    • リスト
    • リスト
  1. リスト
  2. リスト
  3. リスト
    • リスト
    • リスト
    • リスト
テーブルです
aaa
bbb
ccc

blockquote引用文用です

別ウィンドウで開くリンク

ここから先は、装飾をするのにHTMLとCSSの知識が必要になります。
仕上がりが崩れていないか確認しながらご利用ください。
↓↓↓↓↓↓

別ウィンドウで開くアイコンを出したくない場合は、aタグに class=”noExternal”をつけてください。(例:画像にリンクをはったら「別ウィンドウで開くアイコンが自動で出てきてしまった時」等)

box1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
box2 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
box3 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■画像左配置テキスト回り込み(スマートフォンで回り込み解除、画像は中央に配置)
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

■画像右配置テキスト回り込み(スマートフォンで回り込み解除、画像は中央に配置)

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※ポイント※画像左配置・右配置を使ったら、余白次第で次の項目も回り込んでしまいます。回り込みたくない場合は、次の要素に class=”clear” をつけてください。(上の「画像右配置テキスト回り込み(スマートフォンで回り込み解除、画像は中央に配置)」についています)
もしくは、回り込みをしている部分を

で囲うことで下の要素が回り込むのを防ぐことができます。

↓「リスト」を横並びにしたい場合お使いください。
※リスト用です。リストとして縦に並んだものを、下記のように横並びにしたい時に使用。リストではない関連性のないボックスを横並びにしたい場合は後述のflexBoxを使用

float2col1

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

float3col1

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

float4col1

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

float4col2

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

■flexBox1 左右50%

aaa
bbb

■flexBox2 左260px

aaa
bbb

■flexBox3 右260px

aaa
bbb

■flexBox4 均等3つ並び

aaa
bbb
ccc

■pageLinkList1 3つ並び

■pageLinkList2 2つ並び

■アンカーリンクをする場合は、リンク先を

<div class="anchor clearfix" id="ここにID">ここにコンテンツ</div>

で囲ってください。
そうしないとヘッダ固定分のずれが生じます。

このページの先頭へ戻る