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

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

新規登録して質問してみよう
ただいま回答率
85.50%
リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1309閲覧

ナビのリストの高さを可変させたい

natsu_kawa

総合スコア15

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/31 03:49

リストの高さを運動に合わせて縮小させたいのですが、うまくいきません。

イメージ説明
イメージ説明
list aのpaddingを%にするなど試みたのですが、高さが固定されてしまいます。メインビジュアルに合わせて高さを変えたいのですが、
どうすればよいでしょうか

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="icon" type="images/png" href=""> <meta name="" content=""> <!-- CSS --> <link href="css/style.css" rel="stylesheet"> <link href="css/reset.css" rel="stylesheet"> </head> <body> <div id="index" class="inner"> <header> <div class="page_title"> <p>PORTFOLIO</p> </div> </header> <main> <div class="g_nav"> <ul> <li><a href="#index">index</a></li> <li><a href="#personal">制作者</a></li> <li><a href="#web_gallery">WEB制作</a></li> <li><a href="#gallery">イラスト・漫画</a></li> <li><a href="#contact">連絡</a></li> </ul> </div> <div class="main_vs"> <img src="img/main.jpg"> </div> </main> </div> </body>
@charset "UTF-8"; /* 共通 */ body{ background-color: #6875FF; } header{ background-color:#343399 ; } .inner{ max-width: 1366px; margin: 0 auto; } li a{ text-decoration: none; color: black; } img{ max-width: 100%; min-width: 700px; height: auto; } /* index */ header{ height: 100px; } .page_title{ display: block; padding-left: 70%; } .page_title p{ font-size: 4rem; } main{ display: flex; } .g_nav ul{ width: 300px; height: auto; background-color: cadetblue; } .g_nav ul li{ padding-top: 20%; padding-bottom:20% ; text-align: center; } .g_nav ul li a{ font-size: 2rem; }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

画像の横幅が1280px、高さが720pxのとき、以下のようなソースコードで実現できると思います。
実際の画像のサイズを調べて、CSSの3箇所を書き換えてください。

画面幅が小さくなったとき、サイドバーの高さがたりなくなるので、overflow: auto;でサイドバー内をスクロールするようにしました。

/* 画面サイズが1366px以上のとき */ .g_nav { overflow: auto; flex: 0 0 300px; /* サイドバーの横幅を300pxで固定 */ /* .innerに指定した横幅が1366pxである前提 */ height: calc((1366px - 300px) * 720 / 1280); /* 画像に対して「min-width: 700px;」が指定されている前提 */ min-height: calc(700px * 720 / 1280); } /* 画面サイズが1365px以下のとき */ @media screen and (max-width:1365px) { .g_nav { /* .innerの横幅 = 画面幅 (100vw) のとき */ height: calc((100vw - 300px) * 720 / 1280); } }

CodePenでやってみました。こちらもご参照ください。


補足:
「画像の元の高さ / 画像の元の横幅」で、画像の横幅に対する高さの割合が算出できます。

そのため、「画像のブラウザでの横幅 * (画像の元の高さ / 画像の元の横幅)」により、そのときのブラウザに表示した画像の高さが算出できるのですが、
この数字をサイドバーの高さに指定することで画像とサイドバーの高さを揃えることができます。

投稿2020/05/31 04:31

編集2020/05/31 05:04
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問