「CSS完全に理解した」に見るposition: absoluteの考え方 #CSS

こちらは2019 あなたが学んだ「ﾁｮｯﾄﾃﾞｷﾙ」を発信する Advent Calendarの記事です。
あれ？何日遅れてるのかなぁ？？？

Twitterで以前バズっていた「CSS完全に理解したTシャツ」というものがあります。
知らないって方はこちら：「CSS完全に理解した」Tシャツが完全にツッコミ待ち　なぜこのデザインに？作者に聞いた

あれを実際にCSSで再現してみました。
再現して分かったのですが、この課題はHTML,CSSの基礎を学んで実際にページを作ろう！ってくらいの初心者にはよい課題になるのではと思いました。

要素を作成する

html

<div id="content">
    <p>CSS<br>完全に理解した</p>
</div>

css

#content {
    border: 2px solid #000000;
    width: 380px;
    height: 160px;
    border-radius: 16px;
}
#content p {
    font-size: 40px;
    line-height: 1.3;
    font-weight: 500;
}

なにも難しいことはしていません。大枠はボックスに枠線をつけてborder-radiusで角丸にしています。
大きさはお好みのサイズで作成してください。

ここまで作成したら、こんなかんじになっているはずです。

ここから、正しい位置にテキストを移動させます。

positionを使用し位置を移動

元画像のように真ん中より少し左の位置からテキストが開始されるように調整します。
いろいろなやり方がありますが、今回はpositionを使用して位置を調整します。

基準となる要素にposition: relative;

まず基準となる要素（今回でいうと#content）にposition: relative;という記述を書きます。
※relativeは相対的という意味です。

css

#content {
    border: 2px solid #000000;
    width: 380px;
    height: 160px;
    border-radius: 16px;
    position: relative; /* 追記 */
}

動かしたい要素にposition: absolute;

そして動かしたい要素(今回でいうとp)にposition: absolute;という記述を追記します。
これによりrelativeを指定した要素の範囲内で、自由な位置に配置できます。
今回はだいたい上から10%、左から40%くらいの位置なので、top,leftを使用して位置を調整します。

css

#content p {
    font-size: 40px;
    line-height: 1.3;
    position: absolute;  /* relativeの範囲内で好きな位置に配置 */
    top: 1%;  /* 上から1%の場所に配置 */
    left: 42%;  /* 左から42%の位置に配置 */
    font-weight: 500;
}

ここまで作成したら、こんなかんじになっているはずです。

あれ？はみ出ませんね？

テキストの改行を防ぐ

テキストが枠内で折り返されてしまっています。
ここでは改行を防ぐためにword-breakを使用します。
word-breakを使用することで、コンテンツからテキストがあふれそうなときでも、強制的に改行します。

完成！

See the Pen CSS Kanzen-Rikai by saki matsushita (@seahorse-design) on CodePen.

position要素は初心者が躓きやすいポイント（私調べ）なので、
簡単な課題としては良い難易度かと思いました。
枠からはみ出させるレイアウトもたびたび遭遇するので、ほかにも色々な方法を試してみるといいかもしれませんね:)