【プログラミング】3/30の目標と復習
今日の目標
- ブログを書く
- 復習をする
- youtubuのコーディング基礎動画を視聴する
目次
【ブログを書く】
これはいま執筆中
終わるまで書ききる
【3/29日の学習内容の復習】
まず家にノートを忘れて詳細には思い出せないんですが
cssのコーディングと使い方の考察をしました。
全て共有します
【background-image: linear-gradient();を使い背景にグリッドを生成する】
cssを使い背景グリッドを作成します。
幅がぐちゃぐちゃなのは勘弁してくれ（均等にできる方法も分かるが時間がない）
さてコードだが
<style>
.box{
width:100%;
height:100px;
border:1px solid #333;
background-color: white;
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #333 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #333 calc(100% - 1px));
background-repeat:repeat;
background-position:center;
background-size:26px 26px;
}
</style>
.box{
width:100%;
height:100px;
border:1px solid #333;
background-color: white;
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #333 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #333 calc(100% - 1px));
background-repeat:repeat;
background-position:center;
background-size:26px 26px;
}
</style>
記事内にソースコードを埋める方法がわからないので直貼りします(こんなブログない)
備忘録として解説
background-image:linaer-gradirent;によってグラデーションを生成します
0degは角度となります(この場合は下から上に縦になる)
transparent clac(100% - 1px)で1px分の空間をつくり良く分からんけどいい感じになる
(わかれ未来の自分)
それだけだと線が足りないのでrepeatで増やしてsiza決めて終わり！
われながら理解していない説明
【transitionプロパティについて】
<style>
.button a {
display: inline-block;
text-decoration: none;
font-size: 20px;
padding: 15px;
color: #ffffff;
background-color: #1A60BF;
transition:all 1s ;
}
.button a:hover {
color: #1A60BF;
background-color: #D0E2FB;
}
</style>
.button a {
display: inline-block;
text-decoration: none;
font-size: 20px;
padding: 15px;
color: #ffffff;
background-color: #1A60BF;
transition:all 1s ;
}
.button a:hover {
color: #1A60BF;
background-color: #D0E2FB;
}
</style>
実装コードはこれですね
transition:all 1s;で全てのプロパティに対して１秒後に変化を与える設定です
それだけです
【まとめ】
基本、詰め込みすぎる物ではないなと思いました。
今回の目標であるyoutubeのコーティング動画視聴はブログ更新の時間で
結局見れずじまいでした。
ブログやコーティングなど想定以上に時間を食ってしまうと予想されるものは
その想定をして、達成できる範囲でタスクを立てることにします。
なによりも達成すること・ルールにしたがう事が肝要ですからね
ではまた！
