inline-blockで作成したボタンがせり上がる

inline-blockで作成したボタンが、画面幅を広げるとせり上がってきてしまいます

・inline-blockをblockにすると使用したいボタンのデザインが使えない

・floatをかけた要素にwidth: 100%などの指定をするとfloatが効かなくなる

文字を左揃えにした要素を右寄せにし、その下のボタンを通常位置に留まるようにしたい

ブロークングリッドのデザインに挑戦していて、疑似要素で背景を作りながら、極力その中に要素が収まるようコーディングをしていました。

該当のソースコード

HTML

  <div class="background_pink">
  <div class="float_clear">
    <p class="text_right">
        当店では毎月、季節に合った草花を使って小物などを作る<br>お花の教室を行っています。色々な告知や、教室の雰囲気、<br>イベントレポートなどは随時ブログ
    </p>
    <a class="btn" href="#">MORE</a>
  </div>
</div>

CSS

.background_pink{
  position: relative;
}

.background_pink::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  background-color: pink;
  border-radius: 15px;
  width: 85%;
  height: 400px;
  z-index: -5;
}

/* テキストをfloatで右寄せ指定 */
.text_right{
  float: right;
  margin-bottom: 50px;
padding-left: 80px;
}

/* floatの回り込み解除 */
.float_clear::after {
  content: "";
  clear: both;
  display: block;
}

/* ボタンの作成 */
.btn{
  position: relative;
  left: 100%;
  transform: translateX(-180%);
  font-size: 1.2rem;
  display: inline-block;
  padding: 0 0 0 3rem;
  margin-right: 3rem;
  text-decoration: none;
  line-height: 3rem;
}

/* 丸の作成 */
.btn::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  z-index: -1;
  width: 2.5rem;
  height: 2.5rem;
  background: blue;
  border-radius: 50%;
  transition: 0.3s ease-out;
}

/* 矢印の作成 */
.btn::after {
  position: absolute;
  content: "";
  top: 42.5%;
  right: -1.5rem;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
}

/*hoverした際の形状*/
.btn:hover {
  color: white;
}

.btn:hover::before {
  width: 10.6rem;
  border-radius: 2rem;
}

.btn:hover::after {
  border-top: 1.5px solid white;
  border-right: 1.5px solid white;
}

試したこと

floatを使わずにmarginを使用して右寄せすると、幅の指定をすることからレスポンシブの際に可変にならない。

長くなってしまいましたが、何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

floatを使ったレイアウトは今となっては古い記述です。レスポンシブ対応させようとすると今回のように複雑なことになります。
今なら、flex か grid を使ってレイアウトするのがお勧めです。

シンプルにできて、レスポンシブレイアウトにも簡単に対応できます。

flexを使ったコード例

css
1.background_pink{
2  display: flex;
3  flex-direction: column;
4  align-items:flex-end;
5  background-color: pink;
6  border-radius: 15px;
7  margin-left: 15%;
8  height: 400px;
9  padding: 0 10px;
10}
11
12.text_right{
13  margin-bottom: 50px;
14}
15
16/* ボタンの作成 */
17.btn{
18  position: relative;
19  font-size: 1.2rem;
20  padding: 0 0 0 3rem;
21  margin-right: 4rem;
22  text-decoration: none;
23  display: flex;
24  align-items: center;
25  z-index: 1;
26  transition: 0.3s ease-out;
27}
28
29/* 丸の作成 */
30.btn::before {
31  content: "";
32  position: absolute;
33  left: 0;
34  z-index: -1;
35  width: 2.5rem;
36  height: 2.5rem;
37  background: blue;
38  border-radius: 50%;
39  transition: 0.3s ease-out;
40}
41
42/* 矢印の作成 */
43.btn::after {
44  content: "";
45  display: block;
46  width: 6px;
47  height: 6px;
48  border-top: 1.5px solid #000;
49  border-right: 1.5px solid #000;
50  transform: rotate(45deg);
51  margin-left: 10px;
52  transition: 0.3s ease-out;
53}
54
55/*hoverした際の形状*/
56.btn:hover {
57  color: white;
58}
59
60.btn:hover::before {
61  width: 10.6rem;
62  border-radius: 2rem;
63}
64
65.btn:hover::after {
66  border-top: 1.5px solid white;
67  border-right: 1.5px solid white;
68}