Web プログラミング

【もりけん塾83記事】デイトラの腕試しで模写をやってみました

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

フリーランスでweb制作をしてJavaScriptもしていきたい気持ちがあるようなので(他人事)、LPを今一度模写したくなり東京フリーランス(@Tokyo_FreeIance)さんのデイトラのLPを作成。

 

今回作成しているときに、

  • レスポンシブ対応
  • できるだけ真似る
  • ググるググるググりまくる負けない
  • 時間を測定しながらする

ことを考えて作成できました!

 

今日はレスポンシブ対応以外できました。

  • レスポンシブ以外は2時間45分 で完了
  • ググるググるググりまくった
  • 丸みや余白、line-heightなどできるだけ真似た
  • bootstrap使わない

これらによって完璧ではないですが個人的に満足のいく見た目になったので、今日したことを振り返ります。

デイトラのLPを模写

以下の見た目になりました!

見た目は満足寄りにはなっていますが、反省点もあります。

 

反省は、

  • 若干メールアドレスの線の部分とかちがい
  • マークアップもう少し減らして見やすくできたでしょ…
  • gridを使ってflexboxやfloatを避けてたけど今回flexbox使用でwrapをうまくできていないやん…
  • すぐにコーディング取り掛からずに頭の中で考えるかメモに書いてからコーディングすべきだったよなぁ

と思ったので次作成するときはこれらを思い出していきたいです。

 

HTML

HTMLです。

 html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>デイトラの模写</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/media.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="containerHeader">
<h1>30DAYSトライアル</h1>
<nav>
<ul>
<li>デイトラとは</li>
<li>コース一覧</li>
<li>お問い合わせ</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="containerMain">
<div class="pro">
<div class="main_content">
<h2>
1日1題30日で
<br>
プロのWebエンジニアになろう!
</h2>
<p>毎日設定された課題をこなすだけ!未経験から
<br>
30日でプログラミングスキルが身につきます
</p>
</div>
</div>
<div class="about">
<h3>デイトラとは</h3>
<div class="containerAbout">
<img class="img_about" src="img/about.png" alt="デイトラについて">
<p class="p_about">
デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
<br>
1日1題30日でプロのWebエンジニアを目指しましょう!
</p>
</div>
</div>
<div class="corse">
<h3>コース一覧</h3>
<div class="corse_content">
<div class="box web_first">
<img class="img_corse" src="img/web_first.png" alt="初級コース">
<p>HTML/CSS/Bootstrap</p>
</div>
<div class="box web_second">
<img class="img_corse" src="img/web_second.png" alt="中級コース">
<p>HTML/CSS/JavaScript/jQuery</p>
</div>
<div class="box web_third">
<img class="img_corse" src="img/web_third.png" alt="上級コース">
<p>PHP/WordPress</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="contact">
<h3>お問い合わせ</h3>
<p>さあ今日から30日間を始めよう!</p>
<form>
<input class="mail" type="text" value="" placeholder="メールアドレス" >
</form>
<button class="free">無料ではじめる</button>
</div>
</div>
</footer>
<div class="copyright">
<p>© Copyright 2019 TokyoFreelance</p>
</div>
</body>
</html>

 

sectionにしようか、conteinerで全てくくってgridにしようかいろいろ悩みました…

  • 綺麗で読みやすいコードを書くことって本当に難しくて奥が深い…
  • マークアップ言語沼…

と思ったのでJavaScriptの勉強の合間にこうしてすることは良かったです^^!

 

CSS

CSSです。

 css
body{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: inherit;
vertical-align: baseline;
line-height: 1.5;
}
h2,h3,p{
text-align: center;
}
h3{
font-size: 1.5rem;
font-weight: bold;
margin-top: 3%;
margin-bottom: 5%;
}
header, .pro, .about, .corse, footer, .copyright{
width: 980px;
margin: 0 auto;
height: auto;
}
/* ヘッダー */
.containerHeader{
display: flex;
}
.containerHeader h1{
font-size: 1.5rem;
font-weight: bold;
margin-top: 25px;
}
.containerHeader nav{
margin-left: auto;
padding-top: 30px;
}
.containerHeader nav ul{
display: flex;
}
.containerHeader nav ul li{
margin-left: 20px;
}
/* メイン */
.pro{
background-image: url(../img/main-vsual-nontitle.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 500px;
position: relative;
}
.main_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%, -50%);
}
.main_content h2{
font-size: 2rem;
font-weight: bold;
margin-bottom: 7%;
}
/* アバウト */
.containerAbout{
display: flex;
}
.img_about{
width: 50%;
display: flex;
margin-right: 2.7%;
margin-bottom: 15px;
}
.p_about{
width: 50%;
display: flex;
text-align: justify;
}
/* コース */
.corse_content{
display: flex;
align-items: center;
margin-bottom: 50px;
}
.img_corse{
width: 310px;
padding-right: 25px;
}
.corse_content P{
text-align: left;
}
/* コンタクト */
.contact{
text-align: center;
margin-bottom: 130px;
}
.mail{
width: 600px;
height: 30px;
border-radius: 30px;
border: 0.5px solid #333333;
margin-bottom: 15px;
}
.free{
width: 460px;
height: 60px;
background: #ec6d64;
color: #fff;
font-weight: bold;
border-radius: 5px;
}
.copyright{
font-size: 0.7rem;
margin-bottom: 50px;
}
.copyright p{
text-align: right;
}

 

reset.cssを使っていたのでbody部分にあるmarginやpaddingいらなかったかも。

 

ヒントのところにあったcontainerでくくってってあったので、containerを複数利用して作成するのかぁ…

 

でも経験不足な私の頭ではまだ理解できなかったので今回はこちらのcssに。

 

一気にまとめることができたらコード数減らせて、

  • 見やすい
  • 読み込み速度あがる

になる気がするので、これも意識していきたいな!

 

おわりに

まだまだ改善する点も多いですが、自分の中で何かを完成させることがしたい欲が強くなったので作成しました。

 

今回作成したものの反省点や改善点を踏まえて、次はコーポレートサイトも作成していきたいな!

 

JavaScriptの勉強が主軸だけど生活もあるので、時間を考えてやっていこ。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada