サイト制作入門編を始めていきましょう。
この記事の目次
教材データのダウンロードとデモサイト
ファイルの構造
index.html
├ css
│ └ style.css
├ images
│ ├ 画像1
│ ├ 画像2
│ ├ 画像3
│ ├ ・
│ ├ ・
│ └ ・
エメットでHTMLのひな形の作成とstyle.cssにパスを通す
エメットでHTMLのひな形を作成する
ではまずHTMLを書く際に最低限必要なHTMLのひな形を作成します。 HTMLファイル内で”！”（エクスペラメーションマーク）とEnterキーもしくは Tabキーを押してください。
CSSファイルのパスを通す
HTMLファイルにstyle.cssのパスを通しましょう。
また通した後はパスが通っているかブラウザで表示をして確認しましょう。
今回はbodyタグにbackground-colorを適用して確認します。
bodyタグのbackground-colorは確認用なので、確認後は消してください。
さて、これでHTMLにCSSファイルのパスを通すことができました。
全体のコード
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIFE STYLE.</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- ヘッダー -->
<header>
<div class="logo">
<img src="images/logo_bk.jpg" alt="">
</div>
<div class="navigation">
<nav>
<ul class="nav-list">
<li><a href="#life">LIFE</a></li>
<li><a href="#style">STYLE</a></li>
<li><a href="#photo">PHOTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- ヘッダー end-->
<!-- メインコンテンツ -->
<main>
<!-- ファーストビュー -->
<div class="first-view">
<img src="images/first_view.jpg" alt="LIFE STYLEトップイメージ">
</div>
<!-- ファーストビュー end-->
<section>
<!-- 2カラム要素 -->
<div class="columns" id="life">
<div class="column__block">
<img src="images/post01.jpg" alt="">
</div>
<div class="text column__block">
<p class="sub-ttl">LIFE</p>
<h2>ライフ</h2>
<p>ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。</p>
</div>
</div>
<!-- 2カラム要素 end-->
<!-- 2カラム要素 -->
<div class="columns order" id="style">
<div class="text column__block">
<p class="sub-ttl">STYLE</p>
<h2>スタイル</h2>
<p>ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。ここにテイストが入ります。</p>
</div>
<div class="column__block">
<img src="images/post02.jpg" alt="">
</div>
</div>
<!-- 2カラム要素 end-->
</section>
<!-- 写真 start -->
<section id="photo">
<p class="sub-ttl text-center">PHOTO</p>
<h2 class="text-center">写真</h2>
<!-- 繰り返し同じ要素 start -->
<div class="archive">
<article>
<img src="images/post03.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post04.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post05.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post06.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post07.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
<article>
<img src="images/post08.jpg" alt="">
<h3>好きな仲間たちと生きる</h3>
<p class="date">2022.06.09</p>
</article>
</div>
<!-- 繰り返し同じ要素 end -->
<a href="#" class="btn">もっと見る</a>
</section>
<!-- 写真 end -->
</main>
<!-- メインコンテンツ end-->
<!-- フッター start-->
<footer>
<img src="images/logo_wh.png" alt="LIFE STYLEロゴ">
<small>© LIFE STYLE.Inc.</small>
</footer>
<!-- フッター end-->
</div>
</body>
</html>CSSコード
/* 共通パーツ start */
body{
font-size: 16px;
letter-spacing: .1em;
color: #707070;
}
h2{
font-size: 32px;
margin-bottom: 14px;
font-weight: 500;
}
h3{
font-size: 16px;
font-weight: 500;
}
.sub-ttl{
font-size: 20px;
margin-bottom: 14px;
}
nav{
font-size: 18px;
}
.container{
max-width: 1920px;
padding: 0 50px;
margin: 0 auto;
}
section{
max-width: 1100px;
margin: 0 auto 150px;
padding: 0 50px;
}
.text-center{
text-align: center;
}
/* 共通パーツ end */
/* ヘッダー・ファーストビュー start */
header{
display: flex;
justify-content: space-between;
align-items: center;
margin: 50px 0;
}
.navigation ul{
display: flex;
}
.navigation ul li{
margin-right: 60px;
}
.navigation ul li:last-child{
margin-right: 0;
}
.first-view{
width: 100vw;
margin: 0 calc(50% - 50vw) 150px;
}
/* ヘッダー・ファーストビュー end */
/* 2カラムセクション start */
.columns{
display: flex;
justify-content: space-between;
align-items: center;
}
.column__block{
width: 45%;
}
/* 2カラムセクション end */
/* 3カラムセクション start */
.archive{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
article{
width: 30%;
min-width: 227px;
margin: 0 7px 42px;
}
article img{
margin-bottom: 14px;
}
article h3{
margin-bottom: 7px;
}
.btn{
display: block;
width: 200px;
text-align: center;
border: 1px solid #707070;
margin: 60px auto 0;
padding: 13px 0;
}
/* 3カラムセクション end */
/* フッター start */
footer{
background-color: #707070;
color: #fff;
text-align: center;
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 70px 0;
}
footer img{
margin: 0 auto 40px;
}
/* フッター end */
@media screen and (max-width: 930px) { /* ウインドウサイズ930px以下の設定 */
section{
padding: 0;
}
.container{
padding: 0 24px;
}
header{
flex-direction: column;
margin: 30px 0 56px;
}
.logo{
margin-bottom: 14px;
}
.navigation ul li {
margin-right: 40px;
}
.first-view{
margin-bottom: 60px;
}
.columns{
flex-direction: column;
}
.column__block{
width: 100%;
max-width: 450px;
}
.text{
max-width: 450px;
margin-right: auto;
margin-left: auto;
}
.order{
margin-top: 126px;
}
.order .column__block:first-child{
order: 2;
}
.column__block{
margin-bottom: 28px;
}
article {
width: 35%;
min-width: auto;
}
.sub-ttl{
margin-bottom: 7px;
}
}
@media(max-width:600px){ /* ウインドウサイズ600px以下の設定 */
section{
margin-top: 100px;
}
article,
article img {
width: 100%;
}
footer{
padding: 35px 0;
}
}リセットCSS
@charset"utf-8";*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}li{list-style:none;}ul{padding:0;margin:0;}a{text-decoration:none;color:inherit;}リセットCSSは使いやすいので構いませんが、今回はこちらを使います。
style.css
では次のレッスンでそれぞれのセクションごとに一緒にサイト制作を行っていきましょう。
この記事の目次