XMLをcssでレイアウトする

Question

XMLの授業で、XMLをcssでレイアウトする課題をしているのですが、評価対象のXMLの方は完成しましたがcssがさっぱりで、XMLとxslだけなら提出出来るのですが、レイアウトが整わず、止まっています。boxやblock、z-index、floatで試しましたが、上手くいきません。初歩の初歩ですが、ヒントを教えていただきたいです。よろしくお願いします。
XMLは

<title1>
	<title2>
		<word1>文章１</word1>
		<word2>文章２</word2>
	</title2>
	<title2>
		<word1>文章１</word1>
		<word2>文章２</word2>
	</title2>
	<title2>
		<word1>文章１</word1>
		<word2>文章２</word2>
	</title2>
</title1>

cssは以下の通りです。悩んだのですが、全く出来ません。

title1{
	display:block;
	width:230pt;
	height:220pt;
	background-color:rgb(200,200,200);
	padding:18pt;
	font-weight:bold;
	font-size:18pt;
	text-align:left;

}
title2{
	display:inline-block;
	vertical-align:middle;
	width:180pt;
	height:30pt;
	background-color:rgb(255,069,000);
	padding:18pt;
	margin:5px;
	font-weight:normal;
	font-size:12pt;
	text-align:center;

}
word1{
	display:inline-block;
	vertical-align: middle;
	width:250pt;
	height:50pt;
	background-color:rgb(255,204,51);
	padding:18pt;
	margin:5px;
	font-weight:normal;
	font-size:12pt;
	text-align:center;

}
word2{
	display:block;
	width:180pt;
	height:30pt;
	background-color:rgb(204,255,51);
	padding:18pt;
	margin:5px;
	font-weight:normal;
	font-size:12pt;
	text-align:center;
}
コード

レイアウトのイメージは以下の通りです。
![イメージ説明]WIDTH:456

追記
すみません、これです。

![イメージ説明]WIDTH:519

追記２
XMLです。すみません、忘れていたのですが、xslで変換しています…

<cars>
	<car>
		<name>乗用車</name>
		<price>150</price>
	</car>
	<car>
		<name>トラック</name>
		<price>500</price>
	</car>
	<car>
		<name>オープンカー</name>
		<price>200</price>
	</car>
</cars>

xslが

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="xml" encoding="Shift_JIS" />
	<!-- 文書 -->
	<xsl:template match="/">
		<xsl:processing-instruction name="xml-stylesheet">
		 type="text/css" href="sample.css"
		</xsl:processing-instruction>
		<root>
			<xsl:apply-templates select="cars" />
		</root>
	</xsl:template>
	<!-- 車リスト -->
	<xsl:template match="cars">
		<cars>車リストを処理しました。</cars>
		<xsl:apply-templates select="car" /><!-- 次の変換対象を指定 -->
	</xsl:template>
	<!-- 車 -->
	<xsl:template match="car">
		<car>車を一台消しました。</car>
		<xsl:apply-templates select="name" /> <!--次の変換対象を指定 -->
		<xsl:apply-templates select="price" /><!-- 次の変換対象を指定 -->
	</xsl:template>
	<xsl:template match="name">
		<name>車名を処理しました。</name>
	</xsl:template>
	<xsl:template match="price">
		<price>価格を処理しました。</price>
	</xsl:template>
</xsl:stylesheet>

変換後のxmlが

		 type="text/css" href="sample.css"
		?>
<root><cars>車リストを処理しました。</cars><car>車を一台消しました。</car><name>車名を処理しました。</name><price>価格を処理しました。</price><car>車を一台消しました。</car><name>車名を処理しました。</name><price>価格を処理しました。</price><car>車を一台消しました。</car><name>車名を処理しました。</name><price>価格を処理しました。</price></root>
コード

です。質問に際し、重要なところを書き忘れてしまい申し訳ありません。

Answer 1

ヒントということはコードは載せない方がいいのでしょうか...？

このレイアウトであれば、すべての要素display:block;で問題ありません。
それと、background-colorで色がつく部分は「width + padding（heightの同様）」の値だということを理解すれば解決するかと思います。

ちなみに下記のような感じでいいのですよね？
![イメージ説明]WIDTH:600

Comments

[yamanoharu0129]

回答ありがとうございます。イメージは画像のもので合っています。申し訳ありませんが、コードを教えていただきたいです。title1と2だけでやった時は重なったのですが、複数になった途端に重ならなくなったので、親要素の関係かとは思ったのですが、理由が理解できません。よろしければ教えていただきたいです。すみません。

[rossi46hiro]

下記のコードでいけると思います。

---------------------------------------------------------------
title1{
display: block;
width: 460px;
background-color: rgb(200,200,200);
padding: 20px;
font-weight: bold;
font-size: 18pt;
text-align: left;
}

title2{
display: block;
width: 410px;
background-color: rgb(255,069,000);
padding: 20px;
margin: 5px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}

word1{
display: block;
width: 360px;
background-color: rgb(255,204,51);
padding: 20px;
margin: 5px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}

word2{
display: block;
width: 360px;
background-color: rgb(204,255,51);
padding: 20px;
margin: 5px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}
---------------------------------------------------------------

>title1と2だけでやった時は重なったのですが、複数になった途端に重ならなくなったので、親要素の関係かとは思ったのですが、理由が理解できません。

んーこの挙げて頂いたコードだとtitle1と2だけの状態でも崩れる感じだと思うのですが...

崩れている原因を挙げると「親要素より子要素の横幅、高さが大きい」というのが原因となってます。
widthは下記の値の関係性を見てもらえれば理解できるかと。
わかりやすくtitle1を横500pxにしています。(普段ptを使わないのでpxにしてしまいました)
title1{ width: 460px; padding: 20px; }
title2{ width: 410px; padding: 20px; margin: 5px; }
word1{ width: 360px; padding: 20px; margin: 5px; }
word2{ width: 360px; padding: 20px; margin: 5px; }

高さは、この場合heightを指定せずにpaddingの上下の値を調整するのがいいかと思います。

[yamanoharu0129]

度々申し訳ありません。大きさを調節しつつ何度もそのコードから試しているのですが、重なりません。marginとpaddingのtopとbottomの調節も試しましたが、上手くいきません。理解力不足過ぎで、すごく申し訳ありませんが、教えていただけませんでしょうか。すみません。

[rossi46hiro]

まず下記を教えて頂けますでしょうか？
・どのような環境か（OS、ブラウザの種類とVersion）

当方、MacOS10.10、Chrome43なのですが問題なさそうです。

[yamanoharu0129]

お手数おかけしてすみません。
windows7、IEの最新版です。Chrome43でも試しました。
title1の縦幅も上手くいかないです。

[rossi46hiro]

んーおかしいですね...
IEは解釈の違いで崩れることがありますが、同じChromeでも崩れているとは
（このコードならばIEでも崩れないと思うのですが）
私のほうで挙げたCSSだとどの様に表示されているのでしょう？
スクショでも張って頂けたら幸いです。

[yamanoharu0129]

問題に追記しました。何度も申し訳ありません。

[rossi46hiro]

ん、ごめんなさい、どこでしょう？

[yamanoharu0129]

すみません。つけられてませんでした。

[rossi46hiro]

んーなんででしょう...
当方のwidows7のIE11、Chrome43でも問題なさそうです。
スクショだと要素の中身が変わっているようなので念のためもう一度xmlを挙げてもらってもいいですか？
まるで親子要素になっていないような感じなので

[yamanoharu0129]

追記しました。すみません。重要なところを抜いていました…。xsl変換をしています。全て追記しました。変換後のxmlでやっていました…本当に申し訳ありません。

[rossi46hiro]

ありがとうございます！
なるほど、念のため変換後のXMLに当てているCSSも挙げてもらっていいですか？
それで変換後のXMLをイメージしているレイアウトにしたいわけですよね？

[yamanoharu0129]

はい。cssは、教えていただいたコードそのままです。
title1はcars。title2はcar。word1

[yamanoharu0129]

途中で投稿してしまいました。word1はname。word2がpriceです。学校の課題なので、なんとなくそのまま乗せ辛くて、ややこしくしてすみませんでした。

[rossi46hiro]

なるほど、となると変換後のxmlの構造の問題ですね。
どの様な課題なのかわからないので何とも言えないのですが、変換後のxmlの構造を変えるのはダメですか？(=xslを修正する)

[yamanoharu0129]

xmlとxslは指定のもので、授業で出されたものです。cssの授業ではないので、レイアウトの多少の崩れは大丈夫だそうですが、cssだけを自分で作って提出という形です。
これのcarsとcarだけの変換とcssでのレイアウトが、授業の中で練習として出ましたが、そちらは上手く行きました。carsとcarだけなら重なっていたので、同じ要領で出来ると思ったのですが…
授業資料では、このxmlとxslのコードとcssをいじれば、イラスト通りになるとありました。まだ、自分でxslを修正したりするところまではやっていないので、課題は基本的に、xmlとxslともに指定で、変換後のxslの見本も授業資料にあります。何度も申し訳ありません。

[rossi46hiro]

うーん、こんがらがってきたので、一度整理させて下さい。
【課題】
・「変換後」のxmlのレイアウト（前後でレイアウトを合わせる必要は無い？）
・レイアウトは上で挙がっているもの
【条件】
・CSSのみを修正する

こんな感じで間違いないですか？

[yamanoharu0129]

はい。間違いないです。書き方がややこしくて申し訳ありません。

[rossi46hiro]

では、これでいかがでしょうか。
IEで確認していないので、もしかしたら崩れているかもしれませんが...
また、下記のCSSは決して褒められるようなやり方ではありません。
（かなり無理矢理やってます...）
XMLが固定なのであれば課題はクリアできるかと思いますが、この方法だと要素内の文章が増えると崩れます、それでもよろしければ

----------------------------------------------------------------
root{
width: 500px;
background-color: rgb(200, 200, 200);
}

cars{
display: block;
padding: 20px;
font-weight: bold;
font-size: 18pt;
}

car{
display: block;
background-color: rgb(255,069,000);
padding: 20px;
height: 180px;
margin: 5px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}

name{
display: block;
background-color: rgb(255,204,51);
padding: 20px;
margin: -160px 20px 5px 20px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}

price{
display: block;
background-color: rgb(204,255,51);
padding: 20px;
margin: 5px 20px 30px 20px;
font-weight: normal;
font-size: 12pt;
text-align: center;
}
----------------------------------------------------------------

[yamanoharu0129]

上手く行きました。無理のないやり方とxmlを変えて出来る様にも、自分でやってみたいと思います。
色々ややこしいことを言ってしまってすみませんでした。
何度も回答を頂き本当にありがとうございました。