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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
回答ありがとうございます。 やはりHTMLとかですんなり解決できそうにはないですね。 タグで簡単に設定できたら便利だろうなぁと思って質問してみたのですが… CSSとかよく知らないのでこれから勉強してみます。 ありがとうございました！