WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

5月9日の作業データ　1カラムレイアウトの作成

2025年04月クラス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1カラムレイアウトの作成</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>One-Colunm-Layout</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">サービス内容</a></li>
<li><a href="#">店舗情報</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</nav>
<main>
<div class="main-visual">
<img src="img/main.jpg" alt="">
</div><!-- /.main-visual -->


<div class="container">
<div class="wrapper">
<div class="img-box">
<img src="img/01.jpg" alt="">
</div><!-- /.img-box -->
<div class="text-box">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam officia placeat?</p>
</div><!-- /.text-box -->
</div><!-- /.wrapper -->
<div class="wrapper">
<div class="img-box">
<img src="img/02.jpg" alt="">
</div><!-- /.img-box -->
<div class="text-box">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam officia placeat?</p>
</div><!-- /.text-box -->
</div><!-- /.wrapper -->
<div class="wrapper">
<div class="img-box">
<img src="img/03.jpg" alt="">
</div><!-- /.img-box -->
<div class="text-box">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam officia placeat?</p>
</div><!-- /.text-box -->
</div><!-- /.wrapper -->
<div class="wrapper">
<div class="img-box">
<img src="img/03.jpg" alt="">
</div><!-- /.img-box -->
<div class="text-box">
<h2>Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam officia placeat?</p>
</div><!-- /.text-box -->
</div><!-- /.wrapper -->
</div><!-- /.container -->
</main>
<footer>
<p><small>&copy; 2020-2025 FELICA</small></p>
</footer>
</body>
</html>


style.css

@charset "utf-8";

/* リセット部分 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}

/* レイアウト部分 */
header{
background-color: #57564b;
color: #FFF;
text-align: center;
padding: 30px 0;
}
.g-nav{
background-color: #dfe6ec;
height: 50px;
}
.g-nav>ul{
display: flex;
justify-content: center;/* 水平方向の位置指定 */
align-items: center;/* 垂直方向の位置指定、heightの指定が必須 */
height: 50px;
gap: 0 40px;/* 縦、横の余白指定 */
}
.g-nav a{
color: #222;
font-weight: bold;
padding: 10px 18px;
}
.g-nav a:hover{
text-decoration: underline solid #e31966 5px;
text-underline-offset: 5px;/* 下線と文字の間隔 */
}
main{
width: 960px;
margin: 120px auto;
}
.main-visual{
margin-bottom: 120px;
}
.wrapper{
display: flex;
margin-bottom: 50px;
flex-direction: row;
justify-content: space-between;
}
.wrapper:nth-of-type(even){
flex-direction: row-reverse;
}
.img-box{
width: 400px;
}
.text-box{
width: 500px;
padding: 20px;
}

footer{
text-align: center;
padding: 20px 0;
}