Web プログラミング

【もりけん塾53日目】webの神様、紹介「クリニック」の模写

フロントエンドエンジニアを目指している、ねこらのん(@nekoranon256)です。

 

今日はyoutube「webの神様」で紹介されていたクリニックのHPの模写をしました。

 

実際に作成してみて、

  • key-visual-contentが右にいかない

ことで苦しみ、答え合わせをしようとしてもわからず…

 

模写で挫折しろ

 

という友人からの言葉で写経を10サイト程度してから、マーキング含めcssも慣れる必要があるという結論に至りました。

 

今日は実際に作成したhtmlとcss、どこでくじけたか、何を調べたかなどについてまとめていきます。

webの神様紹介動画「クリニック」の模写

 

この動画を参考にすすめていきました。

 

さっそく完成図と実際自分で作成したものを見比べて、HTMLとCSSを掲載していきます。

クリニック完成図と自分で作成したもの

完成図

 

上記のものが完成図です。

 

私が作成したもの。「web予約」の色の濃さ適当にしちゃってた

 

あきらかに違うものは「Hello,world!」の部分が右か左か。

 

コードを掲載します。

 

HTMLとCSS

実際のhtmlとcssです。

 

まず、html。

 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>クリニックの模写</title>
</head>
<body>
<header>
<div class="inner">
<h1><a href="#"><img src="img/template-logo01.png" alt="ロゴ"></a></h1>
<!-- <div class="nav-box"> -->
<div class="head-nav">
<ul>
<li>お電話でのご予約はこちら</li>
<li>03-1234-5678</li>
</ul>
<a class="btn">WEB予約</a>
</div>
</div>
<!-- </div> -->
</header>
<nav>
<div class="inner">
<ul>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul>
</div>
</nav>
<div class="key-visual">
<div class="inner">
<div class="key-visual-content">
<h2>Hello, world!</h2>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="small"><hr>
It uses utility classes for typography and spacing to space content out within the larger container.
</p>
</div>
</div>
</div>
</body>
</html>

 

 

次はcss。

 

 css
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem;
font-family: inherit;
}
header{
text-align: right;
position: relative;
height: 100px;
}
header h1{
position: absolute;
top: 7px;
}
header h1 img{
width: 280px;
}
header ul{
list-style: none;
display: inline-block;
line-height: 1.5;
box-sizing: border-box;
vertical-align: middle;
}
header ul li{
text-align: left;
color: #5a6268;
}
header ul li:first-child{
font-size: 13px;
}
header ul li:last-child{
font-size: 32px;
font-weight: bold;
}
header .inner h1 a{
display: inline-block;
line-height: 42px;
text-decoration: none;
border-radius: 5px;
padding: 0 15px;
}
.btn{
display: inline-block;
line-height: 42px;
background: silver;
text-decoration: none;
border-radius: 5px;
padding: 0 15px;
margin:26px;
vertical-align: middle;
font-size: 20px;
color: #ffffff;
}
.btn:hover{
background-color: #5a6268;
}
.inner{
width: 1110px;
/* background: yellowgreen; */
margin: 0 auto;
padding-top: 5px;
}
nav{
text-align: center;
background-color: #343a40;
}
nav ul{
/* width: 1110px; */
background-color: #343a40;
}
nav ul li{
display: inline-block;
color: rgba(255, 255, 255, .5);
}
nav ul li a:hover{
color: #ffffff;
}
nav ul li a{
display: inline-block;
height: 55px;
/* 縦方向で中央寄せ */
line-height: 55px;
/* display: inline-block; */
color: rgba(255, 255, 255, .5);
text-decoration: none;
padding: 0 35px;
}
nav ul li h2{
font-size: 13px;
font-weight: 600px;
}
.key-visual{
margin: 0 auto;
height: 600px;
background-image: url(../img/top-image.jpg);
background-repeat: no-repeat;
background-size: cover;
text-align: right;
display: block;
}
.key-visual-content{
width: 560px;
height: 300px;
background: #ffffff;
border-radius: 5px;
padding: 30px 15px;
box-sizing: border-box;
text-align: left;
/* justify-content: flex-end; */
margin-top: 67px;
}
.key-visual-content h2{
font-size: 52px;
font-weight: 300;
margin-bottom: 15px;
}
.key-visual-content p{
margin-bottom: 35px;
font-size: 22px;
font-weight: 150;
line-height: 1.5;
}
.small{
display: block;
font-size: 13px;
font-weight: 150;
}

 

反省点や見直す点などをまとめます。

反省点

  • マークアップの経験が浅いためcssの動きが効かない
  • 右にするためにtext-alignやjustify-contentなどを使ったが動かない

今回で調べたことや学んだこと

今回調べたことは以下のものです。

 

  1. 疑似クラスのfirst-childやlast-childで指定
  2. line-heightでテキストの高さを変更
  3. 模写の手順や使う拡張機能

 

これらについてまとめていきます。

 

①疑似クラスのfirst-childやlast-child

兄弟要素の最初もしくは最後のみに指定し、cssを反映することができるもの。

 

実際に作成したのでこちらを御覧ください。

赤は:first-child、青はlast-childです。

 

まずHTML。

 html
<div class="container">
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>PROFILE</li>
<li>CONTACT</li>
<li>MENU</li>
</ul>
</div>

 

次にCSS。

 css
.container li:first-child{
color: red;
}
.container li:last-child{
color: blue;
}

いくつかある要素のうちの、最初(first)か最後(last)に指定することができるもの。

 

今回はheader要素に私は使ってみました。

②line-heightでテキストの高さを変更

line-heightで文字の高さを変更し、見やすい方法をとりました。

 

 

さきほどのものにline-height: 2;を指定しました。

 

③模写の手順や使う拡張機能

模写の手順について動画を参考にしました。

 

  1. サイト選び
  2. スクショ
  3. テキスト抽出(command+aで範囲選択)
  4. 画像抽出
  5. HTML(マークアップ)
  6. CSS(HTML5 Doctor Reset css)
  7. 答え合わせ

この順番ですると以前よりスムーズにすすみました!

 

まだ経験不足ですが…

 

拡張機能は、

  • page ruler redux:ものさし
  • awesome screenshot:ページ全体のスクリーンショット

こちらを使いましたが、動画には使い方の手順もわかり易く掲載されていました。

 

おわりに

HTMLとCSSは動画を参考にした部分と参考にせずした部分があります。

 

しかし、うまくいかない部分があったので多分マークアップが原因かと…

 

CSSでは左寄せがあっていると思うので…写経を10サイトしてマークアップに慣れていこうと思います。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

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

 

-Web, プログラミング

© 2020 Mayu_Yamada