一部に人気のあるCSS完全に理解したTシャツのあの絵。
自分みたいにまだプログラミングを始めてそんなに経ってない人とってはCSSを理解するのに
手っ取り早い教材ではないでしょうか？
そういうわけで自分なりに調べて再現してみました。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="kanzenni.css">
<title>test</title>
</head>
<body>
<div class = "main">
<p class = "main-box">
CSS<br>完全に理解した
</p>
</div>
</body>
</html>
.main{
font-size: 20px;
position: relative;
border: 1px solid;
border-radius: 5px;
width: 140px;
height: 80px;
}
.main-box{
padding-left: 30px;
white-space: nowrap;
position: relative;
bottom: 20px;
}
フォントサイズやボックスのサイズを調整し、p要素をposition relativeで隙間を開けました。
また、文字をボックスの外に突き出すためにwhite-space: nowrap;を記述しました。
white-spaceプロパティとはソース中のテキストについて、自動改行するか複数の空白を一つの空白にするか、改行を空白にするかなど、改行やスペース、タブの扱いを指定するプロパティとのことで、今回はソースの外にはみ出すためにwhite-space: nowrapを記述しました。
結果はこんな感じになりました。
一応成功でしょうかね？
↧