TOP

コーディング

【92日目】 #codestep 中級編2つ目coffeeshopのReadMoreを整理しました【完成動画も】

ご依頼内容

今日は、codestep中級編2つ目のcoffeeshopを精読しました。
知り合いにコーヒーショップに「ホームページ作ってね」と言っていただいているので、気合が入ります。

この課題のテーマは、私の中では

  • backgroundに載せる文字のabsolute
  • backgrouundの画像をスクロール時にも固定する
  • RreadMore ボタンの作り方

でした。この記事では、3つめのReadMoreについて整理します。
このコードは自力では書けるレベルではありませんでしたので、模範解答のおさらいついでにまとめています。

codestep 中級編2CoffeeShopにあるReadMoreとは

まずは、模範サイトを見たほうが早いので掲載しますね。

「初期には、左右の赤い鍵状に囲われているボタンですが、hoverすると四角く囲う」というものです。
作り方を見てみましょう。

ReadMoreボタンの作り方

まずbottnのかたちを作ります。

#about .btn {
width: 160px;
height: 50px;
line-height: 3.5;
display: inline-block;
color: #000;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;         // これを親要素とします

そしてそもそもこのbottunはhtmlを見ると、

 <a class="btn" href="#"><span>Read More</span></a>

と、.btnとspanで二重に覆われており、

#about .btn span {
position: relative;
display: block;
width: 100%;
height: 100%;
}

と指定されています。

①この表現に必要なものは以下の通り

  • 右縦棒:wide2px,height50%
  • 右横棒:wide20%,height2px
  • 左縦棒:wide2px,height50%
  • 左横棒:wide20%,height2px

②この四本を左右それぞれ、右下と左上を起点としたabsoluteを作り、鍵のかたちとする

疑似要素のbefore,afterについてはこちらの記事がわかりやすかったです。before/afterが前後につかなくても良いなんて!
https://mihune-web.com/before_after/

【右縦棒】

.btn::before{
position:absolute; //親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;         // 底辺を起点
wide:2px;          //幅2pxで
height:50%;    //高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に

【右横棒】


.btn::after{
position:absolute; //親要素に対して下のright,bottomを起点にする
content:"";
right:0;           //右の
bottom:0;         // 底辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;    //高さ
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に

【左縦棒】

.btn span::before{
position:absolute; //親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;          // 上辺を起点
wide:2px;          //幅2pxで
height:50%;    //高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に

【左横棒】


.btn span::after{
position:absolute; //親要素に対して下のleft,topを起点にする
content:"";
left:0;           //左の
top:0;          // 上辺を起点
wide:20%;          //幅は親要素btnの長さの20%
height:2px;    //高さ
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に

③hoverしたときに、この4本の棒が、0.3秒かけて自然な動きで100%の長さになってReadMoreを四角く覆う

【縦棒は長さを100%にする】

#about .btn:hover::before,
#about .btn span:hover::before {
height: 100%;
}

【横棒の長さを100%にする】

#about .btn:hover::after,
#about .btn span:hover::after {
width: 100%;
}

完成ページはこんなかんじです