sample2

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

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

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

h5見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h6見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

アンカーリンク

  • リスト
  • リスト
  • リスト

    • リスト
    • リスト
    • リスト
  1. リスト
  2. リスト
  3. リスト
    • リスト
    • リスト
    • リスト

アンカーリンクテスト

テーブルですスマホの時このまま小さくなります。thは自動でグレー
td1
td2

テーブルですスマホの時左枠が上部に移動します。
td1
td2

blockquote引用文用です

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

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

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

box1 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
box2 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
box3 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
box4 最下段に点線付き、囲みなし テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

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

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

※ポイント※画像左配置・右配置を使ったら、余白次第で次の項目も回り込んでしまいます。回り込みたくない場合は、次の要素に class=”clear” をつけてください。(上の「画像右配置テキスト回り込み(スマートフォンで回り込み解除、画像は中央に配置)」についています)
※<div class=”box1 clearfix”>~~~~</div>のように”clearfix”を含んだ形で書き始めると、この囲みの中だけで回り込みが完結します。(”<”、”>”は半角にしてください)

<合わせ技>

box1

box4
画像左、テキスト右
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
box4終わり
box4
画像右、テキスト左
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
box4終わり

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

box1終わり

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

<パソコンとスマホでウィンドウ幅を判定して自動で切り替わる方法>
jishaikkan3-pc.jp ↔ jishaikkan-sp.jp

切り替わる条件としては「class=”imgSwitch”」がついていて PC用画像[同一フォルダ名/ファイル名-pc.拡張子] と、 SP用画像[同一フォルダ名/ファイル名-sp.拡張子] がある場合に切り替わります。

このページの先頭へ戻る