未経験から優秀エンジニアを目指す24歳の成長ストーリー(16)

こんばんは。本日の振り返り。

まだ完璧に理解はできていないが、コンポーネントの大枠を学んだ。
コンポーネントは、コードの部品のようなイメージで、
始めやってみるときはなにもわからないまま学習し、自分なりにこんな感じかと記入してみたものの
自分の理解とは違いがあると知った。
始め書いていたコードが

/conponents
<template>
<div class="section-title">
<h2><slot>No title</slot></h2>
</div>
</template>

/index.vue
<TheHeader>About</TheHeader>

と、コンポーネントにHTMLを記入していたが、それでは、普通にindex.vueに書いているのと変わらないから
意味がない。
コンポーネントはstyle(css)を書くことの方がいい。

そこを学んだ上でボタンを作ってみると

<style>
.button a {
background: #eee ;
border-radius: 50px;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 160px;
padding: 10px 25px;
color: #313131 ;
transition: 0.3s ease-in-out;
font-weight: 500;
font-size: 5px;
}
.button a:hover {
background: #313131 ;
color: #FFF ;
}
.button a:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #313131 ;
border-right: 3px solid #313131 ;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: 20px;
border-radius: 0.5px;
transition: 0.3s ease-in-out;
}
.button a:hover:after {
border-color: #FFF ;
}
</style>

をコンポーネントで記入することで併用できるのかと学んだ。

できなかったこととして、
LP制作をしてる中で、
タイムスケジュール管理ができてないと気づいた。

1日どう進めるか、なにがどこまでできるようになるのか 明確に決めて行うことで、自然と納期に舞い合わないは防げていけるかと思うので これを意識して取り組む。

以上。