【レイアウト構成】番外編：疑似要素の練習

コーディング練習レイアウト構成ソースコードデモ

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

コンテンツの横幅を設定するため、全体をdivタグで囲みます。

タイトル

h2タグで記述します。（ここはpタグでもOKです。）
横線は疑似要素（before）を使用してみましょう。
h2に「position: relative;」、疑似要素に「position: absolute;」を設定して、横線の位置を調整しましょう。
横線を表示するためのヒントは、「content」「width」「height」です。

擬似要素の詳細については、「【CSS】擬似要素の使い方について」で詳しく解説しています。

テキストと画像

テキストはpタグ、画像はimgタグでそのまま記述します。

コーディング練習メニューに戻る

【HTML/CSS コーディング練習】番外編：疑似要素の練習

関連記事

コーディング練習一覧