お問い
メール
電話
見出しの設定
見出し１
見出し１リンク
![]()
見出し1の画像バナー
見出し２
見出し２
![]()
見出し2の画像バナー
見出し３
見出し３
![]()
見出し3の画像バナー
見出し４
見出し４
![]()
見出し4の画像バナー
テキストテキストテキストテキストテキストテキストテキストテキスト
見出し5
見出し5
![]()
見出し5の画像バナー
テキストテキストテキストテキストテキストテキストテキストテキスト
見出し6
見出し6
![]()
見出し6の画像バナー
pタグの設定
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストはこんな感じ
テキストのリンクはこんな感じ→リンク←ここまでテキストテキストテキストテキストテキストテキストテキストテキスト
（１） 一桁数字のテキストインデント（かっこと一桁の数字はは全角で設定してあります）一桁数字のテキストインデント（かっこと一桁の数字はは全角で設定してあります）一桁数字のテキストインデント（かっこと一桁の数字はは全角で設定してあります）
（10） 二桁数字のテキストインデント（かっことは全角、数字は半角で設定してあります）二桁数字のテキストインデント（かっことは全角、数字は半角で設定してあります）二桁数字のテキストインデント（かっことは全角、数字は半角で設定してあります）
classに「"ind01"」を付与すると一文字上がります
● 一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント一文字あげるテキストインデント
classに「"ind02"」を付与すると一文字上がります
●● 二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント二文字あげるテキストインデント
classに「"notes"」を付与すると一文字上がりフォントサイズが80%に縮小します
※ 注釈のテキスト（文字が少ない場合はclassに「"right"」を追加すれば右に寄ります）
※ 注釈のテキスト（文字が多い場合）注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト注釈のテキスト
ind01とかind02を使用したあとのpタグが揃わないのが気になるときは
● ind01の文字のズレがきになる！そんな時は
class=”underdownind01”を入れると幸せです左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト
左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト左マージン一文字下がるテキスト
●● ind01の文字のズレがきになる！そんな時は
class=”underdownind02”を入れると幸せです左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト
左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト左マージン二文字下がるテキスト
divの最後にあるpタグの下マージンはつきません
リスト系タグの設定
- 順番無しリスト
- 順番無しリスト
- 順番無しリスト
- 順番有りリスト
- 順番有りリスト
- 順番有りリスト
- 見出し付きリストタイトル
- 見出し付きリスト説明文
カラムのインスタント設定
写真が左に回り込むのです
こんな感じです
新聞の文字組みたいなレイアウトＢＯＸ。写真サイズは３２％でパディング1文字分空きます。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト
写真が右に回り込むのです
こんな感じです
新聞の文字組みたいなレイアウトＢＯＸ。写真サイズは３２％でパディング1文字分空きます。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト
h3見出し
見出しはh1～h6まで対応させてます。写真の縦比率は適宜合わせつつ作ってください。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト
ｐのみだとこんな感じです。写真の縦比率は適宜合わせつつ作ってください。書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト書き込みテスト
写真とかリストとか横列のBOX
レスポンシブで可変する便利box。リストで回してます
PC⇒3列、480px以下で1列
PC⇒4列、768px以下で2列
モーダルウィンドウ設置
親要素に「class="modal"」 １つ目の子要素に「divタグ」孫要素にプレビュー要素の画像「imgタグ」と「<button class="open"><span class="bgblack">拡大</span></button>」
２つ目子要素に拡大画像を挿入と必ずクラス「class="modalimg"」を入れる
モーダルウィンドウＵＬタグバージョン
ｕｌの親要素に「class="modal"」 １つ目の子要素に「liタグ」孫要素に「figureタグ」玄孫要素にプレビュー要素の画像「imgタグ」と「<button class="open"><span class="bgblack">拡大</span></button>」
２つ目の孫要素に拡大画像を挿入と必ずクラス「class="modalimg"」を入れる
2つ目の孫要素に「figcaptionタグ」を入れてから3つ目の要素に拡大画像を入れることも可能です
-
わたらせPC外観
-
県道227号線を東方向から西方向
-
県道227号線を西方向から東方向
-
わたらせPC玄関
こんな感じで応用編
ｏｌバージョン
-
わたらせPC外観
-
県道227号線を東方向から西方向
-
県道227号線を西方向から東方向
-
わたらせPC玄関
-
わたらせPC玄関
-
わたらせPC玄関
-
わたらせPC玄関
-
わたらせPC玄関
-
わたらせPC玄関
ボタンの素材集
桐生市、地元でしっかり作ってくれるホームページ制作会社をお探しなら
地元で15年以上の実績、集客できるホームページ制作わたらせPCスクエア
メールフォーム
Go to mailform
0277-46-3820
Call me!
