タグ・デザイン掲示板

[

小説とページの端末別レイアウトについて
by 質問者

2015-08-18 02:40
端末別のレイアウトについて質問です。
端末（PC、スマホ、ガラケー）振り分けタグを使わずにCSSを組みたいのですが、うまくいきません。
小説はPCとガラケーでうまく反映されるのですが、スマホでは読みにくくなっていました。
ページの方は、文字サイズは問題無いのですが、横幅が合いません。小説同様スマホでは読みにくいです。

質問としては、
▼小説
・PCとガラケーの表示はそのままで、スマホで読みやすくする方法
▼ページ
・各端末に合う幅に設定する方法はあるのか（PCはwidth:550px、スマホ及びガラケーでは、borderを使った時に10px～５px離れてるのが好ましい）
です。

@media screen and のタグを検索して試したり、タグの数値を変えたりしたのですが、うまくいかなかったので、よろしくお願いします。

301SH
[編集]

by 質問者

2015-08-18 02:42
タグは二つある上に、質問までが長かったので分けさせていただきます。
CSSの中にPCにのみ反映されるものがありますが、それはPCにのみ反映を目的としているのでご了承ください

▼小説レイアウト
<div class="all"><div class="title">小説タイトル</div>
<div class="text">#list#</div></div>

<style type="text/css">

.all{
font-size:88%;
text-align:center;
min-width:400px;
max-width:550px;
margin:15px auto;
padding:0 20px;}

.title{
padding:10px 0;
border:2px #847070 solid;
border-radius:5px; /* CSS3草案 */
-webkit-border-radius:5px;/* Safari,Google Chrome用 */
-moz-border-radius:5px;/* Firefox用 */
-ms-border-radius:5px; /*Internet Explorer*/
-o-border-radius:5px; /*opera*/
background-color:rgba(255,255,255,0.9);}

.text{
text-align:left;
min-width:420px;
max-width:550px;
margin:0;
padding:10px;
border:2px #847070 solid;
border-radius:5px; /* CSS3草案 */
-webkit-border-radius:5px;/* Safari,Google Chrome用 */
-moz-border-radius:5px;/* Firefox用 */
-ms-border-radius:5px; /*Internet Explorer*/
-o-border-radius:5px; /*opera*/
background-color:rgba(255,255,255,0.9);}

html,body{
font-family:HG明朝B,HGS明朝B,SimHei,serif;
background-image:url(#sozai975_url#);
scrollbar-arrow-color:#ffffff;
scrollbar-face-color:#ff8dc6;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-highlight-color:#ff8dc6;
scrollbar-shadow-color:#ff8dc6;
scrollbar-track-color:#ffffff;
margin:0;
padding:0;}

</style>

301SH
[編集]

by 質問者

2015-08-18 02:43
▼ページレイアウト
<div id="all"><div id="header"><div id="name">SITE NAME</div><div id="menu"><ul><li><a href="">必読</a></li><li><a href="">MAIN</a></li><li><a href="">MAIL</a></li><li><a href="">LINK</a></li></ul></div></div><div id="footer"> 説明など色々</div>
</div>

<style type="text/css">

html,body{
font-family: "HGｺﾞｼｯｸM","AR丸ゴシック体M","Times New Roman",Verdana,Arial,Osaka,Helvetica,sans-seri,Sylf ;
scrollbar-arrow-color: #ffffff ;
scrollbar-face-color: #ff8dc6 ;
scrollbar-3dlight-color: #ffffff ;
scrollbar-darkshadow-color: #ffffff ;
scrollbar-highlight-color: #ff8dc6 ;
scrollbar-shadow-color: #ff8dc6 ;
scrollbar-track-color: #ffffff ;}

#all{
font-size:100%;
margin: 0 auto;
min-width:420px;
max-width: 550px;
border:1px solid #000000;}

#header{
margin:20px 0;
padding:10px 30px 0 0;
height: 100px;
text-align: right;}

#name{
font-size:160%;
margin:0 0;
padding:0 5px 0 0;}

#menu{
font-size:100%;
color:ffffff;
margin:10px 0 0 0;
padding:5px 0 5px 5px;
}
#menu ul{
margin:0;
text-align:right;
}
#menu li{
display:inline;
}
#menu li a{
margin-right:0;
padding:5px;
text-decoration:none;
}

#menu li a:link{color:#000000;}
#menu li a:visited{color:#4799ff;}
#menu li a:hover{color:#000000;}

#footer{font-size:97.5%; padding:0 0 0 10px;}
</style>

301SH
[編集]

by T

2015-08-18 12:48
ガラケーを持っていないのでPCとスマホからの確認のみですが
width:数値;とbox-sizing:border-box;で解決しませんか？
以下書き換えたセレクタのみ記述しています。

■小説機能のCSS
.all{
font-size:88%;
text-align:center;
max-width:550px;
width:95%;
box-sizing:border-box;
margin:15px auto;
padding:0;}

※.textの中の
min-width:420px;
max-width:550px;を消してください。
※ width:95%;を消してpaddingで左右の余白を調節することもできます。

■子ページのCSS
#all{
font-size:100%;
margin: 0 auto;
max-width: 550px;
width:95%;
box-sizing:border-box;
border:5px solid #000000;}

メディアクエリを使うならこのようにしてください。
■小説機能のCSS
.all{
font-size:88%;
text-align:center;
width:95%;
box-sizing:border-box;
margin:15px auto;
padding:0;}

@media screen and (min-width: 550px){
.all{
width: 550px;}}

■子ページのCSS
#all{
font-size:100%;
margin: 0 auto;
width: 95%;
box-sizing:border-box;
border:5px solid #000000;}

@media screen and (min-width: 550px){
#all{
width: 550px;}}

追記
子ページのborderを、余白を確かめるために勝手に5pxに変えたんですが、直さずそのままここに書き込んでしまったことに今更気づきましたすみません。解決したみたいですのでもうご覧にならないかもしれませんが、一応お知らせだけしておきます。

pc
[編集]

by 質問者

2015-08-19 15:38
　レスありがとうございます。
　PCとスマホの確認でCSSを提示してくれたことを嬉しく思います。

　T様が提示してくださったCSSですが、PCとスマホはもちろん、ガラケーでもレイアウトが崩れることなく表示されました！

ありがとうございます。

＞追記
　追記の心遣いに感謝します。
　borderの太さについては「あれ？」と思いましたが、別段思うところもなく私が必要とするピクセルにしたので問題ありませんでした。

　5pxは確認のためだったんですね。そこまでの真摯な対応をしてくださりありがとうございます。

301SH
[編集]

[