CSSでボックスの位置をずらすCSSなどはある？

質問

HTMLないしはCSSでボックスの位置をずらすCSSなどはあるのでしょうか？

上に１ｃｍ動かすなどできないのでしょうか？

回答No.5

ORUKA1951 · ベストアンサー

HTMLがデザインを目的に作成されています。これは根本的に直しましょう。
『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』は、HTML4.01の勧告(1999/12)以来繰り返し唱えられています。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
　現在勧告に向けて作業が進んでいるHTML5では、プレゼンテーションに関わる要素や属性が廃止されています。作成されるならHTML4.01strict,XHTML1.0strict,XHTML1.1で作成しましょう。

(注意)下記のソースは、タブを＿に置換してあります。テストするときは戻すこと。

[HTML]
<h1 align="center">のalignはスタイルシートで設定しまょう。
<br/>はデザインのために使うものではありません。
<table bor・・・デザインのためにtableは使うべきではありません。
&nbsp;&nbsp;&nbsp;・・字下げはスタイルシートで設定します。
<address>は、著者への連絡先を記述するものです。
デザインのために余分な要素(br,div,table)を加えない。その必要はありません。加えると逆にデザインしにくくなります。

★以上を元にHTMLを書き直すと下記のようなシンプルなものになります。
　＊サイトナビゲーションはこの文書の目次ではないのでfooterに入れました。

<div class="header">
＿<h1>アレルギー性皮膚炎</h1>
＿<p class="goTop"><a href="./top.html"><span>トップへ</span></p>
</div>
<div class="section">
＿<h2>自己紹介</h2>
＿<p>大学受験まではただの乾燥肌でした。</p>
＿<p>大学受験中</p>
</div>
<div class="footer">
＿<div class="nav">
＿＿<ol>
＿＿＿<li><a href="http://localhost:2080/test/aregy/top.html">TOPPAGEへ行く</a></li>
＿＿＿<li><a href="http://localhost:2080/test/aregy/chiryou.html">注目の最新治療</a></li>
＿＿＿<li><a href="http://localhost:2080/test/aregy/tokusyu.html">特殊治療・体験治療</a></li>
＿＿＿<li><a href="#DocumentVirsion">文書情報</a></li>
＿＿</ol>
＿</div>
＿<div id="DocumentVirsion">
＿＿<dl>
＿＿＿<dt>First Published</dt>
＿＿＿<dd>2011-12-21</dd>
＿＿</dl>
＿</div>
＿<p class="copyright">
＿＿<span class="copy">Copyright©</span><span class="text">アレルギー性皮膚炎特殊治療最新治療体験記AND特殊治療最新治療紹介</span><span class="en">All Rights Reserved.</span>
＿</p>
</div>

だけでよいですね。この様にHTMLが書かれているとスタイルシートで、まったく自由にデザインできます。
『 CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )』

　この様なHTMLだと、検索エンジンもスタイルシートや画像を読み込まないユーザーエージェントにも理解できます。それよりも、後で自分が書き直すときも楽ですし、スタイルシートも書きやすい。
　スタイルシートを変更するだけで、「サイトナビゲーションをウィンドウの一番上に置こう」「プルダウンメニューにしよう」とかもHTMLを書き直さずにできます。すなわちスタイルシートの「スタイルシートを書きなおすだけで、サイト内のすべてのページのデザインをまったく変えることが出来ます。だってデザインのために書かれてなくて、文書解析が出来るように書いてあるから・・・

[CSS]
background-color: mediumpurple;この色は色のキーワードしては使わないほうが良いです。キーワードとして基本的に使えるのは16色だけです。それ以外は#ないしrgb()で指定しましょう。
　色 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#h-6.5 )

★出所・出現順番・セレクタ・詳細度・優先度などカスケーディングを使いましょう。せっかくのカスケーディングスタイルシート、カスケーディングは最大の特長です。CSSを使いながらカスケーディングを無視した書き方はしないように。

html,body{margin:0;padding:0;}
h1,h2{text-align:center;}
div.header,div.section,div.footer{margin:0 20px 0 260px;}
div.header{height:158px;}
div.header h1{margin:0 240px 0 0;line-height:158px;}
div.header p.goTop{
＿position:absolute;left:20px;top:0;
＿height:158px;width:240px;margin:0;
＿background:maroon url(../test/gazou/background/umi0182-077.jpg) no-repeat;
＿text-align:center;line-height:158px;
}
div.header p.goTop a{
＿display:block;
＿width:100%;height:100%;
}
div.header p.goTop a span{visibility:hidden;}
div.section{
＿border:medium solid black;
＿background-color:#DDA0DD;
＿min-height:400px;
}
div.section h2{
＿background-color:#9370DB;
＿margin:0;height:1em;
＿padding:0.3em;
＿border-bottom:medium solid black;
}
div.section p{
＿margin:0 1em;
＿text-indent:1em;/* 字下げはtext-indent */
＿line-height:1.6em;/* 行間隔はline-heightで */
}
div.footer div.nav{
＿position:fixed;top:160px;＿left:20px;
＿width:230px;
＿font-size: 1.3em;
＿background-image:url("../test/gazou/background/bg052.gif");
}
div.footer div.nav ol,
div.footer div.nav ol li{
＿display:block;list-style:none;
＿margin:0;padding:0;
}
div.footer div.nav ol li{margin:10px 0;}
p.copyright{font-size:0.9em;}
p.copyright span+span{margin-left:2em;}

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

XHTML1.0strict,XHTML1.1で作成した方が今後HTML5に移行したときに、すんなりと移行できるのでしょうか？
XHTML1.0strict,XHTML1.1、HTML5はかなり似ているのでしょうか？

またXHTML1.1は比較的後方互換性が低くなっています。とあるのですが、今であればほとんどの人の環境で見れると考えて大丈夫なのでしょうか？

訂正して頂いたところは徐々に変えていきます。勉強になりました。

回答No.9

ORUKA1951

>px良いのですか？
　要素の位置やサイズは、一般的には(相対サイズの)pxが良いでしょう。他の相対サイズのem,exはフォントサイズを参照します。
　また絶対サイズのmm,cm,in,pc,ptは、ページ媒体(印刷)に適しているでしょう。
　フォントの大きさは、用途によって使い分けます。

詳しくは
★4.3 値の種類（Values） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )
　とか

お礼

お忙しい中何度もご回答頂き大変ありがとうございます。

pxなら、くずれる事はないのですね。
CMは文字の大きさが変わると、幅も文字の大きさに合わせるので変わってしまうということですね。

回答No.8

ORUKA1951

＞XHTML1.0strictでも良いのならそちらを検討します。

　HTML4.01strictでも・・XHTML1.0strictも基本的に同じです。

(HTML)　HTML4.01――――――――――――――――――――――――――――>HTML5
　　strict　　　　　＼ 　　　　　　　　　　　　　　　　　　　　　　　／(統合)　　(XHTML5)
(XML) XHTML1.0---->XHTML1.1----->XHTML2.0(中止)

　HTMLは4.01で廃止され、XHTMLに移行する予定だったけど、やはりHTMLで行くことになった。HTML5だとXHTMLの書き方も出来るXMLが必要な場合は、そちらを使える。
　資料の豊富なHTML4.01strict,XHTML1.0(HTML4.01のXMLバージョン)strictを身につけておけば
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
　だけで基本的に済むかと

お礼

お忙しい中何度もご回答頂き大変ありがとうございます。

始めたばかりの初心者なのですが、せっかくやるのならXHTML1.0strictかXHTML1.1のどちらが良いのでしょうか？
まだ初心者なのでXHTML1.0strictのほうが参考が多いので良いでしょうか？

回答No.7

ORUKA1951

＞XHTML1.0strict,XHTML1.1で作成した方が今後HTML5に移行したときに、すんなりと移行できるのでしょうか？
HTML5だと、先のHTMLは
<header>
＿<h1>アレルギー性皮膚炎</h1>
＿<p class="goTop"><a href="./top.html"><span>トップへ</span></p>
</header>
<section>
＿<h2>自己紹介</h2>
＿<p>大学受験まではただの乾燥肌でした。</p>
＿<p>大学受験中</p>
</section>
<footer>
＿<nav>
＿＿<ol>
＿＿＿<li><a href="http://localhost:2080/test/aregy/top.html">TOPPAGEへ行く</a></li>
＿＿＿<li><a href="http://localhost:2080/test/aregy/chiryou.html">注目の最新治療</a></li>
＿＿＿<li><a href="http://localhost:2080/test/aregy/tokusyu.html">特殊治療・体験治療</a></li>
＿＿＿<li><a href="#DocumentVirsion">文書情報</a></li>
＿＿</ol>
＿</nav>
＿<div id="DocumentVirsion">
＿＿<dl>
＿＿＿<dt>First Published</dt>
＿＿＿<dd>2011-12-21</dd>
＿＿</dl>
＿</div>
＿<p class="copyright">
＿＿<span class="copy">Copyright©</span><span class="text">アレルギー性皮膚炎特殊治療最新治療体験記AND特殊治療最新治療紹介</span><span class="en">All Rights Reserved.</span>
＿</p>
</footer>

　となるでしょう。それを見越してclass名がつけてある。実はHTML4でもそのようなclass名をつけろと書いてあった。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書 (邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

→3.1. New Elements ( http://www.w3.org/TR/2011/WD-html5-diff-20110525/#new-elements )
　文書構造をより明確に示すために次の要素が追加された。。。
★HTML5は、HTML4.01strictを改定したものと考えると良いでしょう。

スタイルシートも
html,body{margin:0;padding:0;}
h1,h2{text-align:center;}
header,section,footer{margin:0 20px 0 260px;}/* ヘッダ、フッタ、本文の設定 */
header{height:158px;}/* ヘッダ */
header h1{margin:0 240px 0 0;line-height:158px;}
header p.goTop{
＿position:absolute;left:20px;top:0;
＿height:158px;width:240px;margin:0;
＿background:maroon url(../test/gazou/background/umi0182-077.jpg) no-repeat;
＿text-align:center;line-height:158px;
}
header p.goTop a{
＿display:block;
＿width:100%;height:100%;
}
header p.goTop a span{visibility:hidden;}
section{/* 本文 */
＿border:medium solid black;
＿background-color:#DDA0DD;
＿min-height:400px;
}
section h2{/* 本文中のh2 */
＿background-color:#9370DB;
＿margin:0;height:1em;
＿padding:0.3em;
＿border-bottom:medium solid black;
}
section p{/* 本文中の段落 */
＿margin:0 1em;
＿text-indent:1em;/* 字下げはtext-indent */
＿line-height:1.6em;/* 行間隔はline-heightで */
}
footer nav{/* フッター内のナビゲーション */
＿position:fixed;top:160px;＿left:20px;
＿width:230px;
＿font-size: 1.3em;
＿background-image:url("../test/gazou/background/bg052.gif");
}
footer nav ol,
footer nav ol li{
＿display:block;list-style:none;
＿margin:0;padding:0;
}
footer nav ol li{margin:10px 0;}
p.copyright{font-size:0.9em;}
p.copyright span+span{margin-left:2em;}

となるので、どちらも文書の構成がよくわかるでしょう。HTML5だとHTMLをみてもCSSを見ても、なにが書かれているかわかりやすいと思います。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

XHTML1.0strictでも良いのならそちらを検討します。

回答No.6

ORUKA1951

わすれてました。
・どのような画像かわからないので適当なサイズを想定しています。
・示された見本では私のウィンドウをはみ出すので、リキッドスタイルに変更してあります。 ウィンドウ巾に合わせて伸縮します。
　i-phone,i-padでもなんとか利用できるでしょう。
・将来どのようにでもデザインが変更できるように作成してあります。３分割にするとか、サイトなびを上にして<、ページの目次を左に置くとか、アフィリエイトゆ脚注を右側に置きたいとかも、HTMLを変更する必要はなく要素を追加するだけで出来るでしょう。

★配置に関わるサイズは、emを使わないほうが良いです。ユーザーがフォントサイズを変えたら崩れちゃいます。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

＞配置に関わるサイズは、emを使わないほうが良いです。ユーザーがフォントサイズを変えたら崩れちゃいます。

marginなどですね。
px良いのですか？

回答No.4

ORUKA1951

CSSを自在に操るためには、HTMLがきちんとした文書構造を持っていないとなりません。
まず、HTMLをきちんと学んでください。

＞例えば頑張ろう日本という画像のボックスがあると思うのですが、

　ありません。
　画像は「置換インライン要素」という種類に属します。サイズが内容の大きさによって定まる(置換)、インライン要素ということですから、それ自体はスタイルシートで言うbox(block)には属しません。
★7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )

　一方、「一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )」

　それはさておき、画像は行内要素ですから、
<p>ここに<img src="./image/logo.jpg" width="48" height="33" alt="画像">が入る。</p>
として、
p img{
position:relative; /* 相対配置を指定 */
top:-10px;
}
で、本来の位置より上に10px上がります。
ところが、
top:-10%;
では移動しません。なぜなら、行内要素でかつ置換要素だから、100%のサイズを算定する基準がないからです。

p{height:20px;}
を追加すると、算定基準があるので、上に2px(20px × 10%)ほど移動します。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

確かにposition:relative;でずらすことができました。
だだ上にずらした分下の方に空白ができてしまいました。
下記がソースなのですが、<h1 align="center">アレルギー性皮膚炎</h1>
をセンターのままにしてその左側にtableを回り込ませれば下に余計な余白ができないと思います。そのようなことは出来ませんか？

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>アレルギー性皮膚炎</title>
<link rel="stylesheet" href="basecss.css"" type="text/css" />

<style type="text/css">

body {background-image: url("../test/gazou/background/bg053.gif");}

h1 {font-size :2em;
background-image :url("../test/gazou/background/bg005.gif");
width: 12em;
bottom: 12em;
background-position :center;
margin-left: auto;
margin-right: auto;
padding: 1em;
}

h2 {font-size: 1.5em;
text-align: center;
border-top: medium solid black;
border-left: medium solid black;
border-right: medium solid black;
width: 31em;
margin-left: 12em;
margin-right: auto;
height: 1em;
margin-bottom: 0em;
padding-bottom:0.3em;
padding-top:0.3em;
background-color: mediumpurple;
position:relative; bottom: 6cm;
}

p.link1 {width: 9.5em;
margin-left: 1em;
float:left;
background-image:url("../test/gazou/background/bg052.gif");
padding: 1em;
font-size: 1.3em;
position:relative; bottom: 6cm;
}

p.comment1 {border: medium solid black;
width: 36.75em;
margin-left: 15em;
margin-right: 7.9em ;
margin-top: 0;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
background-color: plum;
font-size: 1.2em;
line-height: 0.55cm !important ;
position:relative; bottom: 6cm;
}

table,table1 {background-color: maroon;
margin-left: 0.7cm;
position:relative; bottom: 7cm;
}

th {background-image: url("../test/gazou/background/umi0182-077.jpg");
padding: 9em 7em 5em 8em;
}

</style>

</head>
<body>

<div id="div">

<br />
<h1 align="center">
アレルギー性皮膚炎
</h1>
<br/>

<table border="2" class="table1">
<tr>
<th>

</th>
</tr>
</table>

<p class="link1">
<a href="http://localhost:2080/test/aregy/top.html">
TOPPAGEへ行く
</a>
<br/>
<a href="http://localhost:2080/test/aregy/chiryou.html">
注目の最新治療
</a>
<br/>
<a href="http://localhost:2080/test/aregy/tokusyu.html">
特殊治療・体験治療
</a>

</p>

<h2>
自己紹介
</h2>

<p class="comment1" style="line-height:1.5em;">
&nbsp;&nbsp;&nbsp;
大学受験まではただの乾燥肌でした。
<br/>
&nbsp;&nbsp;&nbsp;
大学受験中
</p>

</div>

<address>
2011年作成
</address>
<span>Copyright(C)&nbsp;&nbsp;アレルギー性皮膚炎特殊治療最新治療体験記AND特殊治療最新治療紹介&nbsp;&nbsp;All Rights Reserved.</span>

</body>

</html>

回答No.3

noname#158634

＞＞上に１ｃｍ動かすなどできないのでしょうか？
＞こちらは一文字を示す1cmで1ｐｘでもなんでも構いません。
だからね、これが曖昧で答えを出せないと言っています。センチメートルだろうがピクセルだろうがなんだろうが同じこと。
逆に質問ですが「上」とはなんでしょう？ボックスの配置される位置はその時書かれたHTMLとCSSによって決まります。つまり、「今」どうなのかが分からなければ、今の状態から「上にずらす」方法は定まりません。これで分かりますか？

＞ご質問したことは、例えば頑張ろう日本という画像のボックスがあると思うのですが、このボックスを上にずらしたりすることはできないのでしょうかということです。
たとえば、
<div>
<p>
<img>
</p>
</div>
という形になっているとしますよ。
┏━━━┓
┃┏━┓┃
┃┃■┃┃
┃┗━┛┃
┗━━━┛
構造だけで言うと上の通りです。外の罫線が<div>、中の罫線が<p>、中央の■が<img>です。<div>はレイアウトするために外に用意したボックス、<p>は「頑張ろう日本という画像のボックス」、<img>は「頑張ろう日本という画像」にあたります。
『何も設定していない場合』、これらは全て<div>の左上角のほうへ詰まって配置されます。
この状態から、主にmarginやpaddingの指定によってスペースを確保し、表示位置を変えます。それがCSSによるボックスレイアウトの一般論。
＞marginで上にずらすと画像が上にずれますが
またしても曖昧なのであくまで推測ですが、この例で言えば<img>のmargin-bottomを取った場合でしょうか？
＞ボックスは上にはずれずに上に伸びただけなので
ということはそうなのでしょう。その不満を解消するには、<img>ではなく<p>のmarginか、<div>のpaddingを設定する必要があります。
「頑張ろう日本という画像のボックス」の上にmarginかpaddingがあれば簡単。上の余白を減らせばいいからです。
もし現在CSSで特に指定がなく、<p>と<img>が<div>の左上に詰まっている場合、#1が言うような、今の質問者さんにはハードルが高くて諦めてもらったほうがいいような方法しかない。ちなみに#1の内容は正しいが、今の質問者さんレベルの初心者が理解できないのは問題ないので気にしないこと。

もう一度言いますがまずきちんとCSSの基本を知ってください。今自分が言っている内容の意味不明さ、曖昧さに気付けるはず。
繰り返しますが、意地悪や罵倒ではありません。自分が何を理解できていなくて何を質問すべきか、正確に分かっている質問のほうが回答しやすく結果として質問者さんのためになるからです。

お礼

CSSの基本概念や用語が初心者にも分かるようなサイトや本が見つかりません。
一冊本は読んだのですがほとんどタグなどの情報ばかりです。

そのような事が分かる所があればいいのですが、ご存知でしたら教えてください。

回答No.2

noname#158634

CSSをちゃんと理解して、ちゃんとしたHTMLを書いてあればできますよ。
一般に、特定のボックスの位置を変えるためにはそのボックスのmarginかひとつ外のボックスのpaddingを調整します。ただしHTMLの構造による。
質問文の言い回しからして、たぶんまだ漠然としかCSSを理解してないと思うので(HTMLカテに投稿するくらいだし)、まずはCSSについてきちんと勉強することをお勧めします。

ちなみに馬鹿にしているわけでも意地悪で教えないわけでもありません。
＞上に１ｃｍ動かすなどできないのでしょうか？
という質問があいまいすぎて答えが一意にならないだけです。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

初心者ですいません。

＞上に１ｃｍ動かすなどできないのでしょうか？
こちらは一文字を示す1cmで1ｐｘでもなんでも構いません。

ご質問したことは、例えば頑張ろう日本という画像のボックスがあると思うのですが、このボックスを上にずらしたりすることはできないのでしょうかということです。
もちろんmarginで上にずらすと画像が上にずれますがボックスは上にはずれずに上に伸びただけなのでこれを言っているわけではありません。
すべてを上にずらすということです。

回答No.1

ORUKA1951

position:relative;

relative
　　ボックスの位置はまず通常フローにて計算され（この計算で得られた
　位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。な
　お、あるボックスBが相対配置される場合、それに後行するボックスの
　位置は、Bが相対配置されていないかのように計算される。
9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )

＞上に１ｃｍ動かすなどできないのでしょうか？

　ということは、印刷用スタイルシートだと思います。ディスプレイの場合はcmやmmは、計算がややこしくなるので通常は使いません。印刷用スタイルシートの場合は、cm、mm、ptなどを使うことが多いでしょうね。

div.section{
　width:170mm;
　margin:0 auto;
　font-size:10.5pt;
　page-break-after:always;
}
とか・・

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

初心者ですいません。

＞上に１ｃｍ動かすなどできないのでしょうか？
こちらは一文字を示す1cmで1ｐｘでもなんでも構いません。

ご質問したことは、例えば頑張ろう日本という画像のボックスがあると思うのですが、このボックスを上にずらしたりすることはできないのでしょうかということです。
もちろんmarginで上にずらすと画像が上にずれますがボックスは上にはずれずに上に伸びただけなのでこれを言っているわけではありません。
すべてを上にずらすということです。