[返信する]
スタイルシートで本文固定
By ゆゆ
2011-05-08 10:50:57
はじめまして、それらしいワードで検索してみましたがヒットしなかったので新しく書き込ませて貰います。
私はPCから見た際左右に空白ができるようスタイルシートを使っています。今はpxで指定しているのですが、これを空白のほうではなく中身(と表記していいのでしょうか、本文等が表示されるところです)の幅を指定できたらと思っています。
使用しているスタイルシートは以下のものです。
<Style Type="text/css">
<!--
@media screen
{ body {padding:100px 50px;}
-->
</style>
テーブルタグでの固定も考えたのですが、どこかで本来は表を作るものだからレイアウトに使うのは好ましくないとの話を聞きました。できればスタイルシートで解決したいと思っています。
どなたさまかお知恵をお貸し下さいますようお願いします。
pc
[編集]
By 匿名
2011-05-08 11:43:34
widthで検索してみてください。
pc
[編集]
By たすけあい
2011-05-08 11:46:38
まず、提示していただいたCSSの誤りからお知らせしますね。
<Style Type="text/css">
<!--
@media screen
{ body {padding:100px 50px;}
-->
</style>
に、} が足りないですから、正しくは以下です。
また、現在のブラウザでCSSを解釈しないブラウザは皆無ですから、HTMLでも<!--と-->は不要です。(ただし、ナノ様ではXHTML変換しない設定の場合は、docomoブラウザ1.0向けに必要になりますが)
<style type="text/css">
@media screen
{body{
padding:100px 50px;
}
}
</style>
と書きます。
CSSを拝見すると、PCに対してページ左右均等に余白(空白)を空け、固定サイズの横幅内に本文を表示したいのですね？

横幅を指定した内容に本文をというのは、「ボックス」と呼ぶので、以後の説明では「ボックス」と呼び説明しますね。
ご希望の表示を回答する前に、以下について知らせてください。
《1》pxでボックスの横幅を指定すると、同じインチの端末であっても解像度が異なる端末ではボックスの横幅の大きさも違ってきます。つまり同じ1pxでも見た目の大きさが違うということです。それでも構いませんか？
《2》閲覧する側のブラウザの横幅サイズは様々ですから、pxでボックスの横幅指定でしたら閲覧する側が観やすくなるように、ブラウザの横幅に応じてボックスのサイを出力できる方法がありますがいかがでしょうか？
ただし記述が長くなりますし、IEは最新バージョン以外は非対応です。
記述が長いソースを避けたいのでしたら、平均的なブラウザサイズとしての短いソース提示で回答します。

943SH
[編集]
By ゆゆ
2011-05-08 18:01:41
御回答ありがとうございます。

匿名さま
widthで検索してみました。まだ触りしか見ることができていませんが、これを使えばやりたいことができそうです。これからじっくり目を通してみます。ありがとうございました！

たすけあい様
CSSの訂正ありがとうございます。お恥ずかしながらCSSについての知識があまりないので、自力では不要部分不足部分に気付くことができなかったと思います。

《1》についてですが、pxで指定してもすべてのPCから同じサイズで見られるようにすることはできないのですね。しかし誤差がそこまでないのでしたらあまり気になりません。
《2》については、とても魅力を感じますがやはり最新バージョン以外が非対応なのが厳しいです。私のPCも古いものを使っておりますので…。

よろしければたすけあい様のおっしゃる短いソースをお教え頂きたいです。
よろしくお願いします。
pc
[編集]
By たすけあい
2011-05-09 07:08:26
※HEAD・HTML詳細設定内に以下を書きます。
ご希望のPC向けボックス固定幅です。
<meta http-equiv="content-style-type" content="text/css" />
<pc_only><style type="text/css">
body{
margin : 0;
padding : 0;
}
img{
margin : 0;
border : 0;
}
.container{
text-align : center;
}
.contents{
width : 700px;
margin-left : auto;
margin-right : auto;
box-align : center;

line-height : 1.4;
}
</style></pc_only>

※レイアウト内
<pc_only><div class="container"><div class="contents"></pc_only>本文<pc_only></div></div></pc_only>

※width : 700px;は、貴方の環境に合わせた数値にしてください。

※提示させていただいたのはPC向けに最小限の指定だけですから、他の携帯やスマートホン向けもご指定したいセレクタ･プロパティ・値がある場合は、振り分け独自タグで振り分けて好みで追記してくださいね。

※以下はご参考までにですが、よろしければ読んでください。
「誤差がさほどないなら」ですが、PX指定の場合、解像度が低いPCで表示可能な横幅を超えると、横スクロールしないとボックス全体が見れなくなりますし、逆に解像度の高いPCからだとボックスの左右に余白が空きすぎてしまいます。なので、それでもいいか確認をさせていただきました。

PCも携帯も解像度は様々ですから、PX指定の場合一つのソースで全ての端末に見やすくさせるのはスマートホンも含め不可能です。PXで横幅指定なら、やはりブラウザサイズに応じて振り分けるのが一番最適な方法ですし、非対応のIE9以下のバージョンにも別の対応策があります。

振り分けず一つのソースで全端末に対応をしたい場合は、リンクやタイトル文字以外の長い文字列を含むボックスなら横幅は80%のように可変にし、画面表示領域に対しての割合で指定したほうがどの環境にも横スクロール及びレイアウトを崩させないでボックス全体を見せることができます。
ただし、解像度が高い端末がブラウザサイズを大きくした場合横長のボックスになり、一行に並ぶ文字数は当然ながら違ってきます。ですが、PX指定の固定幅と違い縦と横にスクロールさせないと閲覧できないようなストレスはないです。

※一部編集しました。

943SH
[編集]
By ゆゆ
2011-05-09 17:46:21
たすけあい様、返信ありがとうございます。
教えて頂いたCSSを試してみましたところ、やりたかったことが無事にできました！
確認はまだ自分のPCからしかできておりませんが、後日知人のPC等からも確認してみてwidthの数値など細かい箇所を修正していきたいと思います。

解像度の違うPCからどう見えるか。私のPCから快適に閲覧することができても、ある方から見たら逆に不便になってしまうこともあるのですね(誤差はわずかなものだと思っておりましたがお話を聞く限りそうでもないようですね…！)
よく考えた上で使用したいと思います。

%での表示は考えたのですが、やはりたすけあい様もおっしゃるとおり ものによっては横長になってしまうのが少し引っかかってしまい違う方法を考えていました。

詳しく教えて頂きありがとうございました！
pc
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！