凍結
0 匿名 Chrome
ググって色々やってみたのですが、どうしても反映されず…どうかお力をお貸しください(汗)

どうしてもテンプレートがPCだと画面左に寄ります。
width、margin、pathing試してみましたが、効果がありませんでした。
また、これらの数値を動かしているにも関わらず、テンプレートに変わった様子(反映されてない?)が全くありませんでした。
どうしたら画面中央(文字は左揃え)に来るでしょうか?

知識をお持ちの方、ご協力お願いいたします…!


<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Tillana&display=swap');
<style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">


body {
font-family: 'Tillana', 'メイリオ', sans-serif;
width: 750px;
text-align: left;
margin : auto;;
font-size: 12px;
letter-spacing: 2.4px;
line-height:1.8;
pathing:25px;
}


img{
max-width:100%;
height:auto;
}

#all{
width:100%;
background:#fff;
}

#wrp{
margin: 0 0 0;
max-width: 400px;
}

#cnt,#bun{
margin:0 auto;
padding: 0px 30px;
text-align: left;
}

#bun{
font-size:13px;
}

#ttl{
font-family: しっぽり明朝;
font-size: 20px;
color:#fff;
text-shadow: 0px 0px 10px rgba(0,0,50,0.4);
font-weight: normal;
}

#txt{
font-size:11px;
color:#fff;
margin:0 auto;
padding:10px 0 0;
width:85%;
text-align: center;
text-shadow: 0px 0px 10px rgba(255,255,255,1);
}

#txt2{
font-size:8px;
color:#555;
margin:0 auto;
padding:10px 0 0;
width:85%;
text-shadow: 0px 0px 10px rgba(255,255,255,1);
}

h1,h2 {
font-family: "Homemade Apple", 'メイリオ', sans-serif;
font-size: 20px;
line-height: 100%;
letter-spacing: 0;
padding: 0;
font-weight:200;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

h1{
color: #fff;
margin: -90px 0 0 20px;
position: absolute;
}

h2 {
margin: 0 15px 50px;
}

h3{
font-family: 'Sacramento', cursive;
font-size: 18px;
padding: 11px 0 0px;
border-bottom: double;
display: block;
background: url(##IMAGE_DATA_40_URL##) no-repeat;
background-size: 27px;
}


a{
text-decoration:none;
}

figure{
display: table;
margin: 0 auto;
position: relative;
}

figcaption{
position: absolute;
top: 25px;
width: 100%;
text-align:center;
}

input[type],textarea{
height:50px;
width:80%;
font-family:"Arsenal","HGSゴシックM", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#eee;
color:#333;
border:solid 1px #eee;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:5px;}

input[type=text]{
margin:5px;
height:24px;
width:60px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:none;
background:#367AD3;
color:#fff;
font-weight:normal;
}
09/14 17:48
返信
コメント投稿 検索
4 匿名 Chrome
>>3
すみません、Googleで調べてはいますが、重要箇所がbodyの認識であっているのかわからなかったため、全てのCSSを記載させていただいておりました。説明不足で申し訳ないです。

お尋ねしたいのは「プレビューしたときにPCだと左寄せになっているので、中央寄せするにはどうしたらいいか」です。

body {
font-family: 'Tillana', 'メイリオ', sans-serif;
width: 750px;
text-align: left;
margin : auto;;
font-size: 12px;
letter-spacing: 2.4px;
line-height:1.8;
pathing:25px;
}

表紙画面にはh1で囲ったタイトルとh3の見出しのみ記載しておりますが、画面の横幅の指定も反映されていない(PC画面の端から端まで下線部が引かれています)状況です。
知識不足でご迷惑おかけしますが、何卒宜しくお願い致します…!
09/14 18:38
返信