@kencellarafoodposted at 2023-12-15

CSS:heightの調整ができません・・・

Q&A

Closed

解決したいこと

親要素である.pointにrelateive指定をし、アニメーション図形を固定表示したいです。
しかし、親要素のCSSでheightの指定をしたいのですが、autoや100%にすると次のsectionと要素が被ってしまいます。
子要素に基づいて、親要素である.pointの高さをいい感じに調整したいのですが、難しいでしょうか・・・？
ちなみに、.pointを700pxなどで指定すると、一応解決しますが、レスポンシブ対応ができなくなってしまいます・・・。

お力添えいただけると幸いです。

現状のコード（CSS）

.point {
    position: relative;
    height: 100%;
}
/*========= 流体シェイプを動かす ===============*/
.fluid {
    width:20%;/*横幅*/
    height: 20%;/*縦幅*/
    background:#00ad2b;/*背景色*/
    animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
    z-index: -10;
  }
  
  @keyframes fluidrotate {  
      
  0%, 100% {
      border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
      border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
      border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
      border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
      border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
      border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
      border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
      
  }

.point .point-image {
    position: absolute;
    top: 0;
    z-index: -100;
    height: 500px;
}

現状のコード（HTML）

<h2 class="title"><span>他社にない強み</span>Point</h2>               

<section class="point">                        
<div class="fluid"></div>
 <div class="point-image">
<img src="img/main-a.jpg"></div>
</section>

<h2 class="title"><span>制作実績</span>Works</h2>
<section class="works">                        
 <img src="img/main-a.jpg">
 </section>

現状の実装画面

目的の実装画面

0 likes

1Answer

@maffy_mf3 posted at 2023-12-15

【HTMLに関して】

よくホームページなどでは、以下のように大枠を「section」で囲って組み立てます。

index.html

<section id="point" class="content">
    <h2 class="title"><span>他社にない強み</span>Point</h2>                       
    <div class="fluid"></div>
        <div class="point-image">
        <img src="img/main-a.jpg"> 
    </div>
</section>


<section id="work" class="content">
     <h2 class="title"><span>制作実績</span>Works</h2>                     
     <img src="img/main-a.jpg">
</section>

【CSSに関して】

「vh」という単位を使うと、画面の縦の長さに対する長さを設定できます。
例えば、「800vh」は画面の縦の長さの80%になります。
ただ縦の長さを固定すると、文字がはみ出したりする場合があるので、paddingで調整することをお薦めします。
元々書かれている.pointは、親要素がないので、当然高さに%を適用できません。
.fluidに関しては、%自体は親要素の縦横の長さに依存するので、pxを使うと一定の大きさになります。
また、親要素の.contentに対してposistion:relative;、子要素の.fluidにabsoluteを適用すると、.fluidが自由に動きます。

style.css

.content {
    position: relative;
    /*height: 40vh;*/
    padding: 20px;
}

.fluid {
    position: absolute;
    margin: 30px 20px;
    width:40px;/*横幅*/
    height: 40px;/*縦幅*/
    background:#00ad2b;/*背景色*/
    animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
    z-index: -10;
  }

1Like

Comments

@kencellarafood
Questioner
ありがとうございます！区切りが大事ですね・・・！何とかなりました。

Are you sure you want to delete the question?