Zenn
👕

あの日見たCSS完全に理解したを僕達はまだ知らない。

2021/10/23に公開4件
CSS
HTML
tech

あの日見たCSS完全に理解したを僕達はまだ知らない。

エンジニア界隈での「〇〇完全に理解した」というのは、本当に理解したという意味でとらえないことが多いです。(日本語って難しいですね...)

「〇〇完全に理解した」で一番有名と言っても過言ではないものとして、「CSS完全に理解した」があります。これは以下の画像のようにTシャツとして売られています。

これを見た私はいくつかの疑問を持ちました。

  • CSSを完全に理解していないから、このような見た目になるのか？
  • CSSがわかる人でも、この見た目を作るのは逆に難しいのか？
  • 意図的にこの見た目を作るのは難しすぎてCSSがわかる人でないと作れないから、この見た目を作れて完全に理解したと主張しているのか？

疑問は膨らむばかりです。

ということで今回は、「CSS完全に理解した」を実際にやってみたという記事です。

「CSS完全に理解した」を作成する

はい、実際にHTMLとCSSで作っていきましょう。今回は５パターンやってみました。
他にやり方もあるでしょうが、思いつきませんでした。他のやり方がわかる人はコメントで教えてください(笑)

前提

作成するにあたっての前提を以下に記載します。

  • 動作確認ブラウザ
    • Google Chrome
  • フォントは合わせていません。
  • HTMLファイル(index.html)は共通とする。
    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="destyle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>CSS完全に理解した！</title>
</head>
<body>
    <p class="pattern">パターンX</p>
    <div class="wrapper">
        <div class="content">
            <p>CSS</p>
            <p>完全に理解した</p>
        </div>
    </div>
</body>
</html>
    • 見出しの<p class="pattern">パターンX</p>のXは1~5が入ります。
    • <p>CSS<br>完全に理解した</p>でも実現可能である。
  • リセットCSSであるdestyle.cssを当てている。
    • destyle.cssの中身は省略とする。
  • style.cssにCSSを記載していく。

1. 「CSS完全に理解した」のwidthを設定し、marginではみ出させる

「CSS完全に理解した」のwidthを文字が折り返されない幅を設定する。今回はwidth: 100%として親の幅を指定しました。あとはmargin-left: 52pxでちょうどよく右に寄せにします。(52pxとしたのは、画像のとおり右の縦線が「し」の真ん中を貫く幅を指定しました)

style.css
@charset "utf-8";

body {
    margin-top: 40px;
    padding: 0 4%;
    font-size: 1.6rem;
}

.pattern {
    margin-bottom: 8px;
    font-weight: bold;
}

/*パターン1*/
.wrapper {
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    width: 100%;
    margin-left: 52px;
}

こちらが結果です。

上記CSSのbodyと.patternは共通のため、以下からは省略します。

2. white-space: nowrapで折り返しをさせない

white-space: nowrapを指定することで文字の折り返しをキャンセルできます。あとはmarginで位置を調整してやります。

style.css
.wrapper {
    display: inline-block;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    white-space: nowrap;
    margin-left: 52px;
}

こちらが結果です。

3. position: absoluteで配置をする

位置をposition: absoluteで配置します。折り返しないようにwidthは設定しておきます。

style.css
.wrapper {
    display: inline-block;
    position: relative;
    width: 220px;
    height: 100px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    position: absolute;
    width: calc(100%);
    top: 8px;
    left: 76px;
}

こちらが結果です。

4. transform: translateXで配置をする

位置をtransform: translateX(xx)で配置します。translateXで要素を水平方向で再配置するため、widthは指定しなくても良いです。

style.css
.wrapper {
    display: inline-block;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    transform: translateX(52px);
}

こちらが結果です。

5. flex-shrink: 0で折り返しさせない

全体をdisplay: flexとし、その子要素でflex-shrink: 0とすると、そのアイテムは縮まなくなります。あとはmarginで位置を調整してやります。

style.css
.wrapper {
    display: flex;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    flex-shrink: 0;
    margin-left: 52px;
}

こちらが結果です。

結論

上記で紹介したように、CSSを少しでも知っていれば実現できそうなやり方で実現できました。
冒頭で触れた以下の答えが自分の中で明らかになりました。

  • CSSを完全に理解していないから、このような見た目になるのか？
    • はい、そうです。CSSを理解せずに適当にやったらできたものと思われる。
  • CSSがわかる人でも、この見た目を作るのは逆に難しいのか？
    • そうでもなかった。全く難しくない。
  • 意図的にこの見た目を作るのは難しすぎてCSSがわかる人でないと作れないから、この見た目を作れて普通の意味で完全に理解したと主張しているのか？
    • 意図的にこの見た目を作るのは難しくないので、この見た目を作れて普通の意味で完全に理解したと主張しているわけではなさそう。

まとめ

「CSS完全に理解した」を作成して、「CSS完全に理解した」を理解しました。
あくまでもこれは自分の中の意見です。
※ちなみに私はこの「CSS完全に理解した」ネタは面白くて大好きです。(今度Tシャツ買お。)

Discussion

KUROROKURORO

こんにちは〜

タイトルを見まして、気になったので拝見してみました。

CSSを通して「CSSを完全に理解した」について考える気持ち、大好きです！！

Tシャツの再現も期待してます〜！！

__Tomoki____Tomoki__

KUROROさん。コメントありがとうございます！
Tシャツの再現ですか〜、時間ある時にでも挑戦してみようと思います〜！

とらべらーとらべらー

とても面白い記事でした。
私もいろいろ模索した結果、以下のgridレイアウトでも再現できました！

.wrapper {
	display: grid;
	border: solid 3px #333;
	border-radius: 12px;
	width: 220px;
}
.content {
	grid-area: 1/-1;
	padding: 10px 0 24px 75px;
	width: 220px;
}
.content p {
	width: 220px;
}
__Tomoki____Tomoki__

ゆるけーさん。コメントありがとうございます。
なるほど、gridでもいけるのですね！
また別なやり方が分かったら教えてください！