問題

6
HTML/CSS

文字を浮かせて真ん中に配置しよう

別の要素である文字を真ん中に配置するには、その文字の要素を浮かせる必要があります。この要素を浮かせる方法が分かれば、今後配置をコンロトールできるようになるので是非挑戦してみましょう!

HTML/CSSの問題に挑戦しよう!

問題

文字を浮かせて真ん中に配置しよう

block要素の中に文字を浮かせて表示させましょう。

浮かせた文字はblock要素のど真ん中に設置するようにしましょう。
見本参考にしてください。

あらかじめエディタに書くコード

                    <div>
  <p>ど真ん中</p>
</div>
¥HTML¥
                

期待する画面

解答の画像

解答と解説(文字を浮かせて真ん中に配置しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

このように要素の上に要素を置く場合は、position: relative;/position: absolute;を使います。
親要素にrelativeを子要素にabsoluteと覚えましょう。

真ん中にする方法ですが、子要素にabsoluteを付与した状態で top: 50%;left: 50%;transform: translate(-50%, -50%);を付与する事でど真ん中に設置されるようになります。
また、ここで使用しているmargin: 0;はpタグにデフォルト値で設定されているmarginを0にしています。

補足

positionは、ページ上で要素がどのように配置されるかを設定できる重要なプロパティです。多くのWebサイトで使用されています。
設定できる値は、今回登場したふたつ以外にも、fixedやsticky、staticが用意されています。
Webページ上で画面をスクロールしてもずっと追尾してくるヘッダーやバナーを見たことがあるかと思いますが、あれらもこのpositionプロパティを使用して表示されています。

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら
最大100,000円OFF 対象期間中に初めて無料相談にお申し込みされた方へ 無料相談はこちら