執筆者向けブログ編集方法リファレンス

装飾用クラス

装飾用クラス

クラスを利用した装飾について

HTMLタグにクラスを指定することによりより見やすい文章にすることができます。

通知

単一行の通知

文章がはいります。

<p class="alert">文章がはいります。</p>

複数行の通知

文章がはいります。

文章がはいります。

文章がはいります。

<div class="alert">
	<p>文章がはいります。</p>
	<p>文章がはいります。</p>
	<p>文章がはいります。</p>
</div>

行揃えの指定

左寄せ

中央寄せ

右寄せ

<p class="alignleft">左寄せ</p>
<p class="aligncenter">中央寄せ</p>
<p class="alignright">右寄せ</p>

タグやキーワードの強調

文字を強調するには強調タグstrongタグを利用する方法もありますが、ソースコード中のある変数名等を強調したい場合に利用できるのが以下のクラス指定です。

<span class="tt">strong</span>

回り込みの解除

以下のように、回り込みを解除しないと、下の段落に重なってしまうことがあります。
これを解除するのが「.clear」クラスです。回り込み要素がある親要素に指定します。

失敗例

Android

文章がはいります。

文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。

成功例

Android

文章がはいります。

文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。

参考ソースコード

<div class="clear">
	<p>
		<img src="https://cdn-ssl-devio-img.classmethod.jp/wp-content/uploads/2011/11/Android.png" alt="Android" width="150" height="75" class="alignleft size-full wp-image-12011" />
	</p>
	<p>文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。</p>
</div>
<p class="alert">文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。文章がはいります。</p>

分割カラム

最大5つまでのカラムに分割することができます。

2カラム

<div class="float_box col2">
	<div class="col">
		<p>text</p>
	</div>
	
	<div class="col">
		<p>text</p>
	</div>
</div>

text

		aaaaaaa
		

3カラム

<div class="float_box col3">
	<div class="col">
		<p>text</p>
	</div>
	
	<div class="col">
		<p>text</p>
	</div>
	
	<div class="col">
		<p>text3</p>
	</div>
</div>

text

		aaaaaaa
		

text3

4カラム

<div class="float_box col4">
	<div class="col">
		<p>text</p>
	</div>
	
	<div class="col">
		<p>text</p>
	</div>
	
	<div class="col">
		<p>text3</p>
	</div>
	
	<div class="col">
		<p>text</p>
	</div>
</div>

text

		aaaaaaa
		

text3

		aaaaaaa