自分で組み立てるテンプレート

見出し用パーツ

title-titleset1

h2とh3の見出しセットです。

html

/*h2タグ
---------------------------------------------------------------------------*/
#contents h2.titleset1-parts {
	font-size: 1.3rem;		/*文字サイズ。bodyで設定しているfont-sizeに対して1.3倍。*/
	padding: 0.4rem 1rem;	/*h2内の余白。上下、左右への順番。*/
	border-radius: 3px;		/*角を少しだけ丸くする指定。不要ならこの１行を削除します。*/
	background: #eee;		/*背景色*/
	color: #555;			/*文字色*/
}

/*左のアクセントラインの設定。不要ならブロックごと削除して下さい。*/
#contents h2.titleset1-parts::before {
	content: "";
	border-left: 0.3rem solid #999;		/*テキスト左側のアクセントラインの幅、線種、色*/
	padding-right: 1rem;				/*アクセントラインと、テキストとの間の余白*/
}

/*h3タグ
---------------------------------------------------------------------------*/
#contents h3.titleset1-parts {
	font-size: 1.2rem;		/*文字サイズ。bodyで設定しているfont-sizeに対して1.2倍。*/
	padding: 0.4rem 1rem;	/*h2内の余白。上下、左右への順番。*/
	border-radius: 3px;		/*角を少しだけ丸くする指定。不要ならこの１行を削除します。*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*左のアクセントラインの設定。不要ならブロックごと削除して下さい。*/
#contents h3.titleset1-parts::before {
	content: "";
	border-left: 0.3rem solid #999;		/*テキスト左側のアクセントラインの幅、線種、色*/
	padding-right: 1rem;				/*アクセントラインと、テキストとの間の余白*/
}

css

title-titleset2

h2とh3の見出しセットです。

html

css

title-titleset3

縦書きの見出しです。縦書き見出しの下に、装飾用の横書きを使う事もできます。

<p>縦書きを使いたい場合は、必ず外側に１個「titleset3-bg-parts」というclassのついたボックスを作って下さい。<br>
その中にh2などの見出しを作り、さらにその中に「titleset3-tate-parts」というclassのついたボックスを作ります。<br>
完全に縦書きしか使わないのであればもう少しシンプルにできたのですが、横書きの英語表記も使っている為、少しボックスが増えました。</p>

<div class="titleset3-bg-parts">
<h2><div class="titleset3-tate-parts">縦書き</div><div class="titleset3-yoko-parts">Yokogaki</div></h2>
</div>

<p>というわけで、その横書きも含めたサンプルがこちらです。<br>
最初の縦書きのみのタグに横書きのブロックを追加しただけです。</p>

<div class="titleset3-bg-parts titleset3-bg1">
<h2 class="mb0"><div class="titleset3-tate-parts">縦書き</div><div class="titleset3-yoko-parts">Yokogaki</div></h2>
</div>

<p>背景画像のついたタイプです。<br>
見出しの外にあるdivタグのclassに「titleset3-bg1」を追加するとこのようになります。背景画像を変更したい場合は、cssフォルダのstyle.css内から「titleset3-bg1」をテキスト検索して下さい。<br>
別の見出しで他の背景を使いたい場合は、cssから既存の「titleset3-bg1」ブロックをコピペし、「titleset3-bg2」などに変更し、背景画像を設定しなおせばOKです。html側のclassも変更して下さい。</p>
<p>あと、h2のマージンで余分な空間ができるのを防ぐ為にmb0というclassも追加しました。</p>

</section>

html

css

title-titleset4

h2とh3の見出しセットです。角丸。

html

css

title-titleset5

h2とh3の見出しセットです。

html

/*h2タグ
---------------------------------------------------------------------------*/
#contents h2.titleset5-parts {
	font-size: 2rem;		/*文字サイズ。2倍。*/
	text-align: center;
	position: relative;
	letter-spacing: 0.1em;	/*文字間隔を少し広くする*/
	padding-top: 1rem;		/*ここを調整すると、見出しテキストとボーダーの間の余白を調整できます。お好みで。*/
}

/*小文字（kazari title）*/
#contents h2.titleset5-parts span {
	display: block;
	font-weight: normal;
	font-size: 0.5em;		/*文字サイズ。見出しの50%*/
	opacity: 0.5;			/*透明度。色を50%だけ出す。*/
}

/*見出し上のボーダー*/
#contents h2.titleset5-parts::before {
	content: "";
	position: absolute;
	height: 3px;	/*ボーダーの高さ*/
	width: 50px;	/*ボーダーの幅。変更する際は、下のleftの行も変更します。*/
	left: calc(50% - 25px);	/*左からの配置場所。ここの25px部分は、上のwidthの半分。*/
	top: 0px;
	background: #ccc;	/*線の色*/
}

/*h3タグ
---------------------------------------------------------------------------*/
#contents h3.titleset5-parts {
	font-size: 1.6rem;		/*文字サイズ。1.6倍。*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする*/
	padding-left: 1rem;		/*左に空ける余白*/
	padding-right: 1rem;	/*右に空ける余白*/
}

/*小文字（kazari title）*/
#contents h3.titleset5-parts span {
	display: block;
	font-weight: normal;
	font-size: 0.5em;		/*文字サイズ。見出しの50%*/
	opacity: 0.5;			/*透明度。色を50%だけ出す。*/
}

css

見出し用パーツ

title-titleset1

title-titleset2

title-titleset3

title-titleset4

title-titleset5

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

見出し用パーツ

title-titleset1

title-titleset2

title-titleset3

title-titleset4

title-titleset5

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート