WEBページを作る時に、タグによるブロック構成や、コンテンツの段落などを考えながらCSS記述を行うと思いますが、
今作っているブログシステムのコンテンツ部分をtextareaに登録した文字列を繁栄して行いたいので、どうすれば実現できるかをCSSで解決してみたいと思います。
今までの使えないシステム
ここで考えたいのは、今までのCMSなどでの仕様を知っておく必要があります。
よくある、スクラッチ開発をした入力テキストをそのままWEB表示する場合に、改行コードをそのままBRタグに変換するという方法でした。
文字列の段落構成に関しては、改行がそのまま段落になるので、基本的には問題ないのですが、TABLEタグなどを利用し、TRタグなどで改行を使うと、意図しない場所にBRタグが挿入されて、表示されたWEBページが、変な段落落ちしている感じになってしまいます。
これに対しての対策は、開発会社から「改行をいれないでください」というだけで、非常に使いづらいシステムとなってしまいました。
こうした不具合とも思えるWEBページの仕様を解決したいのが今回の考え方です。
今回の解決方法
もちろん、前述したBRタグに変換するという仕様は、却下です。
そこで今回は、対象になるコンテンツ部分にCSSを定義します。
.contents{
white-space: pre-wrap;
}
こうすることで、どんなタグでも、PREタグと同じように、書かれている内容は、改行やタブなどのインデントをあわせてくれる表示方法に切り替わります。
ちょっと試してみましょう。
まずは、お試しソースコードは下記の通りです。
<style>
.pre2{
white-space:pre-wrap;
}
</style>
<div class="pre1">
あいうえお
かきくけこ
</div>
<div class="pre2">
あいうえお
かきくけこ
</div>
表示デモ
いかがでしょうか？なんとなくやりたい事がわかってもらえましたか？
課題
今回事を考慮して、以下のようなテキスト文を作ってみました。
<h2>h2:test</h2>
<h3>h3:test</h3>
<h4>h4:test</h4>
<h5>h5:test</h5>
<h6>h6:test</h6>
<table>
<tr>
<th>cell-1</th>
<th>cell-2</th>
</tr>
<tr>
<td>cell-3</td>
<td>cell-4</td>
</tr>
</table>
<ul>
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul>
<ol>
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ol>
<dl>
<dt>dt-1</dt>
<dd>dd-1</dd>
</dl>
<pre>
## test
$ rsync -avP hoge.jpg test/
</pre>
<hr>
<p>p</p>
<blockquote>blockquote</blockquote>
<strong>strong</strong>
これをそのまま表示すると、
こんな感じです。
改行が多くされている事に気が付きます。
なんだかテキストで書いた時のレンダリング印象と違いますね。
これは、テキスト内に記述した各種のタグが、display:block;要素で有るために発生しているようです。
これが解決できると、かなり実現性の高い方法だと思うので、これを突き詰めようと思います。
調整ポイント
レンダリング表示された結果を見て、以下のような調整ポイントを目標値にしました。
1. display:blockタグに対しての調整
2. 文字サイズの整え
3. リストタグとテーブルタグ
display:blockタグに対しての調整
.contents h2,
.contents h3,
.contents h4,
.contents h5,
.contents h6{
margin:0;
line-height:40px;
display:inline-block;
}
.contents ul,
.contents ol,
.contents dl{
font-size:20px;
margin:0;
margin-left:1em;
padding:0 !important;
white-space: normal;
display:inline-block;
}
表示しながら調整すると分かりやすいのですが、要するに「white-space: normal;」と「display:inline-block;」を入れていくのがポイントのようです。
文字サイズの整え
.contents{
font-size:20px;
line-height:30px !important;
}
この対応は比較的簡単ですが、line-heightは好みの問題もあるので、お好きな行幅で調整しましょう。
ただし、一部の特殊なタグについては、font-sizeなどは、個別に記述しなくてはいけません。
リストタグとテーブルタグ
.contents table{
border-collspan:colspan;
font-size:20px;
margin:0;
padding:0;
}
.contents table th{
border:1px solid #AAA;
background-color:#EEE;
padding:4px;
}
.contents table td{
border:1px solid #AAA;
padding:4px;
}
.contents li,
.contents dt,
.contents dd{
margin:0;
padding:0;
}
tableタグに対しては、cell毎にborderをつけたり、marginとpaddingを調整するのは一般的ですね。
最終的に出来上がったCSSソースコード
今回出来上がったソースコードを載せておきます。
.contents{
/* Mozilla */
white-space: -moz-pre-wrap;
/* Opera 4-6 */
white-space: -pre-wrap;
/* Opera 7 */
white-space: -o-pre-wrap;
/* CSS3 */
white-space: pre-wrap;
/* IE 5.5+ */
word-wrap: break-word;
}
.contents img{
max-width:100%;
}
.contents{
font-size:20px;
line-height:30px !important;
}
.contents h1{
font-size:50px;
}
.contents h2{
font-size:40px;
}
.contents h3{
font-size:32px;
}
.contents h4{
font-size:24px;
}
.contents h5{
font-size:18px;
}
.contents h6{
font-size:14px;
}
.contents h2,
.contents h3,
.contents h4,
.contents h5,
.contents h6{
margin:0;
line-height:40px;
display:inline-block;
}
.contents table{
border-collspan:colspan;
font-size:20px;
margin:0;
padding:0;
}
.contents table th{
border:1px solid #AAA;
background-color:#EEE;
padding:4px;
}
.contents table td{
border:1px solid #AAA;
padding:4px;
}
.contents ul,
.contents ol,
.contents dl{
font-size:20px;
margin:0;
margin-left:1em;
padding:0 !important;
white-space: normal;
display:inline-block;
}
.contents li,
.contents dt,
.contents dd{
margin:0;
padding:0;
}
.contents br{
margin:0;
padding:0;
font-size:0;
line-height:0;
}
.contents blockquote,
.contents p,
.contents strong{
display:inline;
line-height:40px;
}
hr{
height: 1px;
background-color:#AAA;
margin:0;
padding:0;
}
pre{
display:inline-block;
width:100%;
}
そして、これのレンダリング結果は以下の通りです。
いかがでしょうか？tableタグの装飾の問題というよりは、各要素の行間が気にならない程度になれば大成功です。
ソースコードを実際に書いてみるとわかりますが、かなり直感的に記述ができると思います。
ちなみに、wordpressで変換される場合、保存時にタグの種別を判別されて、段落ごとにPタグを付けられてしまうようです。
ごくまれにですが、意図しない表示になり、ソースコードを書くのに戸惑う時があるので、今回の方法を用いて、四苦八苦する手間を省けるようになると、かなり効果大ですね。
今回対象にしたタグ一覧
.contentsクラス名の内部に記述されたテキストが全て対象。
IMG
H1〜H6
TABLE系（tr , th , td)
LIST系（UL , OL , DD） + (LI , DT , DD)
BLOCKQUOTE
P
STRONG
PRE
BR
HR
ブログを書いている人であれば、大体こんな感じで問題ないでしょう。
あとはAタグとか特殊なembedぐらいが網羅されると完璧に近いですね。
とりあえず、このソースを駆使して業務効率アップと、コンテンツページの作成作業に励みたいと思います。
