【レイアウト構成】番外編:positionの練習

レイアウト構成

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

コーディングのヒント!

全体をdivで囲み、コンテンツの横幅を設定します。
また、「position: relative;」を設定することで、テキストエリアと画像を配置するための基準に設定します。

positionプロパティの詳細については、「【CSS】positionプロパティの使い方について」で詳しく解説しています。

テキストエリア
テキストエリア全体をdivで囲み、「position: absolute;」を設定して左寄せで配置します。
画像
画像全体をdivで囲み、「position: absolute;」と「top」、「right」の設定で、テキストエリアに重なるように配置します。
タイトル
h2タグで記述します。(ここはpタグでもOKです。)
「display: inline-block;」を指定して、下線をテキストと同じ長さに揃えます。
ボタン
aタグで記述します。
「border-radius」で、角丸を作ります。

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

おすすめの記事

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習