スマホとpcのデザイン

354 views
  1. コメントする
  2. 記事検索
  3. 更新

0
 FRD-L02 2018/06/04 11:32
テンプレサイトからデザインを借りて自分なりに編集していたのですが、上手くpcとスマホのデザインが両立出来ないでいます。


画像のようにしたいのですが、正しくheadに入れる文を直していただけると助かります。
1080×1351PNG
253KB
1080×797PNG
129KB


残り997件書き込み可

3
 FRD-L02 2018/06/05 18:03
>>2
意見ありがとうございます!
(1)から(3)までを直したところ、何とか自分の思ってるとおりになりました!

本当にありがとうございました!
2
ななし SOV33 2018/06/05 17:58
>>1
具体的に何が上手く行ってないのでしょうか?

とりあえず気になる点としては

(1)
head内なのに</head>以降も書いてある(コピペミスならいいのですが)

(2)
メディアクエリの閉じカッコがない

(3)
メディアクエリの条件式が
@media screen and (max-device-width: 750px)
@media screen and (min-width: 750px)
デバイス基準だったりそうでなかったりする

個人的には
max-device-width: 749px
min-device-width: 750px
のような感じのキッチリした分岐のほうが好きです。
ただ、なんか特殊なパターンでの閲覧を想定してわざとこう書いているなら気にしないでください。
1
 FRD-L02 2018/06/04 11:33

headには下記の文を入れています。

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<style type="text/css">
* {
padding:0;
margin:0;
}

a{
text-decoration: none;
}

a:hover{
position: relative;
top: 1pt;
color: #ffffff;
}

a:hover { border-bottom:0;
color:#df0010; }

textarea, input, select{
padding: 2px 3px;
}

body{
font-family: メイリオ, 'Trebuchet MS', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Verdana, Helvetica;
font-size: 88%;
line-height: 1.7em;
letter-spacing: 2px;
text-align: left;
background: #ffffff;

}

/* 750px以下 */
@media screen and (max-device-width: 750px){
.all{
font-size: 82%;
line-height: 1.6;
text-align: left;
background: #ffffff;
}

/* トップ */
.header{
margin: 0;
background: #FA8000;
}

.main{
margin: 0 auto;
}

/* 以下メニュー */
.menu{
margin: 0;
background: #FA8000;
padding: 5px 10px;
text-align: left;
}

ul.menu{
list-style: none;
padding: 0;
margin: 0;
}

ul.menu li{
margin: 5px;
display:inline;
}

ul.menu a{
font-family: "Arial Black";
text-decoration: none;
padding: 3px;
color: #333333;
}

/* インフォメーション */
.info{
margin: 15px 10px 5px 10px;
}

/* ボトム */
.footer{
text-align: center;
}

/* サイトタイトル */
h1{
font-family: "Century Gothic";
font-size: 180%;
color: #ffffff;
padding: 10px 15px 0 0;
text-align: right;
}

/* URLの文字 */
h2{
font-family: "Century Gothic";
font-size: 100%;
text-align: right;
color: #ffffff;
padding: 0 15px 5px 0;
}

/* インフォの見出し */
.midasi{
font-family: "Century Gothic";
font-size: 100%;
color: #333333;
padding: 0 0 0 3px;
margin: 8px 0 4px 0;
border-bottom: dashed #888888 1px;
}


/* 750px以上 */
@media screen and (min-width: 750px){
.all{
font-family: メイリオ, 'Trebuchet MS', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Verdana, Helvetica;
letter-spacing: 2pt;
font-size: 88%;
line-height: 1.7;
text-align: left;
background: #ffffff;
}

/* トップ */
.header{
margin: 0;
background: #FA8000;
}

/* トップ以下のピクセル固定 */
.main{
width: 900px;
margin: 0 auto;
}

/* 以下メニュー */
.menu{
width: 200px;
padding: 0;
margin: 30px 0 0 0;
float: left;
}

ul.menu{
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}

ul.menu li{
margin: 6px;
}

ul.menu a{
font-family: "Arial Black";
font-size: 120%;
display: block;
text-decoration: none;
background: #FA8000;
padding: 5px;
}

ul.menu a:link{
color: #333333;
}

ul.menu a:visited{
color: #333333;
}

ul.menu a:hover{
background: #ffffff;
color: #FA8000;
}

/* インフォメーション */
.info{
width: 660px;
padding: 0;
margin: 30px 0 0 0;
float: right;
}

/* ボトム */
.footer{
clear:both;
text-align: center;
color: #ffffff;
}

/* サイトタイトル */
h1{
font-family: "Arial Black";
font-size: 250%;
text-align: center;
color: #ffffff;
padding: 10px 0 0 0;
}

/* URLの文字 */
h2{
font-family: "century gothic",sans-serif;
font-size: 130%;
text-align: center;
color: #ffffff;
padding: 0 0 12px 0;
}

/* インフォの見出し */
.midasi{
font-family: "Century Gothic";
font-size: 100%;
color: #333333;
padding: 0 0 0 7px;
margin: 9px 0 5px 0;
border-bottom: dashed #888888 1px;
}

br{
letter-spacing: normal;
}
</style>

</head>
<body bgcolor="#ffffff" text="#000000" link="#FD7E00" vlink="#888888" alink="#FD7E00">
<div class="Wrapper">
<font size="2">


1ページ中1ページ目

Back to Top