☰
リリイログ Written by Yumi Nakamura

KROWl模写課題3-データマーケティング支援ツールの紹介サイト-模写過程

プログラミング 積み上げ

KROWLさんのCODING コーディング課題に取り組んでいます。

模写課題3でも、クラス名の付け方が違いますが、とりあえず、現時点で表現できた所まで、記録しておきます。完成型に、近づくために、次にどうすれば良いのか、何が間違って辿り着けなかったのか、後に振り返りできます。同じデザインカンプ から、コーデイングするのにも、人それぞれのやり方がありますが、一つの参考にしていただければと思います。

KROWl模写課題3-支援ツールの紹介サイト-

11月8日到達　表示状況

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/custom_reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color:bisque;">
  <header class="page-header">
    <div class="header-top">
      <h1><img class="header-logo" src="../images/logo-datamania.png" alt="DataMania"></h1>
      <p class="header-catch"><span>データマーケティングの</span> <br><span>未来をつくる</span></p>
      <p class="header-banner">今なら<br>初月無料</p>
    </div>
    <div class="header-nav bg-header-nav">
      <div class="header-nav__list">
        <ul>
        <li><a href="#">最新情報</a></li>
        <li><a href="#">サービスの特長</a></li>
        <li><a href="#">3つの強み</a></li>
        <li><a href="#">お客様の声</a></li>
      </ul></div>
      
      <div class="header-contact" style="background-color:#a9d92f"><p><a href="#">お問い合わせ</a></p></div>  
    </div>
  </header>
  <article class="main">
    <section id="news" class="common-inner bg-white"> 
      <div class="section-title"><h2 class="section-header">最新情報</h2></div>
      
      <div class="section-inner-small">
        <div class="section-inner-small__item"><span class="date">2019.08.23</span>新料金プラン「Mania 5」をリリースしました</div>
        <div class="section-inner-small__item"><span class="date">2019.08.08</span>Android OS版のアプリケーションにおける決済機能の不具合について</div>
        <div class="section-inner-small__item"><span class="date">2019.07.14</span>関東テレビの情報番組「サックリ！」にData Mania代表の石渡が出演します</div>
      </div>
      <div class="last-news"><a href="#">過去の情報を見る</a></div>
    </section><!--/#news-->


    <!--#service-->
    <section id="service" class="common-inner bg-blue" >
      <div class="section-title"><h2 class="section-header">サービスの特徴</h2></div>
      <div class="section-inner bg-white">
        <div class="section-inner-container">
          <div class="section-inner__text">DataManiaはデータマーケティングの効率を最大化するために設計されています。<br>
            自動分析・レポート機能、ユーザー管理機能、通知機能、その他データマーケティングに必要不可欠な40の機能を、先進的で洗練されたインターフェースで利用することができます。<br>
            満を持してリリースされたバージョン2からは、忙しいマーケターのためにスマートフォンアプリ版もリリースされました。</div><!--/.section-inner__text-->
          <div class="section-inner__logo">
            <ul class="row1">
              <li><img src="images/icon-auto_analytics@2x.png" alt="" class="logo"></li>
              <li><img src="images/icon-time_management@2x.png" alt="" class="logo"></li>
              <li><img src="images/icon-alert@2x.png" alt="" class="logo"></li>
            </ul>
            <ul class="row2">
              <li><img src="images/icon-user_management@2x.png" alt="" class="logo"></li> 
              <li><img src="images/icon-auto_reporting@2x.png" alt="" class="logo"></li>
              <li><img src="images/icon-smartphone@2x.png" alt="" class="logo"></li>
            </ul> 
          </div><!--/.section-inner__logo-->
        </div><!--/.section-inner-container-->
        
        <div class="read-more"><a href="#">機能について詳しく知る</a></div>
      </div><!--/.section-inner-->
    </section>
    <!--/#service-->

    <!--#strengths-->
    <section id="strengths" class="common-inner bg-white">
      <div class="section-title"><h2 class="section-header">Data Maniaの3つの強み</h2></div>
      <div class="section-inner__item">
        <!--メデイア-->
        <div class="media">
          <figure class="media__img-wrapper">
            <img class="media__img" src="images/img-usp-01.jpg" alt="">
          </figure>
          <div class="media__body">
            <h3 class="media__title">1. データマーケティングの支援に特化</h3>
            <p class="media__text">データ分析アプリケーションは多数ありますが、データマーケティングに特化したものはData Maniaを置いて他にありません。単なる分析機能・レポーティング機能だけでなく、当社独自調査による過去のマーケティング事例を元に、最適な施策を提案します。</p>
          </div>
        </div><!--/メデイア-->
        <!--メデイア-->
        <div class="media">
          <figure class="media__img-wrapper">
            <img class="media__img" src="images/img-usp-02.jpg" alt="">
          </figure>
          <div class="media__body">
            <h3 class="media__title">2. 稼働率99.9%の自社製サーバー</h3>
            <p class="media__text">八王子と松代にそれぞれ設置された自社製のサーバーは99.9%の高稼働率を保証します。それぞれのサーバーは、相互に最適化されたアルゴリズムでデータを同期しており、万が一片方が自然災害やその他の事故で稼働できない状況になっても、サービス自体への影響は全くありません。</p>
          </div>
        </div><!--/メデイア-->
        <!--メデイア-->
        <div class="media">
          <figure class="media__img-wrapper">
            <img class="media__img" src="images/img-usp-03.jpg" alt="">
          </figure>
          <div class="media__body">
            <h3 class="media__title">3. 24時間365日対応のサポート体制</h3>
            <p class="media__text">Data Maniaは先進的な機能と洗練されたインターフェースで、マーケターの企画・立案を支援します。一方、こういったツールに不慣れなお客様にも安心してお使いいただけるよう、オペレーターが24時間365日対応可能なサポート体制を構築しています。 もしアプリケーションの操作でわからないシーンに遭遇しても安心です。</p>
          </div>
        </div><!--/メデイア-->
      </div><!--/.section-inner__item-->
    </section><!--/#strengths-->
    <section id="voice" class="common-inner bg-blue">
      <div class="section-title">
        <h2 class="section-header">お客様の声</h2>
      </div>
      <div class="section-inner bg-white">
        <div class="section-inner-container">
           <div class="section-inner-container__item">
             <div class="card mb-80 mr-80">
               <figure class="card__img-wrapper">
                 <img src="images/photo-mr_okochi@2x.jpg" alt="">
               </figure>
               <div class="card__title bg-header-nav"><p>株式会社グローバルマーケティングジャパン<br> ダイレクトソリューション2部　大河内様</p></div>
               <div class="card__text"><p>Data Maniaを導入する前は、全てのデータひとつひとつ集め、それを分析し、レポートするまでを全て手作業で行っていました。 この工程で膨大な時間を使ってしまい、肝心のマーケティング施策を考える時間がどんどん削られていましたが、Data Mania導入後はそういった作業を一切しなくて済むようになりました。 これからもきっと我が社には欠かせないツールであり続けると確信しています。</p></div>
              </div>
             <div class="card">
              <figure class="card__img-wrapper">
                <img src="images/photo-mr_nakajima@2x.jpg" alt="">
              </figure>
              <div class="card__title bg-header-nav"><p>株式会社山月堂<br>　中島様</p></div>
              <div class="card__text"><p>安い！速い！すごい！見事に私の求める要素三拍 子が揃ったツールです。<br> Data Maniaを使い始めてからは毎日定時で上が れるようになりました！</p></div>
             </div>
            </div><!--/.section-inner-container__item-->
           <div class="section-inner-container__item">
            <div class="card mb-80">
              <figure class="card__img-wrapper">
                <img src="images/photo-ms_kagari@2x.jpg" alt="">
              </figure>
              <div class="card__title bg-header-nav"><p>株式会社キャトルミューティレーション アカウントセールス事業部　篝様</p></div>
              <div class="card__text"><p>全てのデータがひとつに集約されるので、煩わしいデータの整理をする必要が一切ありません。トライアル期間に申し込んだのですが、使い始めて30分でまさに当社が求めていたツールだと確信しました。</p></div>
             </div>
            <div class="card">
             <figure class="card__img-wrapper">
               <img src="images/photo-mr_davis@2x.jpg" alt="">
             </figure>
             <div class="card__title bg-header-nav"><p>株式会社Greeeeed コンサルティングチーム　Mike Davis様</p></div>
             <div class="card__text"><p>以前他のツールを使っていた時は、自分たちの使いやすい形にデータを整形するなど、結局手作業
              が発生してしまうケースが多かったのですが、
              Data Maniaは日々レポートのテンプレートが追
              加されているので、「こういう形でデータがみた
              い」というニーズに必ずマッチします。<br>
              もうこれなしの頃には戻れません。</p></div>
            </div>
            <div class="card"></div>
           </div>
        </div>
      </div>
    </section>

    <section id="contact" class="common-inner bg-white">
      <div class="section-title"><h2 class="section-header">お問い合わせ</h2></div>
      <div class="wrapper">
       
        <form action="#">
          <div>
            <label for="name">お名前</label>
            <input type="text" id="name" name="your-name">
          </div>
          <div>
           <label for="email">メールアドレス</label>
           <input type="text" id="email" name="your-email">
         </div>
         <div>
          <label for="">お問い合わせ種別</label>
          <input type="text" id="select" name="your-select">
        </div>
         <div>
           <label for="message">お問い合わせ内容</label>
           <textarea id="message" name="your-message"></textarea>
         </div>
         <input type="submit" class="button" value="送信">
        </form>
     </div>
    </section>
  </article><!--/.main-->
  <footer class="page-footer common-inner bg-header-nav">
     <div class="pate-footer__item footer-row">
       <div class="page-footer__item-title">
         <p>企業情報</p>
       </div>
       <div class="page-footer__item-text">
        <p><a href="#">会社概要</a></p>
        <p><a href="#">ミッション</a></p>
        <p><a href="#">メッセージ</a></p>
        <p><a href="#">アクセス</a></p>
         <p><a href="#">採用情報</a></p>
       </div>
     </div><!--/.page-footer__item-->
    <div class="pate-footer__item footer-row">
      <div class="page-footer__item-title">
        <p>製品について</p>
      </div>
      <div class="page-footer__item-text">
        <p><a href="#">Data Mania v3</a></p>
        <p><a href="#">Artemis Score</a></p>
        <p><a href="#">Aegis Engine</a></p>
      </div>
    </div><!--/.page-footer__item-->
    <div class="pate-footer__item footer-row">
      <div class="page-footer__item-title">
        <p>メディア情報</p>
      </div>
      <div class="page-footer__item-text">
        <p><a href="#">掲載情報</a></p>
        <p><a href="#">取材のお申込み</a></p>
      </div>
    </div><!--/.page-footer__item-->
    <div class="pate-footer__item footer-row">
      <div class="page-footer__item-title">
        <p>サポート</p>
      </div>
      <div class="page-footer__item-text">
        
          <p><a href="#">よくあるご質問</a></p>
          <p><a href="#">サービス稼働状況</a></p>
          <p><a href="#">お問い合わせ</a></p>
      </div>
    </div><!--/.page-footer__item-->
    <div class="pate-footer__item footer-row">
      <div class="page-footer__item-title">
        <p>サイトについて</p>
      </div>
      <div class="page-footer__item-text">
        <p><a href="#">利用規約</a></p>
        <p><a href="#">プライバシーポリシー</a></p>
      </div>
    </div><!--/.page-footer__item-->
  </footer>
</body>
</html>

 

CSS


@charset "UTF-8";
body {
  font-size: 1.6rem;
  color:#333;
  width: 1200px;
  font-family: '游ゴシック体''sans serif';
}
.common-inner {
  padding: 100px;
}
.bg-blue{
  background-color: #e6f6ff;
}
.bg-white{
  background-color: #fff;
}
.bg-header-nav {
  background-color: #008dd5;
}
.bg-green {
  background-color: #a9d92f;
}
.mb-80 {
  margin-bottom: 80px;
}
.mr-80 {
  margin-right: 80px;
}
/*--ヘッダー--*/
.header-top {
  position: relative;
  padding-top: 480px;
  background-color: #fff;
  background-image: url(../images/main_visual.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.header-logo {
  position: absolute;
  top:0px;
  left:opx;
}
.header-catch {
  position: absolute;
  top:190px;
  left: 105px;
  display: inline-block;
  font-size: 3.6rem;
  font-weight: bold;
  color: #fff;
  line-height: 5.4rem;
}
.header-catch span {
  background-color: black;
}
.header-banner {
  display: block;
  width: 150px;
  height: 150px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  color: #008dd5;
  border: 2px solid #008dd5;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding-top: 30px;
}
.header-nav {
  height: 76px;
  display: flex;
  justify-content: space-between;
  padding: 30px 100px;
}
.header-nav__list{
  width: 1000px;
}
.header-contact{
  width: 196px;
}
.header-nav ul {
  display: flex;
  color: #fff;
}
.header-nav ul li {
  margin-right: 30px;
  line-height: 1;
}
.header-contact p {
  color: #fff;
  line-height: 1;
}
  
/*--メイン--*/
.section-title {
  height: 52px;
  background-image: linear-gradient(-45deg,#008dd5 16px,transparent 0),
                    linear-gradient(135deg, #008dd5 16px,transparent 0);
  margin-top: 100px;
  margin-bottom: 50px;
  margin-right: auto;
  margin-left: auto;
}
.section-title h2 {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.section-inner-small {
  margin-left: 168px;
  width: 640px;
}
.section-inner-small__item {
  display :flex;
  margin-bottom: 20px;
}
.date{
  margin-right: 91px;
  font-size: 1.6rem;
  line-height: 1,75;
}
.last-news {
  font-weight: bold;
  line-height: 1,75;
  color: #008dd5;
  text-align: center;
}
.section-inner{
  padding:60px;
}
.section-inner-container {
  margin-bottom: 40px;
  display:flex;
  justify-content: space-around ;
}
.section-inner__text {
  width: 480px;
  margin-right: 60px;
}
.section-inner__logo {
  display:column;
}
.section-inner__logo ul li{
  display: inline-block;
}
.section-inner__logo ul li:not(:last-child) {
  margin-right: 40px;
}
.section-inner__logo img {
  width: 80px;
  height: 80px;
}
.read-more {
  width: 280px;
  padding:20px 50px;
  border: 2px solid #008dd5;
  margin:0 auto;
}
.read-more a {
  color: #008dd5;
}
.read-more a:hover {
   text-decoration: underline;
}

/*--メデイア--*/
.media{
  display: flex; /* 要素をFlexコンテナとして定義する */
  width: 1000px;
  height: 300px ;
  padding: 0;
  margin-bottom: 50px;

}
.media__img-wrapper{
  flex:0 1 0.5;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 300px;
}
.media__img{
  width: 100%;
  vertical-align: bottom;
  object-fit: cover;
}
.media__body{
  padding-left: 40px;
  box-sizing:border-box;
  width: 660px;
  align-items: center;
}
.media__title {
  margin-bottom: 25px;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: left;
  font-weight: bold;
}
.media__text{
  line-height: 2rem;
  text-align: left;
}

/*--voice--*/
.card{
  border:1px solid #ddd;
  width: 400px;
  box-sizing: border-box;
}
.card__img-wrapper img {
  width: 398px;
  height: 299px;
  margin:0;
  vertical-align: bottom;
}
.card__title {
  margin:0;
  padding: 20px;
}
.card__title p {
  font-weight: bold;
  color:#fff;
  line-height: 1.75;
}
.card__text {
  margin:0;
  padding:20px;
  line-height: 1.75;
}
.card__text p {
  line-height: 1.75;
}

/*--コンタクト--*/
.wrapper {
  margin: 0 auto;
  padding: 0 200px;
}
form div {
  margin-bottom: 30px;
}

label{
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}
input[type="text"],
input[type="email"],
textarea{
  background: rgba(255, 255, 255, 0.5);
  border: 1px #333 solid;
  border-radius: 4px;
  padding: 10px;
  font-size: 1rem;
}
input[type="text"],
input[type="email"]{
  width: 100%;
  max-width: 240px;
}
textarea{
  width: 100%;
  max-width: 600px;
  height: 6rem;
}
input[type="submit"]{
  border: 1px solid #008dd5;
  border-radius: 3px;
  cursor:pointer;
  line-height: 1;
  padding:20px 120px;
}

/*--フッター--*/
.page-footer {
  display:flex;
  flex-direction:row;
}
.page-footer p {
  color:#fff;
}
.page-footer__item-title {
  margin-bottom: 40px;
}
.page-footer__item-title p {
  font-size:1.4rem;
  font-weight: bold;
}
.page-footer__item-text {
  width: 100%;
  white-space:nowrap;
}
.page-footer__item-text p {
  font-size: 1.4rem;
  font-weight: lighter;
  line-height: 2;
}
.footer-row {
  width: 100%;
  margin-right:100px;
  padding:0;
}

できていない所

  • header-nav の右端ブロック全体に、緑色を反映できない。
  • section-title の三角の装飾が、指定の位置に表示できない。
  • サービスの特徴セクションのロゴの並びを表現できていない。
  • ３つの強みセクションの　テキストを天地中央配置できていない。
  • 3つの強みセクションの　画像をまるくできていない
  • フォームの種別（トグルボタン）を表現できていない。
  • フォームの送信ボタンを中央配置できていない。

KROWLさんのコード解説

自分の書いたコードに、少し修正をかけようとしましたが、クラスの当て方、セクションやボックスの当て方が違うので、何が何だかわからなくなってしまい、結局コードを1から書き直すことにしました。

解説を読み、ｃｓｓの理解に務め、わからないものは、ググって理解してからコードを書いたので、とても時間がかかりました。

KROWLコーディング課題「ツールの紹介サイト」 – 解説編 その1
KROWLコーディング課題「ツールの紹介サイト」 – 解説編 その2
KROWLコーディング課題「ツールの紹介サイト」 – 解説編 その3
KROWLコーディング課題「ツールの紹介サイト」 – 解説編 その4

11月14日到達　模写完成

KROWl模写課題3-データマーケティング支援ツールの紹介サイト-模写

HOME >  プログラミング >  KROWl模写課題3-データマーケティング支援ツールの紹介サイト-模写過程