前へ|次へ|戻る

html に css を 適応する その３

cssの雰囲気が得られたので次に、色々と見ていきたいと思います。 まずこれを見てもらいましょうここ、何か 見えますか、少々不細工ですが我慢してください、これから上部右上にロゴその 下部にイメージのリンク案内の図その下部は縦に３分割但し左脚の下部には脚注 部分を含んだ状態にしたいのです。”css”を 導入したものがこの場所にあります。これでどうにかこうに か体裁ができました。調整は必要ですが。”ゐん同図”では調整必要であるなぜかは 不明だが

これを考慮して次のTOPページを作成してみましたこれです。一部分色があいませんコードは同 じなのですがウエーブセーフカラーを使用していないためと思われます。Mac で は #ffaaaa この機器 でも カラー コード #ffaaaa ですが合いません。全体を （つまり画像の背景を）#ffb0b0 に変更すると割合良くなる、暫定は”#ffb0b0” にしておく。この場合”e-Mac”では 区別が付くくらいわかるが良しとしよう。 （諦める；残念だが！）もう少し単純化を試みる css を 徹底的に 削ることに する見えなくなるかもしれないが？枠だけを設定したい。こ れの結果はここで見ることができます、今回”html”、 と”css”を それぞれ表示しよう。まず、html からみていこう、



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-JP">

<title>css type008</title>

<style type="text/css" media="screen">
@import url("btest009.css ");
</style>

<meta name="robots" content="ALL" />
<meta name="description" content="steal" />
<meta name="keywords" content="steal" />
</head>

<body>
<!-- ページ上部の右寄せ部分の開始   UP Start-->
<div class="mainNav">
<!-- Pimg src="top02ffaaaa.png" width="368"
height="59" border="0" alt="welcom" Q -->
最初の右上の図面  org area w:368 ; h:59
<!-- org w:368 ; h:59  -->
<br />
図 の 並び 複数可能
<img src="item001w82h24.png" alt="bag" border="0"
width="82" height="24" name="bag" />
<img src="item04.png" alt="item04" border="0" width="82"
height="24" name="item04" />
<img src="item02.png" alt="item02" border="0"width="82" height="24"
name="item02" />
</div>
<!-- UP End br 改行にて 配列 終わり   -->
<!-- 外枠の開始  OUTER Begin  -->
<div class="container">

<!--  左側の 開始 left colum Start -->
<div class="leftColumn">
<img src="left01.png" width="238" height="307"
alt="left_img" /><br>
左の図 フッター より上
<!-- フッター部分   開始 -->
<p id="footer">

<br />
<br />
フッター その１designed and built by にゃんたろう
<br />
<br />
フッター その２photo of Beads items copyright Cri Cri masa nyanta
</p>
<p>
 
</p>
<!-- フッター部分   終了 -->

</div>
<!--  左側の 終了 left colum End -->

<!--  真中の 開始 center colum Start -->
<div class="midColumn">
<h3 style="margin-bottom: 0px;">midColumn  真中<h3></h3>
<p style="margin-top: 0px;">
  真中 その１
<br />
<br />
  真中 その２
<br />
<br />
  真中 その３
</p>
</div>
<!--  真中の終了 right colum Start -->

<!--  右側の 開始 right colum Start -->
<div class="rightColumn">
<h2>右側の御案内<h2></h2>
<p style="margin-top: 0px;">
<h4>右側その１</h4>
右側その１の説明
<br />

</p>
<h4>右側その２</h4>
<p style="margin-top: 0px;">
右側その２の説明
</p>
<h4>class <h4></h4>
<p style="margin-top: 0px;">
右側その１と右側その２は <h4> </h4>
</p>
<h5><h5></h5></h5>
<br />
<h5><h5>の領域</h5></h5>
</div>
<!--  右側の 終了 right colum End -->
</div>
<!-- 外枠の終了  OUTER End   -->

</body>

</html>

上記が”html”ファイルの内容です。次は”css”の内容です。

body {
	margin: 0px;
	padding: 0px;
	background-color: #ffb0b0;
	color: #333333;
	font-family: verdana, geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

/* navigation */

.mainNav {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 98%;
	text-align: right;
	margin: 0px;
	padding: 0px 0px 5px 0px;
	background-color: #ffb0b0;
}


.container {
	position: relative;
	top: 123px; 
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px 0px 50px 0px;
}


.leftColumn {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 30px 10px 10px 10px;
	background-color: #ffb0b0;
	width: 33%; /* set desired width */
	/* begin IE5 fudge */
  	voice-family: "\"}\""; 
	voice-family:inherit;
	width:25%; /* desired width minus border and padding */
}
	/* be kind to Opera 5 rule */
	html>body .leftColumn {   
	width: 25%;		  
}				  



.midColumn {
	position: absolute; /* must be absolute to avoid positioning issue in Mac IE 5.1 */
	top: 0px;
	left: 33%;
	margin: 0px;
	padding: 30px 10px 10px 10px;
	background-color: #ffb0b0;
	width: 36%; /* set desired total width incl borders and padding */
	/* begin IE5 fudge */
  	voice-family: "\"}\""; 
	voice-family:inherit;
	width:30%; /* desired content width */
}
	/* be kind to Opera 5 rule */
	html>body .leftColumn { 
	width: 30%;
}


.rightColumn {
	position: absolute;
	top: 0px;
	left: 66%;
	right: 0px;
	bottom: 0px;
	margin: 0px 0px 0px 10px;
	padding: 30px 10px 10px 10px;
	width: 36%; /* set desired width */
	/* begin IE5 fudge */
  	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 30%; /* desired width minus border and padding */
}
	/* be kind to Opera 5 rule */
	html>body .leftColumn { 
	width: 30%;
}


p#footer {
	margin: 0px 10px 0px 5px;
	font-size: 0.8em;
/*	line-height: 12px; */
	line-height: 21px;
}


h1 {
	font-family: Arial, Verdana, Arial Narrow, sans-serif;
	color: #666;
}

h4 {
	font-family: Verdana, Arial Narrow, sans-serif;
	color: #963;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

h5 {
	font-family: Verdana, Arial Narrow, sans-serif;
	color: #663;
	margin: 0px;
	padding: 0px;
	font-size: 10px;
}

と言う具合いになっている。ここでこれらは全てぱくってきた ものであるので、最初から考えるととても思い付かないものは、ありが たく追記してある。つまり、そのままということです。ネットワークの 世界に感謝、感謝、感謝です。拝！

	/* begin IE5 fudge */
  	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 30%; /* desired width minus border and padding */
}
	/* be kind to Opera 5 rule */
	html>body .leftColumn { 
	width: 30%;
}

上記の部分はとても思い付かないし、意味もわからないが頂 いておきましょう。ここ に もう少し ましなものが あります ； コメント 削除の もの、 良ければ 一瞥 してください。

次をみる。？？

前へ|次へ|戻る
Copyright © 2004.-2007. nyantarou All Rights Reserved.