HP全体を左寄せ配置するCSSの記述について。
CSS付きで中央表示の無料テンプレートを頂きました。
これを左寄せ配置で表示させる方法を教えて下さい。
(base.css)
@charset "Shift_JIS";
/* 基本設定 */
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:Verdana, Helvetica, sans-serif;
}
body{
color:#333;
text-align:center;
}
br{
letter-spacing:normal;
}
a{
color:#333;text-decoration:none;
}
a:hover{
color:#fff;text-decoration:none;
}
img{
border:0px;
}
/* テンプレート */
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px auto;
}
#header{
background:#fff url(img/cat.gif) no-repeat 0px 0px;
width:500px;height:120px;
text-align:left;
border:1px solid #333;
}
#menu{
background-color:#333;
width:500px;height:24px;
color:#fff;
margin:10px 0px;
border:1px solid #333;
}
#main{
background:#fff;
width:480px;
text-align:left;
padding:10px;
border:1px solid #333;
}
#footer{
background:#fff;
width:500px;height:30px;
color:#333;
line-height:30px;
margin:10px 0px;
border:1px solid #333;
}
/* タイトル部分 */
#header h1{
padding:30px 0px 0px 190px;
}
/* メニュー部分 */
#menu ul{
list-style-type:none;
height:24px;
margin-left:30px;
}
#menu li{
display:inline;
padding:0px
}
#menu a{
color:#fff;
line-height:24px;
float:left;
text-decoration:none;
padding:0px 5px;
}
#menu a:hover{
color:#DB9400;
text-decoration:none;
}
/* メインコンテンツの見出し */
#main h2{
background:url("img/mark.gif") no-repeat;
padding:1px 0px 3px 25px;
color:#DB9400;
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px 0;
}
この部分だけ置き換えてみてください。
No.2
- 回答日時:
上から、
@charset "Shift_JIS";
/* 基本設定 */
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:Verdana, Helvetica, sans-serif;
}
body{
color:#333;
/* ここを削除した */
}
br{
letter-spacing:normal;
}
a{
color:#333;text-decoration:none;
}
a:hover{
color:#fff;text-decoration:none;
}
img{
border:0px;
}
/* テンプレート */
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px 0; /* ここの auto をゼロにした */
}
/* ~~ 以下変更無しで同じなので省略 ~~ */
text-align:center;を削除したところ
レイアウトが若干崩れてしまいました。
私のPC環境のせいかもしれません。
後は上手くいきました。
回答を頂けたことに感謝しています。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
CSS(0の単位)について
-
余分な縦スクロールバーが出て...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
入力フォームとセレクトボック...
-
HTMLで文字が重なって表示されます
-
widthやheightの数値に単位(px...
-
スクロールボックスを中央に配...
-
吹き出し 下記の吹き出しのスタ...
-
CSSでの段組で、下辺を揃える方法
-
cssでの幅の分割(固定・可変混...
-
Flexslider2のカーセルスライダ...
-
CSS:animation開始位置の設定
-
CSSで「overflow:scroll」をしてい
-
CSSでボックスのheightが0になる
-
borderをページの下まで伸ばしたい
-
<li>の先頭に出るスペースの埋...
-
CSSと<dl><dd>で間隔をあけて1...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報