桐生市、地元でしっかり作ってくれるホームページ制作会社をお探しの方へ

2階層目コンテンツのテンプレートでござる

見出しの設定

見出し1

見出し1リンク

見出し1の画像バナー

見出し2

見出し2

見出し2の画像バナー

見出し3

見出し3

見出し3の画像バナー

見出し4

見出し4

見出し4の画像バナー

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

見出し5
見出し5
見出し5の画像バナー

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

見出し6
見出し6
見出し6の画像バナー

pタグの設定

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

テキストはこんな感じ

テキストのリンクはこんな感じ→リンク←ここまでテキストテキストテキストテキストテキストテキストテキストテキスト

(1) 一桁数字のテキストインデント(かっこと一桁の数字はは全角で設定してあります)一桁数字のテキストインデント(かっこと一桁の数字はは全角で設定してあります)一桁数字のテキストインデント(かっこと一桁の数字はは全角で設定してあります)

(10) 二桁数字のテキストインデント(かっことは全角、数字は半角で設定してあります)二桁数字のテキストインデント(かっことは全角、数字は半角で設定してあります)二桁数字のテキストインデント(かっことは全角、数字は半角で設定してあります)

classに「"ind01"」を付与すると一文字上がります

● 一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント

classに「"ind02"」を付与すると一文字上がります

●● 二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント

classに「"notes"」を付与すると一文字上がりフォントサイズが80%に縮小します

※ 注釈のテキスト(文字が少ない場合はclassに「"right"」を追加すれば右に寄ります)

※ 注釈のテキスト(文字が多い場合)注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト

ind01とかind02を使用したあとのpタグが揃わないのが気になるときは

● ind01の文字のズレがきになる!そんな時は

class=”underdownind01”を入れると幸せです左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト

左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト

●● ind01の文字のズレがきになる!そんな時は

class=”underdownind02”を入れると幸せです左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト

左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト

divの最後にあるpタグの下マージンはつきません

リスト系タグの設定

  • 順番無しリスト
  • 順番無しリスト
  • 順番無しリスト
  1. 順番有りリスト
  2. 順番有りリスト
  3. 順番有りリスト
見出し付きリストタイトル
見出し付きリスト説明文

カラムのインスタント設定

写真が左に回り込むのです

こんな感じです

新聞の文字組みたいなレイアウトBOX。写真サイズは32%でパディング1文字分空きます。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト

写真が右に回り込むのです

こんな感じです

新聞の文字組みたいなレイアウトBOX。写真サイズは32%でパディング1文字分空きます。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト

h3見出し

見出しはh1~h6まで対応させてます。写真の縦比率は適宜合わせつつ作ってください。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト

pのみだとこんな感じです。写真の縦比率は適宜合わせつつ作ってください。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト

写真とかリストとか横列のBOX

レスポンシブで可変する便利box。リストで回してます

PC⇒3列、480px以下で1列

PC⇒4列、768px以下で2列

モーダルウィンドウ設置

親要素に「class="modal"」 1つ目の子要素に「divタグ」孫要素にプレビュー要素の画像「imgタグ」と「<button class="open"><span class="bgblack">拡大</span></button>」

2つ目子要素に拡大画像を挿入と必ずクラス「class="modalimg"」を入れる

モーダルウィンドウULタグバージョン

ulの親要素に「class="modal"」 1つ目の子要素に「liタグ」孫要素に「figureタグ」玄孫要素にプレビュー要素の画像「imgタグ」と「<button class="open"><span class="bgblack">拡大</span></button>」

2つ目の孫要素に拡大画像を挿入と必ずクラス「class="modalimg"」を入れる

2つ目の孫要素に「figcaptionタグ」を入れてから3つ目の要素に拡大画像を入れることも可能です

こんな感じで応用編

olバージョン