
問題7:カレンダーにありそうな回転文字表記を実装しよう
カレンダーにありそうな回転文字表記...言葉じゃ伝えきれないので
見本を画像を参考に作成してください。
見本を画像を参考に作成してください。
期待する画面

解答ソースコード
<section class="stamp-wrap">
<div class="calender">
<div class="calender__wrap">
<span class="part calender__wrap__day">05</span>
<span class="part calender__wrap__month">february</span>
<span class="part calender__wrap__year">2020</span>
</div>
</div>
</section>
¥HTML¥
.calender {
width: 150px;
height: 150px;
margin: auto;
}
.part {
position: absolute;
}
.calender__wrap {
position: relative;
width: 100%;
height: 100%;
background-color: powderblue;
}
.calender__wrap__day {
font-size: 5.3em;
font-weight: bold;
top: 4px;
left: 4px;
}
.calender__wrap__month {
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1.8em;
font-weight: bold;
}
.calender__wrap__year {
top: 16px;
right: 0;
font-size: 1.5em;
writing-mode: vertical-rl;
text-orientation: upright;
}
¥CSS¥
補足
positionプロパティが使いこなせる様になっていれば、このようなデザインは簡単に実装できるようになります。
文字の太さや背景色などはしっかり観察したうえで、見本通りの見た目を目指しましょう。
文字の太さや背景色などはしっかり観察したうえで、見本通りの見た目を目指しましょう。
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
難しそうに見えてかなり楽に展開できます。
文字の縦配置につきましては、初級弐拾参 を参考にしてください!