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

Question

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

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

ORUKA1951 · Accepted Answer

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]

のalignはスタイルシートで設定しまょう。
はデザインのために使うものではありません。は、著者への連絡先を記述するものです。デザインのために余分な要素(br,div,table)を加えない。その必要はありません。加えると逆にデザインしにくくなります。 ★以上を元にHTMLを書き直すと下記のようなシンプルなものになります。　＊サイトナビゲーションはこの文書の目次ではないのでfooterに入れました。
＿
アレルギー性皮膚炎
＿
トップへ

＿
自己紹介
＿
大学受験まではただの乾燥肌でした。
＿
大学受験中

＿
＿＿
＿＿＿
TOPPAGEへ行く
＿＿＿
注目の最新治療
＿＿＿
特殊治療・体験治療
＿＿＿
文書情報
＿＿
＿
＿
＿＿
＿＿＿
First Published
＿＿＿
2011-12-21
＿＿
＿
＿
＿＿Copyright©アレルギー性皮膚炎特殊治療最新治療体験記AND特殊治療最新治療紹介All Rights Reserved. ＿

だけでよいですね。この様に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;}

ORUKA1951 · Answer

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;
}
とか・・

noname#158634 · Answer

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

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

noname#158634 · Answer

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

という形になっているとしますよ。 ┏━━━┓ ┃┏━┓┃ ┃┃■┃┃ ┃┗━┛┃ ┗━━━┛ 構造だけで言うと上の通りです。外の罫線が

、中の罫線が

、中央の■がです。

はレイアウトするために外に用意したボックス、

は「頑張ろう日本という画像のボックス」、は「頑張ろう日本という画像」にあたります。『何も設定していない場合』、これらは全て

の左上角のほうへ詰まって配置されます。この状態から、主にmarginやpaddingの指定によってスペースを確保し、表示位置を変えます。それがCSSによるボックスレイアウトの一般論。＞marginで上にずらすと画像が上にずれますがまたしても曖昧なのであくまで推測ですが、この例で言えばのmargin-bottomを取った場合でしょうか？＞ボックスは上にはずれずに上に伸びただけなのでということはそうなのでしょう。その不満を解消するには、ではなく

のmarginか、

のpaddingを設定する必要があります。「頑張ろう日本という画像のボックス」の上にmarginかpaddingがあれば簡単。上の余白を減らせばいいからです。もし現在CSSで特に指定がなく、

とが

の左上に詰まっている場合、#1が言うような、今の質問者さんにはハードルが高くて諦めてもらったほうがいいような方法しかない。ちなみに#1の内容は正しいが、今の質問者さんレベルの初心者が理解できないのは問題ないので気にしないこと。もう一度言いますがまずきちんとCSSの基本を知ってください。今自分が言っている内容の意味不明さ、曖昧さに気付けるはず。繰り返しますが、意地悪や罵倒ではありません。自分が何を理解できていなくて何を質問すべきか、正確に分かっている質問のほうが回答しやすく結果として質問者さんのためになるからです。

ORUKA1951 · Answer

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

まず、HTMLをきちんと学んでください。

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

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

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

　それはさておき、画像は行内要素ですから、
<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%)ほど移動します。

ここにが入る。

として、 p img{ position:relative; /* 相対配置を指定 */ top:-10px; } で、本来の位置より上に10px上がります。ところが、 top:-10%; では移動しません。なぜなら、行内要素でかつ置換要素だから、100%のサイズを算定する基準がないからです。 p{height:20px;} を追加すると、算定基準があるので、上に2px(20px × 10%)ほど移動します。

ORUKA1951 · Answer

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

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

ORUKA1951 · Answer

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

＿

アレルギー性皮膚炎

＿

トップへ

＿

自己紹介

＿

大学受験まではただの乾燥肌でした。

＿

大学受験中

　となるでしょう。それを見越して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を見ても、なにが書かれているかわかりやすいと思います。

ORUKA1951 · Answer

＞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/ )
　だけで基本的に済むかと

ORUKA1951 · Answer

>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 )
　とか

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

position:relative;

CSSをちゃんと理解して、ちゃんとしたHTMLを書いてあればできますよ。

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

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

HTMLがデザインを目的に作成されています。

わすれてました。

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

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

>px良いのですか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング