質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

HTML,CSSによるデザインで要素の高さを70%にしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 345

score 18

html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。

イメージ説明

恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。

    <section class="section-box" data-scroll-index="1">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-lg-6 bg-img half-img bgimg-height" data-background="img/1.jpg"></div>

                        <div class="col-lg-6 half-content bg-gray">
                            <div class="box-white">

                                <div class="content mb-50">
                                    <h3 class="mb-15 lg-line-height">Test Test Test Test Test Test Test Test Test .</h3>
                                    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test .</p>
                                </div>
                           </div>
                        </div>

                    </div>
                </div>
            </section>
.section-box .half-img {
      background-position: 50% 50%;
    }
    .section-box .half-content {
      padding: 30px;
    }
    .section-box .box-white {
      padding: 100px 10%;
      background: #fff;
      -webkit-box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
              box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
    }

    .section-box .accordion .item {
      margin-bottom: 30px;
    }
    .section-box .accordion .title {
      padding: 10px 20px;
      background: #fff;
      -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
      border-radius: 30px;
      cursor: pointer;
      position: relative;
    }
    .section-box .accordion .title:after {
      content: '\f067';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 12px;
      position: absolute;
      top: 12px;
      right: 20px;
    }
    .section-box .accordion .title h6 {
      font-size: 16px;
      font-weight: 500;
    }
    .section-box .accordion .accordion-info {
      display: none;
      padding: 0px 15px;
      margin-top: 30px;
      border-left: 1px dotted #ccc;
    }
    .section-box .accordion .accordion-info .spac {
      margin-top: 30px;
      padding-left: 30px;
    }
    .section-box .accordion .accordion-info .spac h6 {
      position: relative;
      margin-bottom: 15px;
    }
    .section-box .accordion .accordion-info .spac h6:after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #555;
      position: absolute;
      top: 3px;
      left: -15px;
    }
    .section-box .accordion .accordion-info .spac ul {
      padding-left: 30px;
    }
    .section-box .accordion .accordion-info .spac li {
      margin-bottom: 10px;
      position: relative;
      font-size: 15px;
    }
    .section-box .accordion .accordion-info .spac li:after {
      content: "";
      width: 6px;
      height: 6px;
      border: 1px solid #222;
      border-radius: 50%;
      position: absolute;
      top: 9px;
      left: -15px;
    }
    .section-box .accordion .active {
      display: block;
    }
    .section-box .accordion .active .title {
      color: #fff;
      background: #2AAFC0;
      background: -webkit-gradient(linear, left top, right top, from(#2AAFC0), to(#6976c5));
      background: linear-gradient(to right, #2AAFC0, #6976c5);
      -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    }
    .section-box .accordion .active .title:after {
      content: '\f068';
    }
    .section-box .vid-butn {
      font-size: 70px;
      color: #2AAFC0;
      position: relative;
      width: 70px;
      height: 70px;
      line-height: 70px;
      z-index: 3;
    }
    .section-box .vid-butn:hover:after {
      -webkit-transform: scale(2, 2);
              transform: scale(2, 2);
      opacity: 0;
      -webkit-transition: all .5s;
      transition: all .5s;
    }
    .section-box .vid-butn:after {
      content: '';
      position: absolute;
      top: -10px;
      bottom: -10px;
      right: -10px;
      left: -10px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      z-index: -1;
      -webkit-transition: all .2s;
      transition: all .2s;
    }
    .section-box .vid-butn:before {
      content: '';
      position: absolute;
      top: -5px;
      bottom: -5px;
      right: -5px;
      left: -5px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      z-index: -1;
    }

background-imageに対して、background-size:100% 70% にしたり、
divに対して、height:70%にしたりしましたがうまくいきません。
右側のグレイの部分のサイズが縮まらなかったりします。

恐縮ですが、アドバイスいただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • cerfweb

    2020/12/31 22:20

    何に対して70%にしたいのでしょうか。画面の高さですか、特定の要素ですか。

    キャンセル

  • solMackartony

    2020/12/31 22:53

    特定の要素の現状の高さに対して70%に縮めたいと思っております。

    キャンセル

回答 1

checkベストアンサー

0

【事前に】

僕も初心者ですが失礼します。コードを書くために、bootstrap(コンポーネントライブラリ)をダウンロードされたと思うんです。

んで、それがだいたい何なのかと説明しちゃったりすると、cssやJavaScript(jQueryベース)などをまとめた道具箱とでも言いましょう。(横文字が苦手な僕はざっくりそう解釈しています。)記述してお分かりになられている通り、箱の中にすでに準備されている道具、つまりクラス内の"mb-15"や"col-lg-6"などの略記部分=”要素の指定(装飾)”なんです。

んで、道具箱を使わないなら、スタイルシート(.css)でクラスやIDに対して、"font-color:red"とか書くことで、”要素の指定”をしてHTMLの装飾ができるんですが、ぶっちゃけ今回HTMLを見るだけで分かっちゃってます。css要らんのです。(記述量多いし、見る側が面倒と感じたりするかも)

んで、デザイン知識がなくてもOKとか謳い文句ありますが、ありゃ盛りすぎです。ぶっちゃけ最低限の知識は要ります。(調べりゃなんとかできますけどね。Progatoとかおすすめですよ。)

長々とすいません。以下本題です。

【本題】

参考サイト:
https://getbootstrap.jp/docs/4.5/utilities/spacing/ (or sizing/)


どのような70%がいいのか聞いてませんが、これかなあ??と感じたのが
"margin","padding","width","height"でしたので、略記法がこのサイトに記されあります。

<div class="content mb-50">
 <h3 class="mb-15 lg-line-height">    //⇦ "h-75" とかをここに入れて微調して下さい
  Test Test ……………… .</h3>
 <p>Test Test ………………… .</p>
</div>

知っているよすでにやってるよとなったら、ほんとすいません。
探究心がまさって回答させていただきました。そして自分のライティング力のなさに悲観しちゃいます。お互いがんばりましょう!!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る