プログラミング学習6ヶ月半。CSSで三角形を作る。

f:id:gharuto:20200529222042p:plain

プログラミング学習始めて6ヶ月半経ちました。

現在ISARAの模写中です。

進み具合はというと、こんな感じ↓

f:id:gharuto:20200529204904p:plain
isara.life模写制作LP
f:id:gharuto:20200529204958p:plain
isara.life模写制作LP
f:id:gharuto:20200529205021p:plain
isara.life模写制作LP
f:id:gharuto:20200529205048p:plain
isara.life模写制作LP
f:id:gharuto:20200529205104p:plain
isara.life模写制作LP
f:id:gharuto:20200529205117p:plain
isara.life模写制作LP

 

メンバーの画像が食い込んでるのは、見本だとpositionでやってましたが、

marginマイナスでやりました。

f:id:gharuto:20200529205133p:plain
isara.life模写制作LP
スポンサーリンク

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
isara.life模写制作LP

これも同じデザインの所が何ヵ所かあるので、classを作りCSSで共通デザインを作りました。

変なマージンができてしまう。

コーディングしていると、p要素に変なマージンが付いてしまいます。

原因を調べると

#leaning h3,p{

margin-bottom:○○px;

}

とやっていました。

これ、#leaningのpにマージンをつけるつもりだったんですが、

これだと全てのpにマージンが付いてしまいますよね。

うっかり。

感想。

結構進みました。

がこれでやっと3分の1程度です。単純計算で3ヶ月位かかりそう。

うん、やるよ。

どれだけかかろうが終わらせてやる!

 

テックアカデミー無料体験はこちら↓

 
TechAcademyの無料体験
 

コメント

タイトルとURLをコピーしました