携帯サイトの『ナノ』のノベル機能を使い、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ベストアンサー
- 回答日時:
それは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回連続でデザインを調節するとかは邪道であって、
HTMLを定義した人たちからすると、消し去りたい風習なんです。
なので、まぁ表示されなくても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はパズルのようなもので、
わからないなりにいじっていれば、いつかはマスターできる程度の難しさです。
現にサイトを作ったりして飯を食えるようになってますし。独学で。
真剣にやったことのない私は勉強しろよと強くは言えませんが、
今の努力なり研究なりを続けていれば必ず身になります。頑張って下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ライブドアブログのサイドバー...
-
FC2のテンプレで質問です。
-
HEAD・HTMLの行間改行が上手く...
-
Excel2007のデータ追跡機...
-
goo blogで下書きを保存して、...
-
ドリームウィーバーでの文字の...
-
Hotmailでテンプレートできます...
-
FC2ブログについて質問があるん...
-
テンプレート方法
-
Movable typeにてスタイルシー...
-
アメブロの更新通知メールで迷...
-
赤ちゃん誕生 お知らせポスト...
-
FC2ブログのプラグイン追加で、...
-
EXCEL2007のヘッダー・フ...
-
ブログの文字を大きくしたい
-
goo ブログの下書き保存方法
-
ソースの貼り付け方法
-
gooブログの文字サイズ
-
ocnテンプレートをgooで...
-
Powerpointの表のスタイルで好...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordpress カスタムフィールド...
-
ライブドアブログにおいて記事...
-
ブログのデザインがずれる原因
-
WordPressのヘッダー上部の余白
-
タグ
-
ブログの背景色について
-
CSS疑似フレーム内の文字色の指...
-
FC2ブログで横幅を広げタイトル...
-
FC2ブログ タイトルの文字を...
-
アメーバのブログ 画像の貼り付け
-
記事の見出しタイトル
-
FC2ブログ プロフィールイラス...
-
MovableTypeのサブカテゴリ字下...
-
アンドロイドで文字が左に偏る。
-
ブログ記事内に文章を左右2列に...
-
ロリポブログのcss:センターに...
-
ブログのメイン記事の幅を広げ...
-
MovableTypeでCSSにコメントを...
-
fc2ブログで記事とサイドバーに...
-
FC2ブログの右サイドバーが落ちた
おすすめ情報