コンテンツとコンテンツの間に文字を挿入する方法がわかりません。

下記サイトの模写コーディングを行う中で現在詰まっている箇所があります。
https://isara.life/

上記サイトにアクセスしていただき、
・エンジニアとして本当の自由を手に入れるためには？
↓（ABOUT）
・ノマドエンジニア育成講座　iSara[イサラ]とは

の、（ABOUT）の箇所をどのように挿入しているのかが全くわかりません。
widthとheightで幅を指定し●を作成し、文字を中央揃えにするところまではわかっているのですが、
どうしても画像と画像の間に隙間ができてしまって、間の上に乗せることができません。（position:fixedでしょうか？）

模写中なので答えのコードというよりは、どのようにhtmlやcssを組めば良いか言葉で教えていただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

すでに回答はでていますが、自分がWEBページを見ていて、これはどのように実現しているのだろうと思ったときに確認する手順を紹介します。

Chromeのデベロッパーツールを使って確認する場合の例です。

まず質問のページの（ABOUT）上で右クリックして、ポップアップメニューの一番下の[検証]をクリックします。するとデベロッパーツールが開き該当のHTMLコードが選択されています。
<p class="circle1">ABOUT</p>
右のパネルにはその要素に摘要されているCSSが表示されます。確認してみるとスタイルは設定していますが、位置を設定しているコードはないようですので、HTMLの一つ上の親要素を選択します。
<div class="abouticon">
CSSを確認すると下記になっています。

css
1   .abouticon {
2       position: relative;
3       top: -40px;
4   }

これでposition: relative;でブロックの最上辺から40px上に移動させていると確認できます。
今回は一つ上の親で確認できましたが、そうでない場合は順に親要素をたどっていきます。

こんな感じです。

ご参考になれば幸いです。

投稿2019/10/09 02:19

編集2019/10/09 02:22

hatena19

総合スコア34073

gerick

2019/10/09 16:11

デベロッパーツールでの検証は既知だったのですが、なるべく答えは見ずに自己解決をする方法で学んで行こうと決めておりました。ただ、やはり調べるものの中にも限界はあるので本当に詰まった時は検証ツールで確認してみようと思います！ご回答ありがとうございました！一番詳しく解説してくださったのでベストアンサーとさせていただきました！

行動規範の内容に同意します