質問内容
「はじめまして、ナノの携帯PCスマホ対応SETをダウンロードさせてもらいました。改変の中で色々と試してみたのですが上手くいかず諦めていたことがあります。PCから見たときに、画面の左半分だけ（テーブルタグを使わず）に表示させる為にはどうしたらいいでしょうか？paddingやmargin部分をいじってみても理想のレイアウトにはならず…。お手数ですが、どの部分を改変すればいいのか教えていただけると嬉しいです。」

回答
こんにちは。テンプレ使ってくださりありがとうございます！
ご質問のことですが、画面の左半分だけという言葉が２通りに解釈できましたので二種類回答させて頂きますね。

1. メニューを表示せず、画面の左部分（コンテンツ部分）のみを表示させたい。
→こちらの意味でしたら簡単です。テンプレのCSSにはメニュー画面を表示させないようなCSSを組み込んで有りますので、全体レイアウト編集において

<pc>
<div class="side">
<div class="menu">
<a href="url">info</a>
<a href="url">main</a>
<a href="url">memo</a>
<a href="url">link</a>
<a href="url">mail</a>
</div>
</div>
</pc>
<div class="content2">内容
</div>

となっているところを、

<div class="content1">
内容
　</div>

に差し替えるだけです。


2.メニューは関係なく、左側のコンテンツ部分を更にその中で左半分に寄せたい。
→こちらの意味でも、数値が少々面倒ですが簡単に変更できます。
HEAD内CSSで<pc>〜</pc>に囲まれた部分を見つけます。
そこでいろいろな幅を指定してあります。（100pxや、490pxなどいろんな指定があればそこです。）
そのなかでcontent2の幅を指定してある所があります。

.content2 {
float:left;
width:490px;}

↑これです。
これを

.content2 {
float:left;
margin-right:245px;
width:245px;}

に変更すると、content2は半分の幅になります。marginは指定しなくても大丈夫かもしれませんが、一応つけておきました。とりあえず、これでIE,Chrome,Firefox,Operaの4ブラウザで内容が左半分に表示されることを確認しました。

content1（メニュー表示しない様にする場合）でも同じようにすれば左半分に表示を寄せることができます。

また、左半分というのがもし全体を囲む左右の枠の半分ということでしたら

.content2 {
float:left;
margin-right:190px;
width:300px;}

にしてみてください。
この数値の出し方は、widthの幅＋margin-rightの幅＝もともと指定してあった幅、になれば好きな様にいじることができます。

例えば、

.content1 {
width:580px;}

は、このようになります。↓

.content1 {
margin-right:280px;
width:300px;}

ただしcontent2以外の幅は確認を行なっていませんのでご注意ください！
企画参加ありがとうございましたｖ
これからもYANGをよろしくお願いします！



わからなかった場合などの追加質問はこちらへどうぞ！


≪BACK