ログイン
問題6

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

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

アイコン画像

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

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

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

エディターのアイコンあらかじめエディタに書くコード

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

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <div>
  <p>ど真ん中</p>
</div>
¥HTML¥
            
              div {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #0e6edf;
}
p {
    color: #fff;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
¥CSS¥
            

コメントのアイコン解説

このように要素の上に要素を置く場合は、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プロパティを使用して表示されています。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる