Web プログラミング

【もりけん塾51日目】友人のコードの写経

エンジニアの友人のコードをまずは写経することにした、ねこらのん（@nekoranon256）です。

 

友人が、

送ったコードの写経も勉強になるよ

と言ってくれたのでさっそく写経することに。

 

ロードマップは、

  1. 写経（友人が送ってくれたコード）←今ここ
  2. 模写（LP）
    ↓挫折
  3. 写経10（1日1個、初級→上級）
  4. 模写

これでいきます。

 

友人が送ってくれたコードを写経

友人の完成図

スマホサイズ

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

 

htmlとcssのコードを送ってくれたので、気持ちだけアレンジしました。

 

html

htmlです。

 

 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive box model ui</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="imgBx">
<img src="img/dog.png" width="200px" height="200px" alt="dog">
</div>
<div class="content">
<div>
<h2>Dog one</h2>
<p>
L'Arc unwittingly befriends Naofumi when they travel to the Cal Mira islands to train,
</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="img/dog.png" width="200px" height="200px" alt="">
</div>
<div class="content">
<div>
<h2>Dog2</h2>
<p>
L'Arc unwittingly befriends Naofumi when they travel to the Cal Mira islands to train,
</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="img/dog.png" width="200px" height="200px" alt="">
</div>
<div class="content">
<div>
<h2>Dog2</h2>
<p>
L'Arc unwittingly befriends Naofumi when they travel to the Cal Mira islands to train,
</p>
</div>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="img/dog.png" width="200px" height="200px" alt="">
</div>
<div class="content">
<div>
<h2>Dog2</h2>
<p>
L'Arc unwittingly befriends Naofumi when they travel to the Cal Mira islands to train,
</p>
</div>
</div>
</div>
</div>
</body>
</html>

 

vscodeを使っているのでショートカットを使い始めました。

 

 html
<div class="container"></div>

通常ならばtabキーを使っていますが、今回は「.container」で上記のものを表示することに成功しました^^!

（今更なんですがね…（汗））

 

また最初cssが反映されませんでした。

 

原因は、

・stylesheet

にしていなく

・style

にしていたこと。

 

また合わせてこちらも。

<link rel="ファイルの種類" href="ファイルの場所">

これをよく忘れるので備忘録として。

 

css

次はcss。

レスポンシブ対応も掲載。

 

 css
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Cookie&family=Dancing+Script&family=Gochi+Hand&display=swap');
/* 「*」全体共通箇所にCSSを反映させる場合 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(img/back00.png);
}
.container{
font-family: 'Caveat';
position: relative;
width: 1000px;
display: grid;
/* これが4つを横並びにしている */
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}
.container .card{
position: relative;
display: flex;
flex-direction: column;
background: palegreen;
}
/* カーソルを持っていくと画像が動く */
.container .card:hover{
transition: 0.5s;
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(228,61,164,0.5);
}
/* 交互に文字と画像を逆位置に */
.container .card:nth-child(even){
flex-direction: column-reverse;
}
.container .card .imgBx{
position: relative;
width: 250px;
height: 250px;
background: yellow;
}
/* 画像のサイズ */
.container .card .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 100%;
object-fit: cover;
}
/* 文字と画像サイズを一緒にした */
.container .card .content{
position: relative;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
/* テキスト部分 */
.container .card .content div{
padding: 20px;
text-align: center;
}
.content h2{
padding-bottom: 10px;
font-size: 40px;
}
@media (max-width:1000px){
.container{
grid-template-columns: repeat(auto-fit,minmax(100%,1fr));
margin: 50px;
}
.container .card{
flex-direction: row;
margin: 10px 0;
}
.container .card:nth-child(even){
flex-direction: row-reverse;
}
.container .card .imgBx,
.container .card .content{
width: 30%;/it makes imgs n contents half of container/
}
}
@media (max-width:600px){
.container .card{
flex-direction: column;
margin: 10px 0;
}
.container .card:nth-child(even){
flex-direction: column;
}
.container .card .imgBx,
.container .card .content{
width: 50%;/it makes imgs n contents full of container/
}
.container .card .content{
height: 200px;
}
}

 

hoverを使っているので、カーソルをもっていくと動きが出るようになっている。

 

成果物

1400サイズ

1000サイズ

600サイズ

 

widthで100%にするとレスポンシブデザインで犬が半分に切れるなどの問題が発生したので、レスポンシブに合わせて30%や50%に変更した。

わからないところを調べる

cssでわからない点がいくつかあったので調べました。

 

  • min-height: 100vh;
  • display: grid;
  • grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    4つを横並びにしている
  • transitionとtransform
  • .card:nth-child(even){}
  • object-fit: cover;

 

それぞれ以下でまとめていきます。

min-height: 100vh;

bodyに対してmin-height:100vh;、模写をしていて出てきた事があったものです。

 

flexコンテナの領域の最低の高さを100 vhに設定します。

vhはviewport heightと呼ばれる、viewport（表示領域）の高さに対する割合の単位です。
100vhはviewportに対して100%という意味です。
つまりmin-height:100vh＝「bodyの高さを少なくとも、表示領域と同じにする」になります。

引用：【CSS】最低限の見た目にするためにコンテンツを画面の中心にしたいだけです。

 

これだけだとよくわかりません…

 

100%と何が違うのでしょうか？

クリックすると画像を借りたサイトへ飛びます。

引用：100% と 100vh の違い

100%と100vhの違いの表をまとめました。

 

100% 100vh
<html> までの親要素もすべて height: 100% の設定が必要
要素の縦幅は画面の縦幅からアドレスバーを差し引いた高さ 要素の縦幅は画面の縦幅と同じ高さ

 

レスポンシブデザインで画面上にどう表示されたいかで、対応していくと良さそうです。

display: grid;

gridについては違う記事でまとめていきます。

grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

こちらもgridの記事でまとめていきます。

transitionとtransform

追加していたら履歴をさかのぼっても残っていなかったので、もう一度作成！

 

transition

transitionは以下の5つで使い分ける事ができます。

 

No プロパティ名 読み方 説明
01 transition-duration トランジション・デュレーション 変化が始まって終わるまでの時間を指定します。
02 transition-property トランジション・プロパティ 変化が適用されるCSSのプロパティを指定します。
03 transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します。
04 transition-delay トランジション・ディレイ 変化が始まる時間を指定します。
05 transition トランジション 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです。

引用：【CSS3】Transition（変化）関連のまとめ

 

LP制作のときにお世話になったのは、

transition-timing-function:ease;
transition-duration:2s;

この2つ。

 

テキストをhoverする前はdisplayをnoneにしておき、hoverするとテキストが2秒で表示されるようにtransitionを指定されています。

 

マウスに当てることで、マウスに当てた部分が伸縮するようになっているので、他の要素と重ならないような作りになっています。

transform

次にtransformです。

 

引用：【CSS3】Transform（変形）関連のまとめ

 

写経をしていて、translate(Y)がよく使われているのを見たことがありますが、transformだったことがここでわかりました。

 

Qiitaの記事とほぼ一緒ですが、自分で実際に作成しました。

See the Pen
BaKvyoX by mayu (@syouyu-mayo)
on CodePen.

数学と同様、x軸、Y軸の表示です。

 

transform:translate(X軸方向の移動距離,Y軸方向の移動距離)になるようです。

 

X軸のみやY軸のみが良い場合は、transform(X)もしくはtransform(Y)を利用。

 

 

以下は回転のrotateを使っています。

See the Pen
BaKvyoX by mayu (@syouyu-mayo)
on CodePen.

 

以下はskewを使っています。

See the Pen
BaKvyoX by mayu (@syouyu-mayo)
on CodePen.

など他にもありますが、また試してみようと思います。

 

 .card:nth-child(even){}

疑似クラスのnth-child()は何番目にスタイルを適用させるかを指定することができるもの。

 

今回、写経したときにこれによって2色をつけることができました。

 

  • even：偶数
  • odd：奇数

 

 

nth-last-childはラストから数えて〜になります。

 

See the Pen
BaKvyoX by mayu (@syouyu-mayo)
on CodePen.

引用：擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】

上記はリストスタイルだけnoneにしています。

object-fit: cover;

画像をトリミングするプロパティ。

 

この記事がわかりやすかったです。

 

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

おわりに

写経をしてhtmlのなにのdivの中に何のdivが入っているのかなど意識しました。

 

今日は20km歩いたので続きは明日書く！眠い

 

残りのものを9/22に追記。

 

もりけん塾（@terrace_tech）

Thanks：もりけんさん

 

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

 

Post Views: 284

-Web, プログラミング

© 2021 Mayu_Yamada