![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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の文字が縦書きになる
-
widthやheightの数値に単位(px...
-
中点「・」の改行について
-
CSSがなぜかfont-sizeだけ効か...
-
Media Queries 4 で 非推奨とな...
-
CSSで背景画像を一番下にもって...
-
表示倍率を変えるとレイアウト...
-
form input テキストを上下中央...
-
CSS、width100%でもできる余白
-
ページを拡大縮小でborderが消...
-
HTMLのiframeの入れ子について
-
CSS上での計算を行うためのルー...
-
<div>と<div>の間の10px程の...
-
Safariでheight:100%のボックス...
-
横並びリスト ブラウザ縮小 カ...
-
cssで「下よせ」ってどうやって...
-
CSSで画像を同じ位置に重なり合...
-
CSSでiframe要素の編集
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報