プログラミング学習始めて6ヶ月半経ちました。
現在ISARAの模写中です。
進み具合はというと、こんな感じ↓
![f:id:gharuto:20200529204904p:plain f:id:gharuto:20200529204904p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529204904.png)
![f:id:gharuto:20200529204958p:plain f:id:gharuto:20200529204958p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529204958.png)
![f:id:gharuto:20200529205021p:plain f:id:gharuto:20200529205021p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529205021.png)
![f:id:gharuto:20200529205048p:plain f:id:gharuto:20200529205048p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529205048.png)
![f:id:gharuto:20200529205104p:plain f:id:gharuto:20200529205104p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529205104.png)
![f:id:gharuto:20200529205117p:plain f:id:gharuto:20200529205117p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529205117.png)
メンバーの画像が食い込んでるのは、見本だとpositionでやってましたが、
marginマイナスでやりました。
![f:id:gharuto:20200529205133p:plain f:id:gharuto:20200529205133p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529205133.png)
CSSで三角形を作る。
最後の画像の一番下の三角形の部分、これどうやるんだろう?と調べたら、
ありました↓
CSSだけで三角形を作ろう!その1:borderプロパティの仕組みをマスター | 株式会社グランフェアズ
ということで、三角形はこう作りました。
#triangle{
border-top:solid 25px #ebb94d;
border-right:solid 25px transparent;
border-left:solid 25px transparent;
}
これをpositionで配置。
が、三角形が横にビヨーンと伸びてしまいます。
なぜだろう?と思ったら、widthを指定してませんでした。
(position:absolute;を真ん中に配置する方法は、前回の記事を参照)
CSSで共通デザインを作る。
イサラって、使っている文字をtextl、textm、textsという風にいくつかの種類(class)に分けているんですよね。
そしてそれを使い回している。
例えばtextlなら、
font-size:16px、font-weight:600、line-height1.6、みたいな。
だから私も同じくtextl、textm、textsというclassを作り、CSSで共通デザインを作りました。
これであとは、コーディングの際にこのclassを付けるだけなので楽です。
これやってからかなり進みが速くなりました。
他にはこのカギカッコの部分↓
![f:id:gharuto:20200529222525p:plain f:id:gharuto:20200529222525p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/g/gharuto/20200529/20200529222525.png)
これも同じデザインの所が何ヵ所かあるので、classを作りCSSで共通デザインを作りました。
変なマージンができてしまう。
コーディングしていると、p要素に変なマージンが付いてしまいます。
原因を調べると
#leaning h3,p{
margin-bottom:○○px;
}
とやっていました。
これ、#leaningのpにマージンをつけるつもりだったんですが、
これだと全てのpにマージンが付いてしまいますよね。
うっかり。
感想。
結構進みました。
がこれでやっと3分の1程度です。単純計算で3ヶ月位かかりそう。
うん、やるよ。
どれだけかかろうが終わらせてやる!
テックアカデミーが初心者向け副業コースを始めました↓
![](https://www.progstudy-trace.com/wp-content/uploads/2021/09/techacademy-fukugyoucourse-160x90.jpg)
コメント