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

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

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

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

CSS

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

解決済

横方向のスクロールバーを消したい

Iori
Iori

総合スコア48

HTML

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

CSS

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

1回答

0リアクション

0クリップ

262閲覧

投稿2022/09/27 15:00

前提

パーソナルサイトを作っています。
画像の赤矢印のようになぜか横方向にスクロールバー(?)が表示されます。

実現したいこと

このバーを消したいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Iori's Website</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <!-- FAVICON --> <link rel="icon" href="./images/icons8-ココナッツ-48 (1).png"> <!-- slick 👩‍🎓headとbody終わりの直前--> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles.css"> <!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> --> </head> <body class="text-center"> <!-- NAVBAR --> <nav class="navbar navbar-expand-lg navbar-transparent"> <a class="navbar-brand" href="">yoriss67</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="nav navbar-nav ms-auto flex-row "> <li class="nav-item pl-3"> <i class="fa-brands fa-2x fa-github"><a href="https://github.com/yoriss67" target="_blank"></a> </i> <!-- <a class="nav-link" href="">Contact</a> --> </li> <li class="nav-item pl-3"> <i class="fa-brands fa-2x fa-twitter"> <a href="https://twitter.com/iori73wsy" target="_blank"></a> </i> <!-- <a class="nav-link" href="">Pricing</a> --> </li> <li class="nav-item pl-3"> <i class="fa-brands fa-2x fa-instagram"> </i> <a href="https://www.instagram.com/ioriiii_13/" target="_blank"></a> <!-- <a class="nav-link" href="">Download</a> --> </li> </ul> </div> </nav> <!-- HEADER --> <header id="header"> <div> <h1 class="fadeIn inview">Thank you for visiting.</h1> </div> <div class=""> <p class="fadeIn inview" data-test-daa="This is a test">I'm Iori.</p> </div> </style> </header> <div class="aboutme"> <h1>About Me</h1> <div class="row"> <div class="col-md-6" id="colLeft"> <img class="imgprofile" src="images/8fdb71d0-e360-4b74-9761-7795784871bd-0-modified.png" alt="my-profile" width="200px" height="200px"> </div> <div class="col-md-6"> <p>I'm a sophomore student at a university in Japan. My major is English and Social Science. <br><br>I have started studying programming out of mainly curiosity and a bit of hope to make use of it for my future career.</p> </div> </div> <!-- <a href="https://www.notion.so/396eca31a8f44b5c989ac4b8efa302f0?v=c3d6906ee5654da9a5534cfa7b0b79bc&p=d67a03c53bd949b0902f76774734cf57&pm=s" target="_blank">Here's my Notion.</a> --> </div> <!-- WHATILIKE --> <div class="whatilike"> <h1>What I like</h1> <div class="slider"> <div><img src="images/surfers.jpg" alt="surfers" /></div> <div><img src="images/circle.jpg" alt="circle" /></div> <div><img src="images/kelia.jpg" alt="kelia" /></div> <div><img src="images/sunset.jpg" alt="sunset" /></div> <div><img src="images/surfboy.jpg" alt="surfboy" /></div> <div><img src="images/yogurt.jpg" alt="yogurt" /></div> <div><img src="images/palmtree.jpg" alt="palmtree" /></div> <div><img src="images/yoga.jpg" alt="yoga" /></div> </div> </div> </div> <!-- <div class="row"> <div class="col-md-8"> --> <h1>Works</h1> <div class="works"> <ul> <li id="travelBlog"> <div> <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank"> <img src="./images/images06.jpg" alt="images06"> <h5>Travel Blog</h5> </a> </div> <div> <small> Sep 2022 </small> <p>This is my first reproduction.</p> </div> </li> <li id="travelBlog"> <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank"> <img src="./images/images06.jpg" alt="images06"> <h5>Travel Blog</h5> </a> <span> Sep 2022 </span> </li> <li id="travelBlog"> <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank"> <img src="./images/images06.jpg" alt="images06"> <h5>Travel Blog</h5> </a> <span> Sep 2022 </span> </li> </ul> <!-- </div> </div> --> <!-- ⭐⭐⭐⭐⭐ --> <!-- <div class="col-md-3"> <div class="mywebdevelopmentpath"> --> <!-- <h1>My Web Development Diary</h1> <ul> <li>aaaaaaaaa</li> <li>aaaaaaaaaa</li> <li>aaaaaaaaa</li> <li>aaaaaaaa</li> <li></li> </ul> --> <!-- Web Dev Blog--> <!-- <button data-modal-id="modal-1">Open Modal 1</button> <button data-modal-id="modal-2">Open Modal 2</button> <div id="modal-1">Modal 1</div> <div id="modal-2">Modal 2</div> --> <!-- <i class="fa-solid fa-book"></i> --> </div> <!-- <h1>English Study</h1> </div> --> <!-- ⭐⭐⭐⭐⭐--> </div> <h1>Contact</h1> <div class="contact"> <div class="github marking"> <i class="fa-brands fa-2x fa-github"></i> <a href="https://github.com/yoriss67" target="_blank">yoriss67</a> </div> <div class="twitter marking"> <i class="fa-brands fa-2x fa-twitter"></i> <a href="https://twitter.com/iori73wsy" target="_blank">Iori67</a> </div> <div class="instagram marking"> <i class="fa-brands fa-2x fa-instagram"> </i> <a href="https://www.instagram.com/ioriiii_13/" target="_blank">ioriii_13</a> </div> </div> <!-- inview CDN --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"> </script> <!-- inview download --> <!-- <script src="./jquery.inview.min.js"></script> --> <!-- slick --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"> </script> <script src="index.js"></script> </body> </html>

CSS

* { background-attachment: fixed; } h1 { font-weight: bold; text-align: center; } /* NAVBAR */ nav { background-color: transparent; } .navbar-nav { /* background-color: rgba(226, 241, 252, 0.8); */ margin-top: 10px; } .navbar { padding: 10px 20px; background-color: transparent; } .navbar-brand { font-weight: bold; color: black; } .nav-item { padding: 0 10px; display: flex; } .flex-row { justify-content: space-around; } .navbar-toggler { border: 1px solid; color: rgba(157, 177, 165, 0.54); } /* HEADER */ header { padding: 300px 0; background-image: url(images/top.jpg); height: 50px; margin-bottom: 20px; } .fadeIn { color: #fff; opacity: 0; transition: 1s; } .fadeIn.is-show { opacity: 1; } /* ABOUT ME */ .aboutme { margin-bottom: 20px; } .imgMyprofile { margin-top: 20px; margin-bottom: 20px; } .col-md-6>p { text-align: left; padding-top: 2rem; /* padding-left: 2em; */ left: 3%; align-items: center; } @media screen and (min-width: 768px) { .imgprofile { text-align: center; } .col-md-6 { align-items: center; flex-wrap: wrap; box-sizing: border-box; width: 50%; border-left: 5px; } .col-md-6> p { padding-right: 9rem; } #colLeft { padding-left: 15em; padding-right: 0; } } @media screen and (max-width: 768px) { .col-md-6>p { text-align: center; } } /* WHAT I LIKE */ .whatilike { margin: 20px auto; } .slider img { width: 95%; } /* @media screen and (max-width: 768px) { .slider img { width: 90%; } } */ /* ROW */ /* .row { display: flex; margin-top: 50px; margin-left: 0; margin-right: 0; } */ /* WORKS */ .works { display: flex; /* flex-wrap: wrap; */ width: 80%; margin: 0 auto; } .works li { list-style: none; } .works ul { display: flex; } .works img { width: 80%; height: auto; } /* MY DEVELOPMENT DIARY */ /* .col-md-3 ul { list-style-type: none; } */ /* ENGLISH STUDY */ /* CONTACT */ .contact .marking{ margin: 30px auto; } @media screen and (min-width: 768px) { .contact { display: flex; justify-content: center; align-items: center; } .marking { padding: auto 2em; } } a { text-decoration: none; }

試したこと

CSSのpadding, marginを一つずつ消して変化を見てを繰り返しましたが変わりませんでした。

アドバイスよろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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

CSS

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