はてなブログで会話風デザインをCSSで書いてみたら大苦戦した件 - 寝そべり族が日本と世界を眺めているだけ…

はてなブログを書き始めて1ヶ月。

そろそろデザイン面でも、他の人と差別化したいなと感じていました。

「そうだ！会話風のデザインだと読んでいる人にも分かりやすいかも！」

と、思い、久しぶりにCSSを書いてみましたが…思った以上に大苦戦！

今回は途中までの経過や反省点を書きます。

1.やりたいイメージはこれ

自分がやりたかったイメージとしては上の画像のような物です。

左側の薄いグレーには人物の画像を、右側の濃いグレーには吹き出し画像を置きます。

更に右側ブロックの上に透明なブロックを乗せて、テキストを表示させる…というもの。

これなら左右のボックスの大きさとCSSの中身を入れ替えるだけで

〇＜実ははてなブログでも会話風が出来るんだよ！

ﾅ､ﾅﾝﾀﾞｯﾃｰ！＞〇

みたいになるんじゃないかと思っていました。

2.大苦戦したのでChat GPTに頼る私…

さてやりたいことは分かったので、いざCSSを書いてみようか…と思ったのですが

何年もCSSなんか書いていなかったので、チンプンカンプンです。

ググっても頭の中には「？」しか浮かびません。

そこでChat GPTに頼った結果、以下のCSSとHTMLを提示してきました。

HTML:

<div class="parent">
<div class="child child1">20%のブロック</div>
<div class="child child2">
<div class="overlay">
<div class="centered-child">中央に配置されるブロック</div>
</div>
</div>
</div>

CSS:

.parent {
display: flex;
}

.child {
padding: 10px;
}

.child1 {
flex: 2;
width: 20%;
background-color: lightgray;
}

.child2 {
flex: 7;
width: 70%;
background-color: gray;
position: relative;
}

.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
z-index: 1;
}

.centered-child {
background-color: white;
padding: 20px;
}