プログラミング学習始めて6ヶ月半経ちました。
現在ISARAの模写中です。
進み具合はというと、こんな感じ↓
メンバーの画像が食い込んでるのは、見本だとpositionでやってましたが、
marginマイナスでやりました。
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を付けるだけなので楽です。
これやってからかなり進みが速くなりました。
他にはこのカギカッコの部分↓
これも同じデザインの所が何ヵ所かあるので、classを作りCSSで共通デザインを作りました。
変なマージンができてしまう。
コーディングしていると、p要素に変なマージンが付いてしまいます。
原因を調べると
#leaning h3,p{
margin-bottom:○○px;
}
とやっていました。
これ、#leaningのpにマージンをつけるつもりだったんですが、
これだと全てのpにマージンが付いてしまいますよね。
うっかり。
感想。
結構進みました。
がこれでやっと3分の1程度です。単純計算で3ヶ月位かかりそう。
うん、やるよ。
どれだけかかろうが終わらせてやる！
テックアカデミーが初心者向け副業コースを始めました↓
コメント