キャプチャ

【日記】Ya〇ooをトレース by HTML,CSS(5)


野方です。

自宅のネット環境がお亡くなりになり、2週間トレースをお休みしておりました。

前置きはさておき。

前回からcssとHTMLの両方を使い、トレースを始めました。だいぶ時間が空いてしまったけれど、がんばります。

本日の制限時間:1時間

前回2時間で移行含めて作業を始めたのですが、全く進まず。今回の1時間は短いような気がします…。

結果

1時間(トータル6時間目)かけた結果は、この通りです。

広告、トップニュース、あなたへのおすすめ、など、枠が増えました。

前回よりも進んだように見えますが、(特に上のほうが)全く進んでいません。

次にソースです。まずはHTMLから。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="Yafoo!Japan">
<meta name="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="yafoo.css">
</head>
<body>
<form>
	<a href="1.html" title="ホームページに設定する" id="homepage">ホームページに設定する</a>
	<a href="1.5.html" id="help">ヘルプ</a>
	<p class="buttomLine1"> </p>

	<div class="title">
		<p id="aprLink">
			<br>
			<a href="2.html">yafoo!BB</a>
			<br>
			<a href="3.html">こども版</a>
			<br>
			<a href="4.html">アプリ版</a>
			<br>
		</p>
		<table class="titleAndLinkLeft">
			<tr>
				<td>
					<a href="5.html">
						<img border="0" src="四角.png" alt="トラベル">
						<p class="linkDiscription">旅行</p>
					</a>
				</td>
				<td>
					<a href="6.html">
						<img border="0" src="四角.png" alt="ヤフオク!">
						<p class="linkDiscription">オークション<p>
					</a>
				</td>
				<td>
					<a href="7.html">
						<img border="0" src="四角.png" alt="ショッピング">
						<p class="linkDiscription">ショッピング</p>
					</a>
				</td>
			</tr>
		</table>
		<b id="title">yafoo!</b>
		<table class="titleAndLinkRight">
			<tr>
				<td>
					<a href="8.html">
						<img border="0" src="四角.png" alt="プレミアム">
						<p class="linkDiscription">プレミアム<p>
					</a>
				</td>
				<td>
					<a href="9.html">
						<img border="0" src="四角.png" alt="カード">
						<p class="linkDiscription">クレジットカード</p>
					</a>
				</td>
				<td>
					<a href="10.html">
						<img border="0" src="四角.png" alt="メール">
						<p class="linkDiscription">メール</p>
					</a>
				</td>
			</tr>
		</table>
	</div>

	<div class="search">
		<p id="searchCategory">
			ウェブ 画像 動画 知恵袋 地図 リアルタイム 求人 一覧
		</p>
		<input type="text" name="search" id="searchBox"> 
		<input type="submit" value="検索" id="searchButton">
	</div>
	<p id="advertisementText">
		<a href="11.html">▶タイムセール開催中、送料無料の500円均一ほか</a> 
		<a href="12.html">▶ネット予約であいおいの人気メニューやドリンクがお得</a>
	</p>

	<div class="mainService">
		<p class="buttomLine1">主なサービス<a href="58.html">一覧</a></p>
		<a href="31.html">ショッピング</a>
		<br>
		<a href="32.html">オークション</a>
		<br>
		<a href="33.html">LOHATO</a>
		<br>
		<a href="34.html">旅行</a>
		<br>
		<a href="35.html">二休.jp</a>
		<br>
		<a href="36.html">二休.jpレストラン</a>
		<br>
		<a href="37.html">ニュース</a>
		<br>
		<a href="38.html">天気・災害</a>
		<br>
		<a href="39.html">スポーツナビ</a>
		<br>
		<a href="40.html">経済</a>
		<br>
		<a href="41.html">テレビ</a>
		<br>
		<a href="42.html">CAO!</a>
		<br>
		<a href="43.html">ゲーム</a>
		<br>
		<a href="44.html">Yafoo!モバゲ</a>
		<br>
		<a href="45.html">地図</a>
		<br>
		<a href="46.html">経路情報</a>
		<br>
		<a href="47.html">Retme</a>
		<br>
		<a href="48.html">クラシ</a>
		<br>
		<a href="49.html">不動産</a>
		<br>
		<a href="50.html">自動車</a>
		<br>
		<a href="51.html">ブログ</a>
		<br>
		<a href="52.html">Trell</a>
		<br>
		<a href="53.html">パートナ</a>
		<p class="buttomLine2" align="center">お気に入り</p>
		<a href="54.html">book.jpn</a>
		<br>
		<a href="55.html">映画</a>
		<br>
		<a href="56.html">占い</a>
		<br>
		<a href="57.html">ロコ</a>
		<br>
	</div>

	<div class="news">
		<p id="newsCategory">
			<a href="23.html">ムービー</a>
			<a href="24.html">ニュース</a>
			<a href="25.html">エコノミ</a>
			<a href="26.html">エンタ</a>
			<a href="27.html">スポーツ</a>
			<a href="28.html">国内</a>
			<a href="29.html">国際</a>
			<a href="30.html">IT・科学</a>
		</p>
		<p class="textSmall">22:10更新</p>
		<ul id="newsList">
			<li><a href="13.html">ニュース1</a></li>
			<li><a href="14.html">ニュース2</a></li>
			<li><a href="15.html">ニュース3</a></li>
			<li><a href="16.html">ニュース4</a></li>
			<li><a href="17.html">ニュース5</a></li>
			<li><a href="18.html">ニュース6</a></li>
			<li><a href="19.html">ニュース7</a></li>
			<li><a href="20.html">ニュース8</a></li>
		</ul>
		<p id="topNews">
			<img id="topNews" border="0" src="四角.png" alt="記事">
			<a id="topNews">説明文
			<br>620日
			<br>提供会社</a>
		</p>
		<p>
			<a href="21.html">もっと見る</a>
			<a href="22.html">トピック一覧</a>
		</p>
	</div>

	<div class="advertisement">
		advertisement space
	</div>

	<div class="subNews">
		<b>あなたへのおすすめ</b>
		<p class="article">
			<img class="subNews" border="0" src="四角.png" alt="記事">
			<a>おすすめ1
			<br>提供元</a>
		</p>
	</div>
</form>
</body>
</html>

こちらはほぼ変わっていません。

次はCSSです。

*{
	width: 92%;
	margin: 0 auto;
	font-size: 4px;
}
img{
	width: 50px;
	height: 50px;
}
a#homepage{
	position: absolute;
	left: 15%;
}
a#help{
	position: relative;
	left: 92%;
}
div.title{
	position: absolute;
	height: 20%;
}
p#aprLink{
	position: relative;
	height: 20%;
}
table.titleAndLinkLeft{
	position: relative;
	bottom: 20%;
	right: 20%;
	height: 60%;
}
table.titleAndLinkRight{
	position: relative;
	bottom: 80%;
	left: 20%;
	height: 60%;
}
td{
	width: 10px;
}
b#title{
	position: absolute;
	top: 20%;
	left: 45%;
	color: red;
	font-size: 100px;
}
div.search{
	padding: 1.5%;
	position: absolute;
	top:15%;
	left: 14.5%;
	width: 68%;
	height: 6%;
	background-color: #99CCFF;
	text-align: center;
}
p#searchCategory{
	position: relative;
	bottom: 25%;
	right: 6%;
	font-size: 50px;
}
input#searchBox{
	width: 50%;
	height: 80%;
}
input#searchButton{
	padding: 1px;
	width: 10%;
	height: 80%;
	font-size: 30px;
}
p#advertisementText{
	position: absolute;
	top: 27.5%;
	width: 80%;
	height: 5%;
	text-align: center;
}
div.mainService{
	border: solid 1px #99CCFF;
	position: absolute;
	top: 31%;
	right: 70%;
	width:15%;
	text-align: left;
	font-size: 60px;
}
div.news{
	border: solid 1px #99CCFF;
	padding: -10px;
	position: absolute;
	top: 31%;
	left: 31%;
	width: 40%;
	text-align: left;
}
p#newsCategory{
	width: 100%;
	text-align: center;
	font-size: 2px;
	font-style: oblique;
}
ul#newsList{
	font-size: 2px;
}
p#topNews{
	border: solid 1px #000000;
	position: absolute;
	top: 15%;
	left: 58%;
	width: 40%;
	height: 60%;
}
a#topNews{
	position: relative;
	top: -30%;
}
img#topNews{
	position: relative;
	width: 100%;
	height: 80%;
}
div.advertisement{
	border: solid 1px #000000;
	padding: -10px;
	position: absolute;
	top: 31%;
	left: 72%;
	width: 15%;
	height: 40%;
}
div.subNews{
	border: solid 1px #99CCFF;
	padding: -10px;
	position: absolute;
	top: 63%;
	left: 31%;
	width: 40%;
}
img.subNews{
	width: 25%;
	height: 25%;
}
.textCenter{
	text-align: center;
}
.textRight{
	text-align: right;
}

.textSmall{
	font-size: 1px;
}
.buttomLine1{
	border-bottom: solid 1px #99CCFF;
}
.buttomLine2{
	border-top: solid 1px #99CCFF;
	border-bottom: solid 1px #99CCFF;
}

位置変更に注力していたため、position関係がかなり変わったと思われます。

困ったこと

では今回もトレースをしながら、困ったことを報告します。

①CSS/positionがうまくいかない

前回同様、やはりうまく指定できないposition。いいサイトを見つけないとな、と思いつつ全く見つからない。どうすればよいでしょうか…。

トレースをやって思ったこと

今回あまり進まなかったのですが、原因としては場所に執着しすぎであると気が付きました。僕は1つのことに集中しすぎるのが良くないですね…。次回は位置だけでなく物を増やすことを目標に頑張ります。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

頑張ります…!

野方

phperを目指すど文系頭の一応類人猿。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。