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

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

新規登録して質問してみよう
ただいま回答率
86.02%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

ナビゲーション内のmarginがずれる

takamaru_28
takamaru_28

総合スコア2

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

1回答

0グッド

1クリップ

694閲覧

投稿2022/01/09 06:03

編集2022/01/09 10:45

marginの位置が画面の大きさによって変わるので
画面の大きさが変わってもストーリーアイコンの真ん中にくるようにしたいです。

vwや%を使ってもmarginがずれます。
画面いっぱいの場合
イメージ説明
画面の3分の1
イメージ説明
html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/destyle.css"> <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Document</title> </head> <body> <div class="container"> <nav class="navigation"> <ul id="page-link"> <li class="list active"> <a href="#story"> <span class="icon"><ion-icon name="chatbox-ellipses-outline"></ion-icon></span> <span class="text">ストーリー</span> </a> </li> <li class="list"> <a href="#chara"> <span class="icon"><ion-icon name="person-outline"></ion-icon></span> <span class="text">キャラクター&声優</span> </a> </li> <li class="list"> <a href="#midokoro"> <span class="icon"><ion-icon name="glasses-outline"></ion-icon></span> <span class="text">見どころ</span> </a> </li> <div class="indicator"></div> </ul> </nav> </div> </body> <script src='js/bdd.js'></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </html>

style.css

:root{ --clr: #fff; } .navigation{ position: relative; width: 100%; height: 70px; background:turquoise; display: flex; justify-content: center; align-items: center; border-radius: 10px; margin-top: 15px; } .navigation ul{ position: relative; display: flex; width: 100%; } .navigation ul li{ position: relative; list-style: none; width: 33vw; height: 70px; z-index: 1; } .navigation ul li a{ position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; text-align: center; font-weight: 500; } .navigation ul li a .icon{ position: relative; display: block; line-height: 75px; font-size: 1.5em; text-align: center; transition: 0.5s; color: var(--clr); } .navigation ul li.active a .icon{ transform: translateY(-32px); } .navigation ul li a .text{ position: absolute; color: var(--clr); font-weight: 400; font-size: 0.75em; letter-spacing: 0.05em; transition: 0.5s; opacity: 0; transform: translateY(20px); } .navigation ul li.active a .text{ opacity: 1; transform: translateY(10px); } .indicator{ position: absolute; top: -52%; margin-left: 14.2vw; width: 70px; height: 70px; background: #29fd53; border-radius: 50%; border: 6px solid var(--clr); transition: 0.5s; } .indicator::before{ content: ''; position: absolute; top: 50%; left:-22px; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 1px -10px 0 0 var(--clr); } .indicator::after{ content: ''; position: absolute; top: 50%; right:-22px; width: 20px; height: 20px; background: transparent; border-top-left-radius: 20px; box-shadow: -1px -10px 0 0 var(--clr); } .navigation ul li:nth-child(1).active ~ .indicator{ transform: translateX(calc(33vw*0)); } .navigation ul li:nth-child(2).active ~ .indicator{ transform: translateX(calc(33vw*1)); } .navigation ul li:nth-child(3).active ~ .indicator{ transform: translateX(calc(33vw*2)); }

bdd.js

const list = document.querySelectorAll('.list'); function activeLink(){ list.forEach((item) => item.classList.remove('active')); this.classList.add('active'); } list.forEach((item) => item.addEventListener('mouseover',activeLink));

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

recal

2022/01/09 07:26

これってなぜ伏せられてるのかわかりませんがionicも読み込んでるんですよね? その他にもreset.css的なものなど読み込んでたりしますか? そうゆうのも含めて調整や再設計する必要があると思うので もし使っているものがあれば全部共有してもらわないと、と思いました。
takamaru_28

2022/01/09 10:47 編集

destyle.cssがcssをリセットするものですが、長すぎて追加できなかったです。 必要なものを追加しておきました

回答1

2

ベストアンサー

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- <link rel="stylesheet" href="css/destyle.css"> --> 6 <link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css"> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <div class="container"> 12 <nav class="navigation"> 13 <ul id="page-link"> 14 <li class="list active"> 15 <a href="#story"> 16 <span class="icon"><ion-icon name="chatbox-ellipses-outline"></ion-icon></span> 17 <span class="text">ストーリー</span> 18 </a> 19 </li> 20 <li class="list"> 21 <a href="#chara"> 22 <span class="icon"><ion-icon name="person-outline"></ion-icon></span> 23 <span class="text">キャラクター&声優</span> 24 </a> 25 </li> 26 <li class="list"> 27 <a href="#midokoro"> 28 <span class="icon"><ion-icon name="glasses-outline"></ion-icon></span> 29 <span class="text">見どころ</span> 30 </a> 31 </li> 32 <!-- <div class="indicator"></div> --> 33 <div class="indicator-wrap"> 34 <div class="indicator"></div> 35 </div> 36 </ul> 37 </nav> 38 </div> 39</body> 40<script src='bdd.js'></script> 41<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 42<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 43<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 44</html>

css

1:root{ 2 --clr: #fff; 3 } 4 .navigation{ 5 position: relative; 6 width: 100%; 7 height: 70px; 8 background:turquoise; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 border-radius: 10px; 13 margin-top: 15px; 14 } 15 .navigation ul{ 16 position: relative; 17 display: flex; 18 width: 100%; 19 } 20 .navigation ul li{ 21 position: relative; 22 list-style: none; 23 width: 33vw; 24 height: 70px; 25 z-index: 1; 26 } 27 .navigation ul li a{ 28 position: relative; 29 display: flex; 30 justify-content: center; 31 align-items: center; 32 flex-direction: column; 33 width: 33vw; 34 text-align: center; 35 font-weight: 500; 36 } 37 .navigation ul li a .icon{ 38 position: relative; 39 display: block; 40 line-height: 75px; 41 font-size: 1.5em; 42 text-align: center; 43 transition: 0.5s; 44 color: var(--clr); 45 } 46 .navigation ul li.active a .icon{ 47 transform: translateY(-32px); 48 } 49 .navigation ul li a .text{ 50 position: absolute; 51 color: var(--clr); 52 font-weight: 400; 53 font-size: 0.75em; 54 letter-spacing: 0.05em; 55 transition: 0.5s; 56 opacity: 0; 57 transform: translateY(20px); 58 } 59 .navigation ul li.active a .text{ 60 opacity: 1; 61 transform: translateY(10px); 62 } 63 .indicator-wrap{ 64 position: absolute; 65 width: 33vw; 66 height: 70px; 67 top: -2%; 68 transition: 0.5s; 69 } 70 .indicator{ 71 position: relative; 72 top: -52%; 73 width: 70px; 74 height: 70px; 75 margin-left:auto; 76 margin-right:auto; 77 background: #29fd53; 78 border-radius: 50%; 79 border: 6px solid var(--clr); 80 transition: 0.5s; 81 } 82 .indicator::before{ 83 content: ''; 84 position: absolute; 85 top: 50%; 86 left:-22px; 87 width: 20px; 88 height: 20px; 89 background: transparent; 90 border-top-right-radius: 20px; 91 box-shadow: 1px -10px 0 0 var(--clr); 92 } 93 .indicator::after{ 94 content: ''; 95 position: absolute; 96 top: 50%; 97 right:-22px; 98 width: 20px; 99 height: 20px; 100 background: transparent; 101 border-top-left-radius: 20px; 102 box-shadow: -1px -10px 0 0 var(--clr); 103 } 104 .navigation ul li:nth-child(1).active ~ .indicator-wrap{ 105 transform: translateX(calc(33vw*0)); 106 } 107 .navigation ul li:nth-child(2).active ~ .indicator-wrap{ 108 transform: translateX(calc(33vw*1)); 109 } 110 .navigation ul li:nth-child(3).active ~ .indicator-wrap{ 111 transform: translateX(calc(33vw*2)); 112 }

修正したポイントとして、まずHTMLに

html

1 <!-- <div class="indicator"></div> --> 2 <div class="indicator-wrap"> 3 <div class="indicator"></div> 4 </div>

indicator-wrapというワクを追加しました。
ワクの幅を33vw、navigator ul liも33vw、aも33vwで統一します。

移動はマルじゃなくindicator-wrapの単位でtranslateさせて、マルはindicator-wrapに対してrelativeで相対的に追従させることにし、margin-leftmargin-rightをautoにしてセンタリングします。JSは触ってないです。

投稿2022/01/09 14:13

umau

総合スコア805

takamaru_28, recal👍を押しています

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

takamaru_28

2022/01/09 15:19

試してみたらできました! ありがとうございます。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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