Profile/Portfolio
Profile/Portfolio
Product/Diary
Product/Diary
Application
Application
Brand/Business
Brand/Business
スポンサーリンク

コーポレートサイトのサンプル１

Brand/Business
この記事を書いた人
AYA
AYA

HTML / CSS / JavaScript による、シンプルなサイトデザインとコーディング例を紹介しています。サイト制作(コーディング)承ります。

AYAをフォローする
スポンサーリンク

イメージ

＞＞＞　https://www.ayakoazami.site/CorporateSiteSample1/

コーディング単価

1ページ： ５万円

コード

ディレクトリ構成

CorporateSiteSample1
　├　CSS
　│　　└ style.css
　├　img
　│　　├ camera.jpg
　│　　├ office-computer.jpg
　│　　├ office1.jpg
　│　　├ office2.jpg
　│　　├ office3.jpg
　│　　├ social-media.jpg
　│　　└ teamwork.jpg
　└　index.html

HTML（index.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>Corporate Site</title>
  <meta name="description" content="">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>


<body>
  <header id="header">
    <div class="inner wrapper">
      <a href="#"><h1 class="site-title">NAME</h1></a>
      <nav>
        <ul>
          <li><a href="#news">NEWS</a></li>
          <li><a href="#about">ABOUT</a></li>
          <li><a href="#business">BUSINESS</a></li>
          <li><a href="company">COMPANY</a></li>
        </ul>
      </nav>
    </div>
    <a href="#" class="contact">お問い合わせ</a>
  </header>


  <main>
    <div id="mainvisual">
      <img src="img/office1.jpg" alt="">
    </div>


    <section id="news" class="wrapper">
      <h2 class="section-title">
        <span class="en">NEWS</span>
        <span class="ja">ニュース</span>
      </h2>

      <ul class="list">
        <li>
          <div class="date-area">
            <time datetime="2021-01-01">2021.01.01</time>
            <span>NEWS</span>
          </div>
          <p>タイトルタイトルタイトルタイトル</p>
        </li>
        <li>
          <div class="date-area">
            <time datetime="2022-01-01">2022.01.01</time>
            <span>PRESS</span>
          </div>
          <p>タイトルタイトルタイトルタイトル</p>
        </li>
        <li>
          <div class="date-area">
            <time datetime="2023-01-01">2023.01.01</time>
            <span>NEWS</span>
          </div>
          <p>タイトルタイトルタイトルタイトル</p>
        </li>
      </ul>
    </section>


    <section id="about">
      <div class="img">
        <img src="img/teamwork.jpg" alt="">
      </div>

      <div class="text">
        <h2 class="section-title">
          <span class="en">ABOUT</span>
          <span class="ja">私たちについて</span>
        </h2>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </section>


    <section id="business" class="wrapper">
      <h2 class="section-title">
        <span class="en">BUSINESS</span>
        <span class="ja">事業内容</span>
      </h2>

      <div class="flex">
        <div class="left">
          <div class="item">
            <p class="title">運営・マーケティング</p>
            <img src="img/office2.jpg" alt="">
          </div>
          <div class="item">
            <p class="title">Webメディア事業</p>
            <img src="img/camera.jpg" alt="">
          </div>
        </div>
        <div class="right">
          <div class="item">
            <p class="title">企画・制作プロモーション</p>
            <img src="img/office-computer.jpg" alt="">
          </div>
          <div class="item">
            <p class="title">ソーシャル・SNS運用</p>
            <img src="img/social-media.jpg" alt="">
          </div>
        </div>
      </div>
    </section>

    <section id="company" class="wrapper">
      <div class="text">
        <h2 class="section-title">
          <span class="en">COMPANY</span>
          <span class="ja">会社情報</span>
        </h2>

        <dl class="info">
          <dt>会社名</dt>
          <dd>○○○○○○</dd>
          <dt>所在地</dt>
          <dd>東京都新宿区○○xx-xx-xx</dd>
          <dt>代表</dt>
          <dd>○○○○</dd>
          <dt>設立</dt>
          <dd>2020年1月1日</dd>
          <dt>資本金</dt>
          <dd>x,xxx,xxx円</dd>
          <dt>事業内容</dt>
          <dd>運営・マーケティング</dd>
          <dd class="add">Webメディア事業</dd>
          <dd class="add">企画・制作プロモーション</dd>
          <dd class="add">ソーシャル・SNS運用</dd>
        </dl>
      </div>

      <div class="img">
        <img src="img/office3.jpg" alt="">
      </div>
    </section>
  </main>


  <footer id="footer">
    <div class="wrapper">
      <div class="flex">
        <div class="site-title">
          <p>NAME</p>
        </div>
        <div class="info">
          <p>
            Name Inc.<br>
            xx-xx-xx ○○ Shinjuku-ku<br>
            Tokyo, Japan xxx-xxxx
          </p>
          <p>xx-xxxx-xxxx</p>
        </div>
      </div>
      <p class="copyright">&copy; Name Inc.</p>
    </div>
  </footer>
  
</body>
</html>

CSS（style.css）

@charset "utf-8";

html {
  font-size: 100%;
}

body {
  background-color: #f0f0f0;
  color: #000;
  font-size: 0.875rem;
}

a {
  color: #000;
  text-decoration: none;
}

img {
  min-width: 100%;
  vertical-align: bottom;
}

li {
  list-style: none;
}

.site-title {
  font-size: 2.25rem;
  letter-spacing: 0.3em;
  margin-right: 60px;
}

.section-title {
  font-weight: normal;
  line-height: 1;
  margin-bottom: 50px;
}

.section-title::after {
  content: "";
  width: 40px;
  height: 1px;
  display: block;
  background-color: #000;
}

.section-title .en {
  display: block;
  font-size: 2.25rem;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
}

.section-title .ja {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 36px;
}

.wrapper {
  width: 100%;
  max-width: 1032px;
  padding: 0 16px;
  margin: 0 auto;
}

/* header */
#header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .inner {
  display: flex;
  align-items: center;
}

#header .inner ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

#header .contact {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 0.75rem;
  /* display: inline-block; */
}

#header .contact:hover {
  background-color: #333;
}

/* mainvisual */
#mainvisual {
  margin-bottom: 120px;
}

#mainvisual img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
}

/* NEWS */
#news {
  margin-bottom: 120px;
}

#news .list {
  display: flex;
  justify-content: space-between;
}

#news .list li {
  width: calc(100% / 3);
  border-right: 1px solid #000;
  padding: 10px 20px;
}

#news .list li:first-child {
  padding-left: 0;
}

#news .list li:last-child {
  border-right: none;
  padding-right: 0;
}

#news .list .date-area {
  margin-bottom: 16px;
}

#news .list li .date-area span {
  width: 50px;
  height: 20px;
  line-height: 20px;
  background-color: #000;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 16px;
  font-size: 0.75rem;
}

/* about */
#about {
  display: flex;
  margin-bottom: 120px;
  gap: 70px;
}

#about .img {
  width: 55%;
}

#about .img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

#about .text {
  width: 45%;
  padding-top: 180px;
}

#about .text p {
  line-height: 2.2;
}

/* business */
#business {
  margin-bottom: 120px;
}

#business .flex {
  display: flex;
  justify-content: space-between;
  /* gap: 60px; */
  padding: 0 10%;
}

#business .flex .left {
  width: 46%;
  margin-top: 100px;
}

#business .flex .right {
  width: 46%;
}

#business .flex .item {
  margin-bottom: 50px;
}

#business .flex .item img {
  width: 368px;
  height: 232px;
  object-fit: cover;
}

#business .flex .item:last-child {
  margin-bottom: 0;
}

#business .flex .title {
  font-weight: bold;
  margin: 0 0 10px 18px;
  position: relative;
}

#business .flex .title::before {
  content: "";
  width: 8px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: -18px;
}

/* company */
#company {
  height: 750px;
  display: flex;
  align-items: center;
  position: relative;
}

#company .text {
  width: 55%;
  background-color: #fff;
  padding: 100px 8% 100px 6%;
  position: absolute;
  top: 0;
  left: 0;
}

#company .img {
  width: 53%;
  position: absolute;
  top: 115px;
  right: 0;
} 

#company .img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

#company .info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#company .info dt {
  width: 20%;
  margin-top: 10px;
}

#company .info dt:first-of-type {
  margin-top: 0;
}

#company .info dd {
  width: 80%;
  margin-top: 10px;
}

#company .info dd:first-of-type {
  margin-top: 0;
}

#company .info .add {
  margin-left: 20%;
}

/* footer */
#footer {
  background-color: #fff;
  padding-bottom: 20px;
}

#footer .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
}

#footer .flex .site-title {
  margin-right: 0;
  font-weight: bold;
}

#footer .copyright {
  font-size: 0.625rem;
}

/* SP */
@media (max-width: 900px) {
  .site-title {
    margin: 8px 0;
  }

  .section-title {
    margin-bottom: 34px;
  }

  .section-title .ja {
    margin-bottom: 24px;
  }

  /* header */

  #header .inner {
    flex-direction: column;
    align-items: flex-start;
  }

  #header .contact {
    display: none;
  }

  /* mainvisual */
  #mainvisual {
    margin: 15px 0 80px 0;  }

    /* news */
  #news {
    margin-bottom: 90px;
  }

  #news .list {
    flex-direction: column;
  }

  #news .list li {
    width: 100%;
    border-right: none;
    padding: 10px 0;
    margin-bottom: 20px;
  }

  #news .list li:last-child {
    margin-bottom: 0;
  }

  /* about */
  #about {
    margin-bottom: 80px;
    flex-direction: column;
  }

  #about .img {
    width: 100%;
    margin-bottom: 30px;
  }

  #about .img img {
    height: 300px;
  }

  #about .text {
    width: 100%;
    padding: 0 16px;
  }

  /* business */
  #business {
    margin-bottom: 80px;
  }

  #business .flex {
    flex-direction: column;
    padding: 0;
  }

  #business .flex .left {
    width: 100%;
    margin: 0 0 30px 0;
  }

  #business .flex .right {
    width: 100%;
  }

  #business .flex .item {
    text-align: center;
    margin-bottom: 30px;
  }

  #business .flex .title {
    text-align: left;
  }

  /* company */
  #company {
    height: auto;
    flex-direction: column;
    position: static;
  }

  #company .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
    position: static;
  }

  #company .img {
    width: 100%;
    padding: 0;
    position: static;
  }

  #company .info {
    flex-direction: column;
  }

  #company .info dt {
    width: 100%;
    margin-top: 20px;
  }

  #company .info dd {
    width: 100%;
    padding-left: 14px;
    margin-top: 5px;
  }

  #company .info dd:first-of-type {
    margin-top: 5px;
  }

  #company .info .add {
    margin-left: 0;
  }

  /* footer */
  #footer .flex {
    flex-direction: column;
    align-items: flex-start;
  }

  #footer .flex .site-title {
    margin-bottom: 10px;
  }
}

GitHubページ

HTML / CSS

＞＞＞　https://ayakoazami.github.io/CorporateSiteSample1/

コメント

タイトルとURLをコピーしました