デモページ１ ソースコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>練習課題２</title>
<script></script>
</head>
<body>
<!-- header -->
<header>
<div class="header_logo"><a href="#"><img src="img/logo.png"></a></div>
<div class="header_menu">
<div class="header_menu_btn">
<a href="#concept">
<div><small>CONCEPT</small></div>
<div>コンセプト</div>
</a>
</div>
<div class="header_menu_btn">
<a href="#service">
<div><small>SERVICE</small></div>
<div>事業内容</div>
</a>
</div>
<div class="header_menu_btn">
<a href="#works">
<div><small>WORKS</small></div>
<div>制作実績</div>
</a>
</div>
<div class="header_menu_btn">
<a href="#">
<div><small>EX.DESIGN</small></div>
<div>デザイン事例</div>
</a>
</div>
<div class="header_menu_btn">
<a href="#blog">
<div><small>BLOG</small></div>
<div>ブログ</div>
</a>
</div>
</div>
<div class="header_tel"><a href="tel:03-1234-5678"><img src="img/Icon awesome-phone-alt-2.png" width="6%">03-1234-5678<br><small>平日10:00～18:00</small></a></div>
<div class="header_btn"><a href=""><img src="img/Icon material-email.png" width="30%"><br><small>お問い合わせ</small></a></div>
</header>
<main>
<!-- section01 -->
<section class="sec01">
<div class="sec01_h">法人集客にフォーカスした<br>ホームページ制作のご提案を。</div>
<div class="sec01_p">デザイン力×集客力で結果に繋げる</div>
<div class="sec01_contact">
<div class="sec01_contact_tel"><p><a href="tel:03-1234-5678"><img src="img/Icon awesome-phone-alt.png" width="8%"> 03-1234-5678<br><small>平日10:00～18:00</small></a></p></div>
<div class="sec01_contact_btn"><p><a href="">お問い合わせ <white>▶</white></a></p></div>
</div>
</section>
<!-- section02 -->
<a id="concept"></a>
<section class="sec02">
<div class="sec02_column">
<div class="sec02_lr"><center><img src="img/sec02_img01.png"></center></div>
<div class="sec02_rl">
<div class="sec02_rl_h"><p>高クオリティのホームページを<br>お手頃価格でご提供</p></div>
<div class="sec02_rl_p"><p><small>平均受注単価：</small><span> 45～65 </span><small>万円</small></p></div>
</div>
</div>
<div class="sec02_txt"><small>弊社は少数精鋭で制作を進めていくため、大手の制作会社と遜色ない高クオリティなホームページを低コストで制作できます。デザインからコーディング・開発まで基本的に全ての工程を自社内で行うため、無駄な中間コストがかかりません。またデザインが良いだけではなく、集客に繋がるようなご提案をいたします。</small></div>
<div class="sec02_more"><a href=""><center>詳しく見る ▶</center></a></div>
</section>
<!-- section03 -->
<section class="sec03">
<div class="sec03_lr">
<div>他の制作会社様との違い</div>
<div class="sec03_lr_h"><p><center>LOGOの3つの特徴</center></p></div>
<div><small>集客に特化したクオリティの高いデザインを安価な制作費用でご提供します。</small></div>
</div>
<div class="sec03_rl">
<div class="sec03_column">
<div class="sec03_rl_n">01</div>
<div class="sec03_rl_rl">
<div class="sec_03_rl_rl_h">集客を最優先</div>
<div class="sec_03_rl_rl_p">特徴についての文章特徴についての文章特徴についての文章特徴についての文章特徴についての文章</div>
</div>
</div>
<div class="sec03_column">
<div class="sec03_rl_n">02</div>
<div class="sec03_rl_rl">
<div class="sec_03_rl_rl_h">安価な制作費用</div>
<div class="sec_03_rl_rl_p">特徴についての文章特徴についての文章特徴についての文章特徴についての文章特徴についての文章</div>
</div>
</div>
<div class="sec03_column">
<div class="sec03_rl_n">03</div>
<div class="sec03_rl_rl">
<div class="sec_03_rl_rl_h">戦略的なデザイン</div>
<div class="sec_03_rl_rl_p">特徴についての文章特徴についての文章特徴についての文章特徴についての文章特徴についての文章</div>
</div>
</div>
</div>
</section>
<!-- section04 -->
<a id="service"></a>
<section class="sec04">
<div class="sec04_h"><p><center>WEB集客をトータルサポート</center></p></div>
<div class="sec04_p">デザインからコーディング・開発まで基本的に全ての工程を自社内で行うため、無駄なコストはかかりません。またデザインが良いだけでなく、集客に繋がるようなご提案をいたします。</div>
<div class="sec04_column">
<div class="sec04_lrr">
<div><center><img src="img/sec04_img01.png" width="100%"></center></div>
<div class="sec04_lrr_h">ホームページ製作事業</div>
<div class="sec04_lrr_sh">WEBSITE DESIGN</div>
<div class="sec04_lrr_p">事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章</div>
<div class="sec04_more"><a href=""><center>詳しく見る ▶</center></a></div>
</div>
<div class="sec04_rlr">
<div><center><img src="img/sec04_img02.png" width="100%"></center></div>
<div class="sec04_lrr_h">SEO対策事業</div>
<div class="sec04_lrr_sh">SEARCH ENGINE MARKETING</div>
<div class="sec04_lrr_p">事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章</div>
<div class="sec04_more"><a href=""><center>詳しく見る ▶</center></a></div>
</div>
<div class="sec04_rrl">
<div><center><img src="img/sec04_img03.png" width="100%"></center></div>
<div class="sec04_lrr_h">WEB運用事業</div>
<div class="sec04_lrr_sh">WEB OPERATION</div>
<div class="sec04_lrr_p">事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章事業内容についての文章</div>
<div class="sec04_more"><a href=""><center>詳しく見る ▶</center></a></div>
</div>
</div>
</section>
<!-- section05 -->
<a id="works"></a>
<section class="sec05">
<div class="sec05_h"><p><center>WEB集客をトータルサポート</center></p></div>
<div class="sec05_p"><p>BtoBのコーポレートサイトを中心に様々なWEBサイトの制作実績がございます。集客に繋がるデザインで御社の売上UPに貢献する提案をします。</p></div>
<div class="sec05_slider">
<div class="sec05_slider_arrow"><img src="img/sec05_arrow.png" width="10%"></div>
<div class="sec05_column">
<div><img src="img/sec05_img01.png" width="100%"></div>
<div><img src="img/sec05_img02.png" width="100%"></div>
<div><img src="img/sec05_img03.png" width="100%"></div>
</div>
</div>
<div class="sec05_box">
<div><b>下倉架空税理士事務所 様</b></div>
<div><small><br>ろご区にある税理士事務所のコーポレートサイト。クライアントの要望とそれに対しての対応やポイントなどに関する文章が入ります。クライアントの要望とそれに対しての対応やポイントなどに関する文章が入ります。クライアントの要望とそれに対しての対応やポイントなどに関する文章が入ります。</small></div>
</div>
<div class="sec05_btn1"><a href=""><center>詳しく見る ▶</center></a></div>
<div class="sec05_btn2"><a href=""><center>デザインから別の事例を探す <white>▶</white></center></a></div>
</section>
<!-- section06 -->
<a id="blog"></a>
<section class="sec06">
<div class="sec06_box">
<table>
<tr>
<th><a href="">2020/00/00</a></th>
<td><a href="">タイトルテキストリンクタイトルテキストリンクタイトルテキストリンク</a></td>
</tr>
<tr>
<th><a href="">2020/00/00</a></th>
<td><a href="">タイトルテキストリンクタイトルテキストリンクタイトルテキストリンク</a></td>
</tr>
<tr>
<th><a href="">2020/00/00</a></th>
<td><a href="">タイトルテキストリンクタイトルテキストリンクタイトルテキストリンク</a></td>
</tr>
<tr>
<th><a href="">2020/00/00</a></th>
<td><a href="">タイトルテキストリンクタイトルテキストリンクタイトルテキストリンク</a></td>
</tr>
</table>
</div>
</section>
<!-- section07 -->
<section class="sec07">
<div class="sec_07_p">お気軽にお問い合わせください！<br>サクッと概算見積書を作成します</div>
<div class="sec07_contact">
<div class="sec07_contact_tel"><div><a href="">03-1234-5678<br><small>平日10:00～18:00</small></a></div></div>
<div class="sec07_contact_btn"><div><a href="">お問い合わせ <white>▶</white></a></div></div>
</div>
</section>
</main>
<!-- footer -->
<footer>
<div class="footer_logo"><a href="#"><img src="img/logo2.png"></a></div>
<div class="footer_address">〒123-456 東京都架空区架空１－１－１ ＫＡＫＵビル２Ｆ</div>
<div class="footer_allright">©Copyright LOGO All rights reserved.</div>
</footer>
</body>
</html>
CSS
a {
color : inherit;
text-decoration:none;
}
a:hover {
color: rgb(160, 160, 160);
}
/****************/
/*header*/
header {
display: flex;
justify-content: center;
text-align: center;
}
.header_logo {
width: 20%;
margin : auto;
}
.header_menu {
padding: 0 0 0 10vw;
width: 55%;
display: flex;
justify-content: center;
width: 50%;
font-size: min(1.4vw, 20px);
}
.header_menu_btn {
width: 20%;
margin: auto;
}
.header_tel {
width: 20%;
margin: auto;
font-size: min(1.5vw, 20px);
}
.header_tel img {
margin: 1vw 1vw 0;
}
.header_btn {
margin: auto 0;
padding: 1%;
width: 10%;
color: white !important;
background-color: #20868A;
font-size: 1.4vw;
}
/****************/
/*section01*/
.sec01 {
padding: 10vw 5vw;
text-align: center;
background-image: url(img/sec01_img.png);
background-size: cover;
}
.sec01_h {
padding: 0 1%;
width: min(70vw, 1200px);
margin: 0 auto 0 0;
background-color: rgba(255, 255, 255, 0.5);
font-size: min(5vw, 60px);
}
.sec01_p {
width: min(40vw, 400px);
margin: 2vw 0;
background-color: rgba(255, 255, 255, 0.5);
font-size: min(2vw, 20px);
}
.sec01_contact {
color: white !important;
display: flex;
}
.sec01_contact_tel {
width: min(20vw, 300px);
margin: 1vw;
height:min(6vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
font-size: min(2vw, 20px);
}
.sec01_contact_btn {
width: min(20vw, 300px);
margin: 1vw;
height:min(6vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #20868A;
font-size: min(2vw, 20px);
}
/****************/
/*section02*/
.sec02 {
padding: 10vw 5vw 0 20vw;
margin: 10px 0;
background-image: url(img/sec02_concept.png);
background-size: contain;
background-repeat: no-repeat;
font-size: 1.5vw;
}
.sec02_column {
display: flex;
}
.sec02_lr {
width: 50%;
}
.sec02_lr img {
width: 100%;
}
.sec02_rl {
width: 50%;
padding: 5vw 0vw 5vw 2vw;
}
.sec02_rl_h {
margin: auto;
width: 30vw;
height:6vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
color: white;
text-align: end;
font-size: 1.8vw;
}
.sec02_rl_p span {
font-size: 30px;
}
.sec02_more {
margin: 2vw auto;
width: min(20vw, 300px);
height:min(4vw, 50px);
font-size: min(1.8vw,20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
background-color: white;
}
/****************/
/*section03*/
.sec03 {
padding: 5%;
margin: 10px 0;
display: flex;
background-image: url(img/sec03_bg.png);
background-size: cover;
}
.sec03_column {
display: flex;
}
.sec03_lr {
width: 35%;
font-size: 1.4vw;
}
.sec03_lr_h {
width: 20vw;
margin: 1vw;
height:4vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
color: white;
font-size: 2vw;
}
.sec03_rl {
width: 65%;
padding-left: 1vw;
}
.sec03_rl_n {
margin-bottom: 5%;
width: 10%;
font-size: 3vw;
color: grey;
}
.sec03_rl_rl {
width: 90%;
}
.sec_03_rl_rl_h {
font-size: 2vw;
font-weight: bold;
}
.sec_03_rl_rl_p {
font-size: 1.5vw;
}
/****************/
/*section04*/
.sec04 {
margin: 10px 0;
padding: 5vw;
background-image: url(img/sec04_service.png);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
.sec04_h {
width: 30vw;
margin: 1vw;
height:4vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
color: white;
font-size: 2vw;
}
.sec04_p {
margin: 5vw 0;
font-size: 1.5vw;
}
.sec04_column {
display: flex;
font-size: 1.5vw;
}
.sec04_lrr{
margin: 1vw;
width: 33%;
}
.sec04_rlr{
margin: 1vw;
width: 33%;
}
.sec04_rrl{
margin: 10px;
width: 33%;
}
.sec04_lrr_h {
font-weight: bold;
font-size: 2vw;
}
.sec04_lrr_sh {
font-size: 1vw;
}
.sec04_lrr_p {
margin: 1vw 0 ;
font-size: 1.5vw;
}
.sec04_more {
margin: 2vw auto;
width: min(20vw, 300px);
height:min(4vw, 50px);
font-size: min(1.8vw,20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
background-color: white;
}
/****************/
/*section05*/
.sec05 {
padding: 5%;
background-image: url(img/sec05_works.png);
background-size: contain;
background-repeat: no-repeat;
}
.sec05_h {
margin: 0 0 auto auto;
width: 30vw;
height:4vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
color: white;
font-size: 2vw;
}
.sec05_p {
text-align: end;
font-size: 1.3vw;
}
.sec05_slider_arrow {
margin: 10px;
text-align: end;
}
.sec05_column {
justify-content: center;
width: 100%;
display: flex;
}
.sec05_box {
width: 50%;
margin: 0 auto;
font-size: 1.5vw;
}
.sec05_btn1 {
margin: 2vw auto;
width: min(30vw, 400px);
height:min(5vw, 60px);
font-size: min(1.8vw,20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
background-color: white;
}
.sec05_btn2 {
margin: 2vw auto;
width: min(30vw, 400px);
height:min(5vw, 60px);
font-size: min(1.8vw,20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid black;
color: white;
background-color: grey;
}
/****************/
/*section06*/
.sec06 {
padding: 5vw 8vw;
background-image: url(img/sec06_bg.png) ;
background-size: cover;
}
.sec06_box {
margin: 0 auto;
width: 70vw;
padding: 2vw 4vw;
background-color: rgba(228, 228, 228, 0.5);
}
.sec06_box table {
margin: 0 auto;
text-align: center;
font-size: min(1.5vw, 20px);
}
.sec06_box th {
padding: 1vw 2vw;
border-bottom: solid 1px rgba(128, 128, 128, 0.5);
}
.sec06_box td {
padding: 1vw 2vw;
border-bottom: solid 1px rgba(128, 128, 128, 0.5);
}
/****************/
/*section07*/
.sec07 {
padding: 5vw;
text-align: center;
background-image: url(img/sec07_bg.png);
background-size: cover;
color: white;
}
.sec_07_p {
font-size: 1.5vw;
}
.sec07_contact {
display: flex;
justify-content: center;
}
.sec07_contact_tel {
width: 15vw;
margin: 1vw;
height:6vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #192F60;
font-size: 1.5vw;
}
.sec07_contact_btn {
width: 15vw;
margin: 1vw;
height:6vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #20868A;
font-size: 1.5vw;
}
/****************/
/*footer*/
footer {
padding: 3%;
text-align: center;
background-color: #192F60;
color: white;
}
.footer_address {
margin: 1vw;
font-size: 1.5vw;
}
.footer_allright {
font-size: 1vw;
}