iSARA模写　解説③〜「」の作り方など〜

iSARA模写第3回です。

前回はこちら↓

今回はこちらを作成します↓

今回のポイントは

・cssで作る下線

・丸いaboutの設置＋移動

・divの横並び

いつもの手順で

①レイアウトの確認

②HTMLの書き出し

③CSSで整えます。

①レイアウトの確認

②HTMLを書く

上から順にHTML要素を作っていく。

「」(鍵カッコ)はCSSで作成できます。

③CSSで見た目を整える

今回のポイントは、

☑️「」の設置

イメージ↓

疑似要素を使用して「」を作ります。

h2タグの前後に

中身のない正方形を作って、

文字前には”「”を作るために、上と左のみボーダーをつくり、

文字後ろには”」”を作るために、下と右のボーダーのみ作ります。

コード↓

div②{
    width: 860px;
    margin: 0 auto;
}

h2{
    position: relative;
    text-align: center;
}

h2::before,h2::after{
    content:"";
    width:50px;
    height: 50px;
    position: absolute;
}
  
h2::before{
    border-top: 4px solid #EBB94D;
    border-left:4px solid #EBB94D;
    top:0;
    left:0;
}
  
h2::after{
    border-bottom: 4px solid #EBB94D;
    border-right:4px solid #EBB94D;
    bottom:0;
    right:0;
}

☑️「稼ぐ力」の下線

border-bottomでは実装できません。

　　　　　　　　　　↑このような下線になります。

linear-gradientを使います。

下線を付けたい部分をタグで囲み↓

ここに下線付けたい

CSSを書く↓

.border{background: linear-gradient(transparent 70%, #FDFF99 70%);}

すると、

ここに下線付けたい

となります。

☑️丸いaboutの設置

　aboutの丸は、pタグをCSSで整えて作成します。

　(1)高さと幅がおなじ正方形を作り、角をとって丸くする。

　　→border-radius

　(2)aboutの字が上下の真ん中にくるようにする。

　→line-height:○px(箱と同じ高さ80pxに）

　(3)　pタグのデフォルトであるブロック要素をインラインブロックに変える。

　　→display: inline-block;

　display: inline-block;については、

でも出てきました。

コードは↓

div④ p{
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
}

　次に、この円を下に動かすために、

div④{
  position: relative;
  top:-40px;
}

positionの使い方については、

サルワカさんの

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

の記事がおすすめです。

☑️divボックスの横並び

　こちらでもdisplay: inline-block;を使用します。

第3回はここまで。コツコツ頑張りましょう。