ぱそこん生活感。／メモ

　管理人はHTMLのpreタグが気に入っています。でも、preの中で文字を大きくしたいなと思うことがあります。そこで今回、CSSをいじってみました。
　

・通常の場合(pre)

文章データ→MyＳＱＬ
サイトの構築（HTMLタグ）→ＰＨＰ（Ｈｙｐｅｒｔｅｘｔ　Ｐｒｅｐｒｏｃｅｓｓｏｒ）
HTTP Server→Apache
ブログソフト→Wordpress

・pre＋タグで文字を大きくした場合

文章データ→MyＳＱＬ
サイトの構築（HTMLタグ）→ＰＨＰ（Ｈｙｐｅｒｔｅｘｔ　Ｐｒｅｐｒｏｃｅｓｓｏｒ）
HTTP Server→Apache
ブログソフト→Wordpress

　
　これは従来のpre同様の挙動をします（はみ出る部分はスクロールする）。ソースは下のようになります。

<pre class="c-big">
文章データ→MyＳＱＬ
サイトの構築（HTMLタグ）→ＰＨＰ（Ｈｙｐｅｒｔｅｘｔ　Ｐｒｅｐｒｏｃｅｓｓｏｒ）
HTTP Server→Apache
ブログソフト→Wordpress
</pre>

　
　スタイルシートは↓です。

#honbun pre.c-big{
    font-family: "ＭＳ Ｐゴシック", "AR P丸ゴシック体M", Osaka, Verdana, Arial, sans-serif;
    font-size: 120%;
}

・新規にタグを作って文字を大きくした場合

　
　こちらは、はみでる部分は自動で折り返します。ソースは↓です。

<div class="s-big">
文章データ→MyＳＱＬ
サイトの構築（HTMLタグ）→ＰＨＰ（Ｈｙｐｅｒｔｅｘｔ　Ｐｒｅｐｒｏｃｅｓｓｏｒ）
HTTP Server→Apache
ブログソフト→Wordpress
</div>

　
　スタイルシートは↓です。

.s-big {
    font-family: "ＭＳ Ｐゴシック", "AR P丸ゴシック体M", Osaka, Verdana, Arial, sans-serif;
    font-size: 120%;
    margin: 10px 10px;
    padding: 5px;
    border: thin solid dimgray;
}

　
　今後、場面によって両方使い分けるようにしようと思います。