HEAD・HTMLの行間改行が上手くいかないです

質問

携帯サイトの『ナノ』のノベル機能を使い、HEAD内に下記の様に記入しました。
すると携帯では打った通りに打った通りに改行してくれたのですが、PCの方から見ると上手く改行をしてくれません。2回改行すると1行空くので、多分1回分をカウントしてくれていないのだと思われますが…。

PCに合わせると携帯画面では改行しすぎてしまうし、携帯画面で合わせるとPCではひどくキツキツになってしまいます。

HEADを弄るのは余り得意でないため、一体どこを直せば良いのかと頭を抱えています。
どこらへんが悪いに違いないというのも絞りきれないためにHEAD内に記入した物まるっと載せさせて頂きました。

不得意なまま色々と弄ったため、色々と必要ない物がくっついているかもしれませんが、
『どこを直せばPC画面と携帯画面で改行数が同じになるか』というのをお教えください。

※因みに、改行して欲しいと思った文そのものに<br>を入れても同じ結果になりました。

言葉足らずや用語を知らないために分かりにくい質問内容になっていたら申し訳ありません…。

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS"/>
<style type="text/css">

* {
font-family:Arial,Osaka,Verdana,Helvetica,sans-serif;}

body {
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-highlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-3dlight-color:#cccccc;
text-align: center;
<pc>font-size: 90%;
line-height: 1.7;</pc>
padding:5px;}

a:link,a:visited {
text-decoration:none;
border-bottom:dotted 1px #555555;}

a:hover {
text-decoration:none;
color:#bbbbbb;
border-bottom:dotted 1px #bbbbbb;}

a:active {
text-decoration:none;
border-bottom:dotted 1px #555555;}

input,textarea {
margin:2px;
padding:1px;
color:#111111;
background-color:#ffffff;
font-size:85%;
border:solid 1px #cccccc;}

select,option {
color:#555555;
background-color:#ffffff;
font-size:85%;}

img {
border:0;}

/*1番目のbox*/
.all {<pc>
width: 690px;</pc>
margin: 0 auto;
padding: 5px;
text-align: left;
border:solid 1px #dddddd;
background-image:url('#mtr●_url#');
/*●の部分に素材番号を入れると敷き詰めの背景になります*/
background-repeat:repeat;
background-position:right top;}

/*2番目のbox*/
.header {
<pc>
width:700px;</pc>
margin: 0 auto;
padding:0px;
<pc>line-height: 1.2;</pc>
letter-spacing:3px;
font-size:150%;
font-family:'Century Gothic',sans-serif;}

.content {
<pc>
width:690px;</pc>
margin: 0 ;
<pc>line-height: 1.2%;</pc>
font-size:80%;
padding-top:0px;
padding-bottom:0px;}

.footer {
<pc>
width: 690px;
clear:both;</pc>
margin: 0 auto;
padding:3px;
<pc>line-height: 1.2%;</pc>
letter-spacing:3px;
text-align:right;
font-size:70%;}

/*3番目の枠(幅を設定しないこと)*/
.menu {
border-top:solid 1px #dddddd;
border-bottom:solid 1px #dddddd;
<pc>
height:1.2em;</pc>
text-align:center;
margin-bottom:20px;
background-color:#ffffff;}

.menu a:link,.menu a:visited{
<pc>
display:block;
line-height:1.2em;
text-align:center;
float:left;
</pc>
border:none;
color:#333333;
letter-spacing: 2px;
padding-left: 15px;
padding-right: 15px;}

.menu a:hover {
<pc>
display:block;
line-height:1.2em;
text-align:center;
float:left;
</pc>
border:none;
color:#ffffff;
letter-spacing: 2px;
background-color: #dddddd;
padding-left: 15px;
padding-right: 15px;}

.main{
margin: 0 auto;
padding:0px;
<pc>line-height: 1.2; </pc>
letter-spacing:1px;
/*以下三行(}は除く)背景の色が濃いとき用の白のフィルター背景です。いらない場合は消してください*/
background-image:url('#tmpImg11174-11_url#');
background-repeat:repeat;
background-position:right top;}

/*特殊*/
.f1{
<pc>
width:150px;
float:left;</pc>}

.clear{
<pc>
clear:both;</pc>}

/*場所関係なし(好みで増減)*/
.text {margin:1px;
padding: 0px;
font-size: 100%;
font-weight:normal;
font-style:normal;}

.box1{
padding:5px;
margin:5px;
border:solid 1px #ffffff;}

.uline {
border-bottom:solid 1px #dddddd;}

.midashi1{
letter-spacing:3px;}

.midashi2{
font-weight:bold;}

.midashi3{
font-size:120%;}

.big {
font-size:120%;}

.small{
font-size:70%;}

</style>

回答No.1

einn · ベストアンサー

それはCSSと呼ばれる記述で、
HTMLの装飾、デザインをつかさどる部分になります。

CSSにはクラスとIDというものがあり、
例えば、あなたが貼ってくれたCSSを見る限り、
.smallというクラスには、font-size 70%が適用されてます。
クラス名には使用禁止文字はあっても名前に決まりはなく、
好きな名前がつけられます。.unkoとかでもいいわけです。

クラスは何回でも利用することができますから、
文中で数箇所ばらばらに文字を小さく表現したい時、
その文章をHTMLのdivで囲み、.smallを適用することで
囲んだ範囲だけフォントサイズが小さくなるわけです。
（例→おはよう<div class="small">ございます。</div>）

IDは1ページあたり1回しか原則的に利用しないもので、
使い方のかんじは大体クラスと一緒です。

ちなみに、使いどころは難しいですが、
ページ上のすべてのaに1つのクラスを一気に適用だとか、
そういう使い方もできます。a:link,a:visitedってところがそうですね。

で、ここまでがCSSの概要説明。本題はここから。

通常、行間はline-heightで行います。
普通は1ページあたり、1回くらいしか使いません。
ただ、箇所ごとにデザインを変えたい場合、複数利用します。

いくつかのクラスで、それぞれline-heightの設定がありますよね？
これは、おそらくwebサイトのエリアをいくつかdivかtableで区切っていて、
そのエリアごとにline-heightを設定しているのだと推測します。

でも、line-heightはあくまでも行間の設定です。
あなたがおっしゃっているのは、BRの連続が認識されないことですよね。
これって、ブラウザやそのバージョンによっては仕様なんですよ。
そうです。今回貼って頂いたCSSとは無関係の問題なんですよ。

いや、厳密に言えば、一部で使われているletter-spacingが関連してます。
ですが、このあたりの説明はしても理解に苦しむかと思いますので省きます。
letter-spacingを徹底的に排除すれば多分解決すると思うんですが、
そうするとレイアウトが崩れますからお勧めしません。だから消しちゃダメ。

そもそも、brを2回連続でデザインを調節するとかは邪道であって、
ＨＴＭＬを定義した人たちからすると、消し去りたい風習なんです。

なので、まぁ表示されなくてもCSSをもっと勉強して頑張れ！
divをうまく使えるようになったら、そもそもbrを2回使おうとか考えないぞ！
っていうか1行あけたいなら、brじゃなくてp使えば解決するんじゃねーか、
というのが正直な感想だったりします。

でも、どうしてもBR2回連続をごり押ししたい！
とおっしゃるかもしれませんので、そのやり方も書いておきますね。

html上で<br><br>となっているところを、以下に直して下さい。

<br style="letter-spacing: normal><br style="letter-spacing: normal>

こうすれば、大体のブラウザではきちんと2回連続で反映されます。
今のサイトのデザインは一切崩れませんしね。
本当は貼ってもらったCSSの下部に足したり、
そもそもを外部CSSにしたりしたほうがスッキリするんですけども。
このほうが簡単だと思いますので、これでどうぞ。

もしこれで出来ないなら、私はちょっとわかりかねます。
場合によって、サーバー側で勝手に改変して出力することもありますし、
（無料スペース、なかでも携帯サイトの無料スペースではあること）

私もそうでしたが、HTMLやCSSはパズルのようなもので、
わからないなりにいじっていれば、いつかはマスターできる程度の難しさです。
現にサイトを作ったりして飯を食えるようになってますし。独学で。
真剣にやったことのない私は勉強しろよと強くは言えませんが、
今の努力なり研究なりを続けていれば必ず身になります。頑張って下さい。

お礼

お早いお答えありがとうございました！
仰ったように改善してみた所、直りました…！

本当にありがとうございます！