【はじめてのHTML/CSS】 準備～HTML/CSSの作り方～アップロード こうやれば、必ずできます！
HTML/CSS設計図
ソースコード
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Data</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/papillon.png">
</head>
<body>
<header>
<div class="wrapper header">
<h1>Rei住宅情報</h1>
<nav>
<ul class="header-ul">
<li><a href="#">お気に入り</a></li>
<li><a href="#">物件</a></li>
<li><a href="#">会社</a></li>
<li><a href="#">検索条件</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrapper">
<div class="section-box">
<h2>神戸市中央区の賃貸住宅[賃貸マンション・アパート]情報 検索結果</h2>
<div class="kensu">4 <span>件</span></div>
</div>
<!--1件目-->
<div class="property-group">
<div class="property-header">
<h3>ザ・レイチャンネル神戸タワー</h3>
</div><!--property-header-->
<div class="property-body">
<div class="property-object">
<img src="img/house1.jpg" alt="house1">
</div>
<div class="property-element">
<table class="tablebox">
<tbody>
<tr>
<td class="box col1">
<div class="price">32万円</div>
<div>管理費 30000円</div>
</td>
<td class="box col2">
<div> <span>敷</span>-</div>
<div><span>礼</span>64万円</div>
</td>
<td class="box col3">
<div>3LDK</div>
<div>81.6m <sup>2</sup></div>
<div>南</div>
</td>
<td class="box col3">
<div>マンション</div>
<div>築6年</div>
</td>
<td class="box col4">
<div>兵庫県神戸市中央区******町１</div>
</td>
</tr>
</tbody>
</table>
<div class="access">
<div>ＪＲ東海道本線/神戸駅 歩5分</div>
<div>神戸高速鉄道東西線/西元町駅 歩3分</div>
<div>地下鉄海岸線/みなと元町駅 歩9分</div>
</div>
</div><!-- property-element -->
</div><!--property-body-->
</div><!--property-group-->
<!--2件目-->
<div class="property-group">
<div class="property-header">
<h3>ザ・レイチャンネルマンション</h3>
</div><!--property-header-->
<div class="property-body">
<div class="property-object">
<img src="img/house2.jpg" alt="house2">
</div>
<div class="property-element">
<div class="detailbox">
<table class="tablebox">
<tbody>
<tr>
<td class="box col1">
<div class="price">13万円</div>
<div>管理費 10000円</div>
</td>
<td class="box col2">
<div> <span>敷</span>-</div>
<div> <span>礼</span>30万円</div>
</td>
<td class="box col3">
<div>3LDK</div>
<div>85m <sup>2</sup></div>
<div>南東</div>
</td>
<td class="box col3">
<div>マンション</div>
<div>築36年</div>
</td>
<td class="box col4">
<div>兵庫県神戸市中央区******町6</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="access">
<div>阪急神戸線/春日野道駅 歩6分</div>
<div>ＪＲ東海道本線/灘駅 歩11分</div>
<div>阪神本線/春日野道駅 歩12分</div>
</div>
</div><!-- property-element -->
</div><!--property-body-->
</div><!--property-group-->
<!--3件目-->
<div class="property-group">
<div class="property-header">
<h3>コスモレイチャンネル</h3>
</div><!--property-header-->
<div class="property-body">
<div class="property-object">
<img src="img/house3.jpg" alt="house3">
</div>
<div class="property-element">
<div class="detailbox">
<table class="tablebox">
<tbody>
<tr>
<td class="box col1">
<div class="price">19.8万円</div>
<div>管理費 20000円</div>
</td>
<td class="box col2">
<div> <span>敷</span>-</div>
<div> <span>礼</span>-</div>
</td>
<td class="box col3">
<div>3LDK</div>
<div>87.52m <sup>2</sup></div>
<div>東</div>
</td>
<td class="box col3">
<div>マンション</div>
<div>築36年</div>
</td>
<td class="box col4">
<div>兵庫県神戸市中央区******町4</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="access">
<div>地下鉄西神・山手線/県庁前駅 歩2分</div>
<div>ＪＲ東海道本線/元町駅 歩8分</div>
<div>神戸高速鉄道東西線/花隈駅 歩9分</div>
</div>
</div><!-- property-element -->
</div><!--property-body-->
</div><!--property-group-->
<!--4件目-->
<div class="property-group">
<div class="property-header">
<h3>ハイムレイチャンネル</h3>
</div><!--property-header-->
<div class="property-body">
<div class="property-object">
<img src="img/house4.jpg" alt="house4">
</div>
<div class="property-element">
<div class="detailbox">
<table class="tablebox">
<tbody>
<tr>
<td class="box col1">
<div class="price">18.9万円</div>
<div>管理費 10000円</div>
</td>
<td class="box col2">
<div> <span>敷</span>-</div>
<div> <span>礼</span>19.9万円</div>
</td>
<td class="box col3">
<div>3LDK</div>
<div>57.42m <sup>2</sup></div>
<div>南</div>
</td>
<td class="box col3">
<div>マンション</div>
<div>築4年</div>
</td>
<td class="box col4">
<div>兵庫県神戸市中央区******町5</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="access">
<div>ＪＲ東海道本線/三ノ宮駅 歩17分</div>
<div>阪急神戸線/神戸三宮駅 歩15分</div>
<div>ＪＲ東海道本線/元町駅 歩10分</div>
</div>
</div><!-- property-element -->
</div><!--property-body-->
</div><!--property-group-->
</div><!-- wrapper -->
</main>
<aside>
<div class="wrapper">
<h2>INFORMATION</h2>
<img src="img/家アイコン.png" alt="アイコン">
<p>Reiチャンネルもよろしくね！</p>
<div class="btn">
<a href="https://rei-excel-channnel.com/youtubevbatop/">ブログも見てね！</a>
</div>
</div>
</aside>
<footer>
<small>©Reiチャンネル</small>
</footer>
</body>
</html>CSS
style.css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
/* display: block; */
}
.wrapper{
width: 800px;
margin: 0 auto;
text-align: center;
}
/* */
/* header */
/* */
header{
background-color: #5AAE08;
}
header .header{
padding: 30px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header h1{
font-size: 35px;
color: white;
}
.header-ul{
display: flex;
background-color: #6cc708;
border-radius: 20px;
padding: 7px;
}
.header-ul li{
padding: 0 20px;
}
.header-ul li a{
color: white;
}
.header-ul li a:hover{
color: #FFF191;
}
/* */
/* main */
/* */
.section-box{
margin: 35px 0;
}
.section-box h2{
font-size: 25px;
}
.section-box .kensu{
font-size: 30px;
font-weight: bold;
color: orange;
text-align: left;
}
.section-box span{
font-size: 14px;
color:black;
}
/* */
/* property-group */
/* */
.property-group:hover{
background-color: rgba(245, 241, 227, 0.522);
opacity: 0.7;
}
.property-header{
background-color: #fff191;
border-top: 5px solid gray;
padding: 20px;
}
.property-header h3{
font-size: 20px;
color: blue;
text-align: left;
}
.property-body{
margin: 20px 0;
display: flex;
padding-bottom: 20px;
}
.property-element{
padding: 0 20px;
}
.property-object img{
width: 200px;
}
/* */
/* property-group */
/* table */
/* */
.property-element table.tablebox{
padding: 10px 0;
border-top: 1px dotted gray;
border-bottom: 1px dotted gray;
}
.property-element table.tablebox .box{
padding: 0 7px;
height: 95px;
text-align: left;
}
table.tablebox .col1{
width: 100px;
border-right: 1px dotted gray;
}
table.tablebox .col2{
width: 90px;
border-right: 1px dotted gray;
}
table.tablebox .col3{
width: 75px;
border-right: 1px dotted gray;
}
table.tablebox .col4{
width: 220px;
}
.property-element .access{
margin: 10px 0;
text-align: left;
}
table.tablebox .col1 .price{
font-size: 20px;
color: orange;
font-weight: bold;
}
/* */
/* aside */
/* */
aside{
padding: 10px;
background-color: #5AAE08;
}
aside h2{
color: white;
font-size: 30px;
margin-bottom: 10px;
}
aside img{
width: 50px;
}
aside .btn{
margin: 20px;
/* margin-bottom: 30px; */
}
aside .btn a{
padding: 10px;
/* margin-bottom: 20px; */
background-color: white;
border-radius: 20px;
}
aside .btn a:hover{
color: green;
font-weight: bold;
}
/* */
/* footer */
/* */
footer{
text-align: center;
margin: 20px 0;
}スクレイピングテスト
以下の動画の VBAのurlに指定してお使いください
【テーブルデータ用】 https://rei-excel-channnel.com/scrapingtabledata/
コメント