top of page

デモページ１　ソースコード

HTML

CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>株式会社kk建設</title>
<script></script>
</head>
<body>
  <!-- header -->
  <header>
    <div class="header_column">
      <div class="header_logo"><a href="#"><img src="img/logo.png" width="100%"></a></div>
      <div class="header_menu">
        <div class="header_menu_a"><a href="#recruit">リクルート</a></div>
        <div class="header_menu_a"><a href="#service">事業紹介</a></div>
        <div class="header_menu_a"><a href="#works">施工実績</a></div>
        <div class="header_menu_a"><a href="">建材関連</a></div>
        <div class="header_menu_a"><a href="">会社概要</a></div>
        <div class="header_menu_a"><a href="">お知らせ</a></div>
      </div>
      <div class="header_contact">
        <a href="">
          <div><img src="img/Icon material-email.png"></div>
          <div>お問い合わせ</div>
        </a>
      </div>
    </div>
  </header>
  <main>
    <!-- section01 -->
    <section class="sec01">
      <div class="sec01_top">
        <div class="sec01_top_h">地球にやさしく<br>未来をつくる</div>
      </div>
      <div class="sec01_info">
        <div class="sec01_info_a">お知らせ</div>
        <table>
          <tr>
            <th>2020.09.09</th>
            <th><div class="sec01_table_mark">お知らせ</div></th>
            <td>記事が入ります。記事が入ります。</td>
          </tr>
          <tr>
            <th>2020.09.09</th>
            <th><div class="sec01_table_mark">地域の皆様へ</div></th>
            <td>記事が入ります。記事が入ります。</td>
          </tr>
        </table>
      </div>
    </section>
    <!-- section02 -->
    <a id="recruit"></a>
    <section class="sec02">
      <div class="sec02_h">リクルート</div>
      <div class="sec02_sub"><small>RECRUIT</small></div>
      <div class="sec02_ab">
        <div class="sec02_a">
          <div class="sec02_a_h">正社員を募集しています</div>
          <div class="sec02_a_p">未経験でも働きやすい社内環境をご用意致します。<br>テキストが入ります。この文章はダミーです。テキストが入ります。この文章はダミーです。テキストが入ります。この文章はダミーです。テキストが入ります。この文章はダミーです。</div>
          <div class="sec02_a_btn"><div><a href="">READ MORE ▶</a></div></div>
        </div>
        <div class="sec02_b">
          <img src="img/sec02_puzzle.jpg" width="100%">
        </div>
      </div>
    </section>
    <!-- section03 -->
    <a id="service"></a>
    <section class="sec03">
      <div class="sec03_h">事業紹介</div>
      <div class="sec03_sub"><small>SERVICE</small></div>
      <div class="sec03_h2">上下水道工事・土木工事は株式会社KK建設へ</div>
      <div class="sec03_p">当社は舗装工事をはじめ上下水道工事をメインに請け負っています。<br>テキストが入ります。この文章はダミーです。当社は舗装工事をはじめ上下水道工事をメインに請け負っています。</div>
      <div class="sec03_ab">
        <div class="sec03_a">
          <div class="sec03_a_h">上下水道工事</div>
          <div><img src="img/sec03_a.jpg" width="100%"></div>
        </div>
        <div class="sec03_b">
          <div class="sec03_a_h">舗装工事</div>
          <div><img src="img/sec03_b.jpg" width="100%"></div>
        </div>
      </div>
      <div class="sec03_btn"><div><a href="">READ MORE ▶</a></div></div>
    </section>
    <!-- section04 -->
    <a id="works"></a>
    <section class="sec04">
      <div class="sec04_h">施工実績</div>
      <div class="sec04_sub"><small>WORKS</small></div>
      <div class="sec04_abc">
        <div class="sec04_a">
          <div class="sec04_a_title">上下水道工事</div>
          <div><img src="img/sec04_a.jpg" width="100%"></div>
          <div class="sec04_a_h">下水道局より表彰を受けました</div>
          <div class="sec04_a_p">＃タグ</div>
        </div>
        <div class="sec04_b">
          <div class="sec04_a_title">上下水道工事</div>
          <div><img src="img/sec04_b.jpg" width="100%"></div>
          <div class="sec04_a_h">下水道局より表彰を受けました</div>
          <div class="sec04_a_p">＃タグ</div>
        </div>
        <div class="sec04_c">
          <div class="sec04_a_title">上下水道工事</div>
          <div><img src="img/sec04_c.jpg" width="100%"></div>
          <div class="sec04_a_h">下水道局より表彰を受けました</div>
          <div class="sec04_a_p">＃タグ</div>
        </div>
      </div>
      <div class="sec04_btn"><div><a href="">READ MORE ▶</a></div></div>
    </section>
    <!-- section05 -->
    <section class="sec05">
      <div class="sec05_ab">
        <div class="sec05_a">
          <a href="">
            <div class="sec05_a_h">建材関連</div>
            <div class="sec05_a_sub"><small>MATERIALS</small></div>
          </a>
        </div>
        <div class="sec05_b">
          <a href="">
            <div class="sec05_a_h">会社概要</div>
            <div class="sec05_a_sub"><small>ABOUT</small></div>
          </a>
      </div>
    </section>
    <!-- section06 -->
    <section class="sec06">
      <div class="sec06_h">お問い合わせ</div>
      <div class="sec06_ab">
        <div class="sec06_a">
          <div class="sec06_a_p">電話/FAX</div>
          <div>TEL: 03-1234-5678</div>
          <div>FAX: 03-4567-1234</div>
        </div>
        <div class="sec06_b">
          <div class="sec06_b_p">フォームからのお問い合わせ</div>
          <div class="sec06_b_btn"><a href=""><div>お問い合わせ　＞</div></a></div>
      </div>
    </section>
  </main>
  <!-- footer -->
  <footer>
    <div class="footer_ab">
      <div class="footer_a">
        <div><img src="img/footer_logo.png" width="100%"></div>
        <div class="footer_a_p">〒123-0045 東京都東京架空1-1-1</div>
        <div class="footer_a_p">TEL: 03-1234-5678</div>
        <div class="footer_a_p">FAX: 03-4567-1234</div>
      </div>
      <div class="footer_b">
        <div class="footer_b_h">サイトメニュー</div>
        <div class="footer_b_menu">
          <div class="footer_b_a"><a href="#recruit">リクルート</a></div>
          <div class="footer_b_a"><a href="#service">事業紹介</a></div>
          <div class="footer_b_a"><a href="#works">施工実績</a></div>
          <div class="footer_b_a"><a href="">建材関連</a></div>
          <div class="footer_b_a"><a href="">会社概要</a></div>
          <div class="footer_b_a"><a href="">お知らせ</a></div>
        </div>
      </div>
    </div>
    <div class="footer_bottom">
      <div>Copyright © 株式会社KK建設 All Rights Reserved.</div>
    </div>
  </footer>
</body>
</html>

a {
  color: inherit; 
  text-decoration: none;
}

/* header */
.header_column {
  display: flex; 
}
.header_logo {
  width: 30%; 
  margin: auto 0; 
}
.header_menu {
  padding: 0 0 0 10vw; 
  width: 60%; 
  display:flex;
  color:#707070; 
}
.header_menu_a {
  width: 16.6%; 
  margin:auto; 
  font-size: min(1.2vw, 15px);
}
.header_contact {
  margin: 1.5vw; 
  padding: 1.5vw; 
  width: 10%; 
  font-size: min(1.2vw, 15px);
  color: white; 
  text-align: center;
  background-color: #5168b0;
}
.header_contact img {
  width: 20%; 
}

/* section01 */
.sec01_top { 
  padding: 15vw 0; 
  background-image: url(img/sec01_earth.jpg);
  background-size: cover;
}
.sec01_top_h {
  margin: auto; 
  text-align: center;
  color: #707070;
  font-size: min(4vw, 50px);
}
.sec01_info {
  padding: 0 5vw; 
  margin: 3% 0; 
  height: 10vw; 
  display: flex;
  font-size: min(1.3vw, 20px);
}
.sec01_info_a {
  width: 20%; 
  margin: auto; 
  text-align: center;
  color:#707070; 
}
.sec01_info table {
  width: 80%; 
  text-align: center;
  border-left: 1px solid grey; 
}
.sec01_info th {
  width: 15%; 
  padding-left: 2vw;
  color:#707070; 
}
.sec01_info td {
  padding-left: 2vw;
  width: 70%; 
  text-align: left;
} 
.sec01_table_mark {
  background-color: #e66089;
  color: white; 
  font-weight: normal;
}

/* section02 */
.sec02 {
  padding: 5vw; 
}
.sec02_h {
  font-size: min(2vw, 30px);
  font-weight: bold;
  text-align: center;
}
.sec02_sub {
  margin-bottom: 2vw;
  text-align: center;
  color:#707070; 
}
.sec02_ab {
  display:flex;
}
.sec02_a {
  width: 50%; 
}
.sec02_a_h {
  font-weight: bold;
  margin: 1vw 0; 
}
.sec02_a_p {
  margin: 1vw 0; 
}
.sec02_a_btn {
  margin: 2vw;
  width: min(25vw, 300px);
  height:min(5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; 
  background-color: #66b837;
  font-size: min(2vw, 20px);
}
.sec02_b {
  width: 50%; 
}

/* section03 */
.sec03 {
  padding:5vw; 
}
.sec03_h {
  font-size: min(2vw, 30px);
  font-weight: bold;
  text-align: center;
}
.sec03_sub {
  text-align: center;
  color:#707070; 
}
.sec03_h2 {
  margin: 2vw 0 1vw 0; 
  text-align: center;
  font-weight: bold;
  font-size: min(1.5vw, 20px);
}
.sec03_p {
  text-align: center;
  font-size: min(1.2vw, 15px);
}
.sec03_ab {
  display: flex; 
}
.sec03_a {
  margin: 1vw; 
  width: 50%; 
  text-align: center;
}
.sec03_a_h {
  font-size: min(1.5vw, 20px);
  font-weight: bold;
  margin: 2vw 0; 
}
.sec03_b {
  margin: 1vw; 
  width: 50%; 
  text-align: center;
}
.sec03_btn {
  margin: 0 auto;
  width: min(25vw, 300px);
  height:min(5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; 
  background-color: #66b837;
  font-size: min(2vw, 20px);
}

/* section04 */
.sec04 {
  padding: 5%; 
}
.sec04_h {
  font-size: min(2vw, 30px);
  font-weight: bold;
  text-align: center;
}
.sec04_sub {
  color:#707070; 
  text-align: center;
  margin-bottom: 5vw;
}
.sec04_abc {
  display: flex;
}
.sec04_a {
  margin: 2vw; 
  width: 30%; 
}
.sec04_a_title {
  padding:.5vw; 
  font-size: min(1.5vw, 20px);
  background-color:#b7b6b6; 
}
.sec04_a_h {
  font-size: min(1.5vw, 20px);
  font-weight: bold;
  margin: 1vw 0; 
}
.sec04_a_p {
  font-size: min(1.2vw, 15px);
}
.sec04_b {
  margin: 2vw; 
  width: 30%; 
}
.sec04_c {
  margin: 2vw; 
  width: 30%; 
}
.sec04_btn {
  margin: 5vw auto 0;
  width: min(25vw, 300px);
  height:min(5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; 
  background-color: #66b837;
  font-size: min(2vw, 20px);
}

/* section05 */
.sec05_ab {
  display: flex;
}
.sec05_a { 
  width: 50%; 
  padding: 12vw 0;
  text-align: center; 
  background-image: url(img/sec05_a.jpg);
  background-size:cover; 
}
.sec05_a_h {
  font-weight: bold;
  font-size: min(2vw, 30px);
}
.sec05_a_sub {
  color:#707070; 
}
.sec05_b {
  width: 50%; 
  padding: 12vw 0;
  text-align: center; 
  background-image: url(img/sec05_b.jpg);
  background-size:cover; 
}

/* section06 */
.sec06 {
  padding: 5% 20%; 
  background-color: #e9e9e9;
}
.sec06_h {
  font-size: min(2vw, 30px);
  text-align: center;
  font-weight: bold;
}
.sec06_ab {
  display:flex; 
}
.sec06_a {
  width: 50%; 
}
.sec06_a_p {
  margin: 1vw 0; 
  font-size: 1.2vw;
  color:#707070;
}
.sec06_b {
  width: 50%; 
}
.sec06_b_p {
  margin: 1vw 0; 
  font-size: 1.2vw;
  color:#707070;
}
.sec06_b_btn {
  font-size: min(2vw, 20px);
  margin: 1vw 0 0;
  width: min(25vw, 300px);
  height:min(5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white; 
  background-color: #5168b0;
}

/* footer */
footer {
  background-color: #b7b6b6;
}
.footer_ab {
  padding: 3% 10%;
  display: flex;
}
.footer_a {
  width: 30%; 
}
.footer_a_p {
  font-size: 1.2vw;
  color:#707070;
}
.footer_b {
  padding-left: 2vw;
  width: 70%; 
  border-left: solid 1px #707070;
}
.footer_b_h {
  padding-top: 2vw;  
  font-size: min(2vw, 30px);
  font-weight: bold;
  color: #707070;
}
.footer_b_menu {
  font-size: min(1.5vw, 20px);
  margin: 2vw 0; 
  display: flex;
  color: #707070;
}
.footer_b_a {
  width: 16.6%; 
}
.footer_bottom {
  padding: 1vw 0; 
  text-align: center;
  background-color: #989898;
}

bottom of page