パーツリスト

hタグ(見出し)

<h2></h2>

h2:あああああああああ

<h3></h3>

h3:いいいいいいいいい

<h4></h4>

h4:ううううううううう

<h5></h5>
h5:えええええええええ

pタグ(段落)

<p></p>

文章のブロック(段落)ごとにpタグで囲います。文章のブロック(段落)ごとにpタグで囲います。文章のブロック(段落)ごとにpタグで囲います。文章のブロック(段落)ごとにpタグで囲います。

2個目のブロック(段落)なので、改めてpタグで囲っています。2個目のブロック(段落)なので、改めてpタグで囲っています。2個目のブロック(段落)なので、改めてpタグで囲っています。2個目のブロック(段落)なので、改めてpタグで囲っています。2個目のブロック(段落)なので、改めてpタグで囲っています。

brタグ(改行)

<br>

編集画面で改行していてもタグを書かないと改行されません。

編集画面でタグを書くと
改行されます。

編集画面でタグを書かずに改行しても 改行されません。

太字

<b>文字が太くなります。</b>

文字が太くなります。

赤字

<span class="big-red">文字が太くて色が赤くなります。</span>

文字が太くて色が赤くなります。

キャプション(説明書き)

<p><span class="small">文字が小さくなります。</span></p>

文字が小さくなります。

オレンジ色のアンダーバー

<span class="big-orange">文字が太くなってオレンジ色の下線が入ります。</span>

文字が太くなってオレンジ色の下線が入ります。

リンク

<a href="リンク先のURL" title="リンクのタイトル">テキストリンク~</a>

テキストリンクです。リンク先のページが表示されます。

別タブで開くリンク

<a href="リンク先のURL" title="リンクのタイトル" rel="noopener" target="_blank">テキストリンク~</a>

テキストリンクです。リンク先のページが別タブで表示されます。

電話リンク

<a href="tel:ハイフン無しの電話番号" title="連絡先の名前">電話番号</a>

電話番号

BOX2

<div class="sng-box box2">グレーの枠線BOX</div>
グレーの枠線BOX

BOX3

<div class="sng-box box3">青色背景BOX</div>
青色背景BOX

BOX8

<div class="sng-box box8">黄色背景BOX</div>
黄色背景BOX

BOX34

<div class="sng-box box34">赤色背景BOX</div>
赤色背景BOX

BOX35

<div class="sng-box box35">緑色背景BOX</div>
緑色背景BOX

青文字タイトルと青の枠線BOX

<div class="sng-box box26">
	<div class="box-title">青文字タイトル</div>
	テキストテキストテキストテキストテキストテキストテキストテキスト
</div>
青文字タイトル
テキストテキストテキストテキストテキストテキストテキストテキスト

注意事項BOX

<div class="memo alert">
	<div class="memo_ttl dfont">注意事項タイトル</div>
	テキストテキストテキストテキストテキストテキストテキストテキスト
</div>
注意事項タイトル
テキストテキストテキストテキストテキストテキストテキストテキスト

チェック項目BOX

<div class="memo">
	<div class="memo_ttl dfont">チェック項目タイトル</div>
	テキストテキストテキストテキストテキストテキストテキストテキスト
</div>
チェック項目タイトル
テキストテキストテキストテキストテキストテキストテキストテキスト

関連記事(見積ガイド内)のバナー

<a class="linkto table" href="関連記事のURL" title="関連記事のタイトル">
	<span class="tbcell tbimg"><img src="画像のURL" alt="画像の説明"></span>
	<span class="tbcell tbtext">関連記事のタイトル</span>
</a>
解体現場の写真 家の解体工事の料金相場、費用を削減するための方法と注意点

参考記事(外部サイト)のバナー

<a class="reference table" href="リンク先のURL" title="リンク先のタイトル" target="_blank" rel="noopener noreferrer">
	<span class="tbcell refttl">参考</span>
	<span class="tbcell refcite">リンク先のタイトル
		<span>リンク先のサブタイトル</span>
	</span>
</a>
参考 経営ハッカー「経営 × テクノロジー」の最先端を切り拓くメディア

チェックマークの箇条書き

<div class="li-check li-mainbdr main-c-before">
	<ul>
		<li>1つ目のテキスト1つ目のテキスト</li>
		<li>2つ目のテキスト2つ目のテキスト</li>
	</ul>
</div>
  • 1つ目のテキスト1つ目のテキスト
  • 2つ目のテキスト2つ目のテキスト

番号の箇条書き

<div class="li-counter li-mainbdr main-c-before">
	<ol class="c-list-counter">
		<li class="c-list-counter__item">
			<span class="c-list-counter__txt">1つ目のテキスト1つ目のテキスト</span>
		</li>
		<li class="c-list-counter__item">
			<span class="c-list-counter__txt">2つ目のテキスト2つ目のテキスト</span>
		</li>
	</ol>
</div>
  1. 1つ目のテキスト1つ目のテキスト
  2. 2つ目のテキスト2つ目のテキスト

青枠の箇条書き

<div class="li-chevron li-mainbdr main-c-before">
	<ul>
		<li>1つ目のテキスト1つ目のテキスト</li>
		<li>2つ目のテキスト2つ目のテキスト</li>
	</ul>
</div>
  • 1つ目のテキスト1つ目のテキスト
  • 2つ目のテキスト2つ目のテキスト

引用

<blockquote>
	<p>引用テキスト引用テキスト引用テキスト</p>
	<p><span class="small">
		引用:<a href="引用元のURL" title="引用元のタイトル" target="_blank" rel="noopener">引用元のタイトル</a>
	</span></p>
</blockquote>

新築します。
今度「プレカットの図面」を見せてもらうことになりました。
とは言え、素人の私が見て何がわかるのだろう……と思います。

どんなことを気を付けて見たら良いでしょうか。
ポイントなどを教えて下さい。

引用:プレカットの図面 | 教えて!goo

アイキャッチ画像

ペイント、Adobe Illustrator、Adobe Photoshopを使用
width700px、height500pxに揃える

<img src="画像のURL" alt="画像の説明">

アイキャッチ画像のサンプル

画像

ペイント、Adobe Illustrator、Adobe Photoshopを使用
width700pxに揃える

<img src="画像のURL" alt="画像の説明">

画像のサンプル

画像2カラム(スマホでも2カラム表示)

<div class="shtb2 tbrsp">
	<div class="cell">
		<img src="画像(左側)のURL" alt="画像(左側)の説明">
	</div>
	<div class="cell">
		<img src="画像(右側)のURL" alt="画像(右側)の説明">
	</div>
</div>
画像のサンプル
画像のサンプル

画像の横にテキスト

<div class="parent_box">
<figure class="side_image">
<img src="画像(左側)のURL" alt="画像の説明" width="" height="" ></figure>
<p class="side_text">テキスト1テキスト1テキスト1</p>
</div>

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

画像3カラム(スマホは縦に3つ並ぶ)

<div class="shtb3 tbrsp">
	<div class="cell">
		<img src="画像(左側)のURL" alt="画像(左側)の説明">
	</div>
	<div class="cell">
		<img src="画像(真ん中)のURL" alt="画像(真ん中)の説明">
	</div>
	<div class="cell">
		<img src="画像(右側)のURL" alt="画像(右側)の説明">
	</div>
</div>
画像のサンプル
画像のサンプル
画像のサンプル

表(スマホではスライド表示)

<table class="c-table-blog-responsive">
	<tbody>
		<tr>
			<th>見出しセル</th>
			<td>テキスト1テキスト1テキスト1</td>
		</tr>
		<tr>
			<th>見出しセル</th>
			<td>テキスト2テキスト2テキスト2</td>
		</tr>
		<tr>
			<th>見出しセル</th>
			<td>テキスト3テキスト3テキスト3</td>
		</tr>
	</tbody>
</table>
見出しセル テキスト1テキスト1テキスト1
見出しセル テキスト2テキスト2テキスト2
見出しセル テキスト3テキスト3テキスト3
見出しセル テキスト3テキスト3テキスト3

評価付きの表

<table class="c-table-blog-5">
	<tbody>
		<tr>
			<th class="c-ta-center">チェック項目</th>
			<td class="attention-head"><span class="conflict">列タイトル1</span></td>
			<td><span class="conflict">列タイトル2</span></td>
		</tr>
		<tr>
			<th>評価項目タイトル1</th>
			<td class="attention-body c-circle">丸パターン、テキスト1</td>
			<td class="c-triangle">三角パターン、テキスト2</td>
		</tr>
		<tr>
			<th>評価項目タイトル2</th>
			<td class="attention-body c-circle">丸パターン、テキスト3</td>
			<td class="c-triangle">三角パターン、テキスト4</td>
		</tr>
		<tr>
			<th>評価項目タイトル3</th>
			<td class="attention-foot c-circle">丸パターン、テキスト5</td>
			<td class="c-cross">バツパターン、テキスト6</td>
		</tr>
	</tbody>
</table>
比較項目タイトル 列タイトル1 列タイトル2
比較タイトル1 丸パターン、テキスト1 三角パターン、テキスト2
比較タイトル2 丸パターン、テキスト3 三角パターン、テキスト4
比較タイトル3 丸パターン、テキスト5 バツパターン、テキスト6

アコーディオン

<div class="accordion main_c">
	<input type="checkbox" id="label1" class="accordion_input">
	<label for="label1">アコーディオンのタイトル</label>
	<div class="accordion_content">
		<p>アコーディオンで表示されるテキストです。</p>
		<p>1ページに2つのアコーディオンボタンを設置する場合は<br>
		id とlabel for の中の数字を変更する。<br>
		例:label1、label2、label3など</p>
	</div>
</div>

アコーディオンで表示されるテキストです。

1ページに複数のアコーディオンボタンを設置する場合は
id とlabel for の中の数字を変更する。
例:label1、label2、label3など

吹き出し

アイコンに使用する人の画像サイズは【 width150px × height150px 】に揃える

市川

<div class="say left">
	<p class="faceicon">
		<img src="画像のURL" alt="画像の説明">
		<span>名前</span>
	</p>
	<div class="chatting">
		<div class="sc">ここに文章を入力します。しゃべり言葉でOKです。</div>
	</div>
</div>

市川 名前

ここに文章を入力します。しゃべり言葉でOKです。

見積ガイドLPに飛ぶバナー

<div class="center c-bottomblank">
	<a href="https://konoie.kaitai-guide.net/lp/kaitai/"  title="解体無料見積ガイド" target="_blank" rel="noopener" class="c-btn-l-2 c-btn--center">
		<span class="c-btn-l-2__txt-1">(社)あんしん解体業者認定協会運営</span>
		<span class="c-btn-l-2__txt-2">比べてあんしん最安値<br class="pc-hide">
		「解体無料見積ガイド」を詳しくみる</span>
	</a>
</div>

見積ガイドLPに飛ぶバナー(電話番号あり)

<div class="sng-box c-box29">
	<div class="box-title">
		<img src="[tempd]/images/blog/logo_association.png" alt="あんしん解体業者認定協会">
	</div>
	<div class="mc-plus-btn2 pconly">
		<a href="tel:0120978952" class="c-tel" title="あんしん解体業者認定協会に電話する">
			<img src="[tempd]/images/blog/img_tel_03.png" alt="電話で相談する" class="sp-hide">
			<img src="[tempd]/images/blog/sp/img_tel_03.png" alt="電話で相談する" class="pc-hide">
		</a>
		<p class="mc-btn2">
			<a href="https://konoie.kaitai-guide.net/lp/kaitai/" title="解体無料見積ガイド" rel="noopener" target="_blank" class="c-btn-l-2">
				<span class="c-btn-l-2__txt-1">24時間以内に返信します</span>
				<span class="c-btn-l-2__txt-2">Web無料相談をする</span>
			</a>
		</p>
	</div>
</div>

費用まとめで使用する2カラムのバナー

<div class="sng-box c-box31 mgt-pc--0 mgt-sp--0">
	<div class="mc-plus-btn3 pconly">
		<p class="mc-btn3">
			<a href="https://konoie.kaitai-guide.net/lp/kaitai/" title="解体無料見積ガイド" rel="noopener" target="_blank" class="c-btn-l-2">
				<span class="c-btn-l-2__txt-1">無料で6社から</span>
				<span class="c-btn-l-2__txt-2">今すぐ見積りを取得</span>
			</a>
		</p>
		<p class="mc-btn4">
			<a href="https://www.kaitai-guide.net/cost/" title="解体工事実績・事例紹介" rel="noopener" target="_blank" class="c-btn-l-3">
				<span class="c-btn-l-3__txt-1">地域別に</span>
				<span class="c-btn-l-3__txt-2">解体費用の実例を確認</span>
			</a>
		</p>
	</div>
</div>

当協会の運営サイト「コノイエ」は、工務店・ハウスビルダー・建築家・建築設計事務所等の500以上のインタビュー記事を掲載。また、新築・建て替えを検討中のユーザーにとって有益となる情報を発信しています。
当協会は、建て替えに伴うお住まいの取り壊しのご相談を年間で2,500件ほど承っており、各地域の住宅関連会社の情報が集まります。今後も「コノイエ」では、新築ユーザー様の発注先や評価、住宅関連会社様への独自インタビューといった当協会ならではの独自のリアルな情報をお届けします。

新築・建て替え時の
解体費用ぐっと安く
6社無料一括見積り

解体工事をぐっと安く無料で6社見積比較!

電話で無料相談(フリーダイヤル)

0120-978-124

お電話の受付時間 8~20時(土日祝も対応)