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

レイアウト構成

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

コーディングのヒント!

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

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

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

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

Codejump

著者:Codejump運営者

X
Webサイト制作を学んでいく人、将来Webに関わる仕事をしていく人のために、役に立つ情報や学習コンテンツを提供していきます。
運営者情報

おすすめの記事

関連記事

コーディング練習一覧

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

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

【中級編】かんたんなHTML、CSS、JavaScript(jQuery)を使用した複数ページの練習サイト

【上級編】少し複雑な HTML&CSS&JavaScript(jQuery)を使用した様々なレイアウトの練習サイト

【応用編】複雑なHTML&CSS&JavaScript(jQuery)を使用した動きのある練習サイト

【番外編】Webサイト制作でよく使うHTML、CSS、JavaScript(jQuery)を練習