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

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

新規登録して質問してみよう
ただいま回答率
85.46%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

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

Q&A

解決済

1回答

383閲覧

二つのクラスに同じ値の「height: 92 vh;」と指定しているのですが、同じスタイルになりません

OHASI

総合スコア96

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

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

0グッド

0クリップ

投稿2023/02/28 18:02

質問

二つのクラスに同じ値のheight: 92 vh;と指定しているのですが、同じスタイルになりません。具体的には画像の左の白い四角と右の白い四角の縦の長さが同じになりません。

イメージ説明

ソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Prodiary</title> 6 <meta name="description" content="プログラミング独学を支え合う。"> 7 <meta name="keywords" content="プログラミング学習,プログラミング独学"> 8 <link rel="stylesheet" href="../css/style.css"> 9 <!--[if lt IE 9]> 10 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 11 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 12 <![endif]--> 13 </head> 14 15 <body> 16 <div class="wrapper"> 17 <div class="contents"> 18 19 <!----- メインコンテンツ -----> 20 <div class="nav-box"> 21 <div class="nav-box__inner icon"> 22 prodiary 23 </div> 24 <div class="nav-box__inner nav-box"> 25 <nav> 26 <div class="myicon">マイページ</div> 27 <ul class="item_box"> 28 <li class="item">新規作成</li> 29 <li class="item">ブログ</li> 30 <li class="item">タイムライン</li> 31 <li class="item">設定</li> 32 </ul> 33 </nav> 34 </div> 35 </div> 36 <div class="main"> 37 <div class="search-box"> 38 <button class="serch-button"></button> 39 <form action=""></form> 40 </div> 41 <h1>ブログ一覧</h1> 42 <div class="blog-box"> 43 <div class="blog-box__left"> 44 <div class="blog-title">Dockerでrailsの環境構築をする方法</div> 45 <div class="blog-description">再度MacOSをクリーンインストールしようかとも思いましたが、Adobe系のソフトはGNU系の代替ソフトで我慢すれば、もはやMacに固執する必要もないと思った</div> 46 <div class="article-button"> 47 <button>記事を読む ≫</button> 48 </div> 49 </div> 50 <div class="blog-box__right"> 51 <div class="thumbnail"></div> 52 </div> 53 </div> 54 </div> 55 <aside class="aside"> 56 <h1>タイムライン</h1> 57 <ul class="timeline_box"> 58 <li class="timeline-item"> 59 <div class="post-time">2023/03/01</div> 60 <div class="usrename">@sample-spz</div> 61 <div class="item-box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae corporis iure deserunt, eveniet aliquid dolor nemo, commodi quam quae amet expedita nulla, et sapiente laborum doloremque dolores fugit non omnis!</div> 62 </li> 63 </ul> 64 </aside> 65 <!----- メインコンテンツ END -----> 66 67 <!----- フッター -----> 68 <footer> 69 70 </footer> 71 <!----- フッター END -----> 72 </div> 73 </div> 74 </body> 75</html>

scss

1$home-box__color: white; 2 3html { 4 width: 100%; 5 height: 100%; 6 padding: 0; 7} 8 9ul { 10 list-style: none; 11 padding: 0; 12} 13 14body { 15 width: 100%; 16 height: 100%; 17 padding: 0; 18 background-color: #ededed; 19} 20 21.contents { 22 display: flex; 23 justify-content: space-between; 24 width: 100%; 25 max-width: 1400px; 26 margin: 20px auto 0; 27} 28 29/*=====================質問箇所=====================*/ 30.nav-box, .aside { 31 padding: 0; 32 height: 92vh; 33 border-radius: 30px; 34 background-color: $home-box__color; 35} 36/*=================================================*/ 37 38/* ナビバー */ 39.nav-box { 40 width: 18%; 41 .nav-box__inner { 42 width: 100%; 43 } 44} 45 46/* センター */ 47.main{ 48 width: 48%; 49} 50 51/* タイムライン */ 52.aside { 53 width: 28%; 54}

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

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

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

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

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

guest

回答1

0

自己解決

<div class="nav-box__inner nav-box">nav-boxと書いていたため、nav-boxnav-boxで囲まれる構造になっていた。

投稿2023/02/28 18:17

OHASI

総合スコア96

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問