before や after の使い方模写コーディング(isara模写)

Question

前提・実現したいこと

isara模写を進めております。

1．エンジニアとして本当の自由を手に入れるためには？
の部分を囲っているかっこの作り方について

2.その下のabout部分の作り方

について教えていただけると幸いです。

###調べたこと

beforeやafterの使い方までは調べられましたが、
position:absoluteや
beforeの部分の配置の仕方についての理解が追い付いていない状況です。

Answer 1

それぞれ、ソースコードを書いてみました。
タグとクラス名は好きなようにつけてください。横幅などの数値は目視で適当に指定したので、
ズレていると思います。そこは調整お願いします。

1．エンジニアとして本当の自由を手に入れるためには？
の部分を囲っているかっこの作り方について

<h2 class="title">
  <span>エンジニアとして本当の自由を手に入れるためには？</span> 
</h2>

.title {
  position: relative; /* position: absolute;を指定した直近の子孫要素の起点になる */
  margin: 0 auto;
  padding: 40px 0; /* 縦方向のサイズを指定するため。複数行を想定するためheightでは指定しない */
  width: 860px; /* つくりかたによって、不要かもしれません */
  
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.title::before,
.title::after {
  content: "";
  display: block; /* position: absolute;と組み合わせるため */
  position: absolute;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border-style: solid;
  border-color: #ebb94d;
  border-width: 0;
}
.title::before {
  top: 0;
  left: 0;
  border-top-width: 4px;
  border-left-width: 4px;
}
.title::after {
  right: 0;
  bottom: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
}

---

2.その下のabout部分の作り方

<section>
  <div class="title-circle">ABOUT</div>
  <h2 class="title">
    <span>ノマドエンジニア育成講座<br>iSara[イサラ]とは</span> 
  </h2>
  ...
</section>

section {
  position: relative; /* position: absolute;を指定した直近の子孫要素の起点になる */
}

.title-circle {
  position: absolute;
  top: -40px; /* 装飾の高さが80pxだとして、その半分の40pxぶん、親要素から上方向にはみ出るようにする */
  left: 0; /* position: absolute;を指定すると、margin: 0 auto;だけでは中央配置にならない */
  right: 0; /* position: absolute;を指定すると、margin: 0 auto;だけでは中央配置にならない */
  
  /* 「ABOUT」の文字を背景の円の中で上下左右中央配置にするための記述 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 装飾 */
  background: #ebb94d;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 横幅に対するパーセンテージ。80pxの50%は40px。 */
}

Comments

[chiko.unagi]

わからいやすい解説付きで説明していただきありがとうございます！
早速実装してみたところ思い通りのデザインにできました。ありがとうございます！

[new1ro]

数値などの調整はお願いします！

コピペしただけだと勉強にはならないと思うので、
もとのページとの違いを見たり、同じところを見たりするなどしてみてください。

Answer 2

※回答とは別なのですが、

isara模写を進めております。

検索ですぐわかったのでよいのですが、URLなど、具体的に示していただいたほうが回答しやすいかと。

1．エンジニアとして本当の自由を手に入れるためには？

【配置位置について】
position: absoluteは、自身の親を順に辿り、position: static以外のものが指定されている最初の要素の左上の座標を(0,0)として場所を絶対値で指定するものです。

模写されているサイトでは、

・直近の親要素.yellowbracketsnarrowにposition:relativeが指定されているため、基準はこの要素となります。

・beforeとafterは下記のように指定されているため、それぞれ基準となる要素の左上と右下に配置されます。

:before {
  top: 0;
  left: 0;
}
:after {
  bottom: 0;
  right: 0;
}

【あしらいについて】
下記の指定で、擬似要素が30px×30pxで作成されます。

:before, :after {
  content: "";
  width: 30px;
  height: 30px;
}

その要素に、beforeとafterそれぞれborderで装飾をしているので、サイトのようなあしらいとなります。

2.その下のabout部分の作り方

位置が画像に半分のっかっていることが疑問でしょうか？

Comments

[chiko.unagi]

配慮が欠けていて申し訳ありません。positionについての概念はあやふやでしたが、しっかり理解できました。わかりやすい説明ありがとうございます！