質問: 下記サイトの模写コーディングを行う中で現在詰まっている箇所があります。 https://isara.life/ 上記サイトにアクセスしていただき、 ・エンジニアとして本当の自由を手に入れるためには? ↓(ABOUT) ・ノマドエンジニア育成講座 iSara[イサラ]とは の、(ABOUT)の箇所をどのように挿入しているのかが全くわかりません。 widthとheightで幅を指定し●を作成し、文字を中央揃えにするところまではわかっているのですが、 どうしても画像と画像の間に隙間ができてしまって、間の上に乗せることができません。(position:fixedでしょうか?) 模写中なので答えのコードというよりは、どのようにhtmlやcssを組めば良いか言葉で教えていただけますと幸いです。 よろしくお願いいたします。
回答: すでに回答はでていますが、自分がWEBページを見ていて、これはどのように実現しているのだろうと思ったときに確認する手順を紹介します。 Chromeのデベロッパーツールを使って確認する場合の例です。 * まず質問のページの(ABOUT)上で右クリックして、ポップアップメニューの一番下の[検証]をクリックします。するとデベロッパーツールが開き該当のHTMLコードが選択されています。 `ABOUT` * 右のパネルにはその要素に摘要されているCSSが表示されます。確認してみるとスタイルは設定していますが、位置を設定しているコードはないようですので、HTMLの一つ上の親要素を選択します。 `` * CSSを確認すると下記になっています。 ``` .abouticon { position: relative; top: -40px; } ``` * これで`position: relative;`でブロックの最上辺から40px上に移動させていると確認できます。 * 今回は一つ上の親で確認できましたが、そうでない場合は順に親要素をたどっていきます。 こんな感じです。 ご参考になれば幸いです。