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

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

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

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

解決済

orderを実装後にaタグの指定範囲が勝手に広がり、元に戻したい。order実装後も順番が変わらない原因を知りたいです。

fito3
fito3

総合スコア1

HTML

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

1回答

-1評価

0クリップ

230閲覧

投稿2022/07/30 09:54

前提

プログラミング初心者です。
HTMLとCSSを学んでいます。

■不具合内容:

・「aタグ」の指定範囲が広がる。
<h3>サービス2</h3>と直下<p>タグ文面と、画像「img/img06」まで)
・aタグの指定範囲内のテキストに下線がつく。
・aタグ範囲内でクリックすると指定先リンクへ飛ぶ。
・orderを実装しても、画像とテキストが交互に入れ替わらない。
(テキスト4の画像とテキストは目的通り、交互に順番が変わりました。)

■不具合が起きたタイミング:
下記ソースコードにある、

<h3>サービス2</h3>と、 <h3>サービス4</h3>に配置した、

画像とテキストの順番を、左右交互にする目的で、
(bootstrapで確認した「orber-md-1」と「orber-md-2」)を
実装しました。その直後、不具合が起きました。

■orderを書き込んだ箇所:
テキスト:
<h3>サービス2</h3>」と「<h3>サービス4</h3>」と、
<p>ここにテキストが入ります。</p>」を囲った
<div>タグ」に、
<div class="col-md-6 order-md-1">」と書き込む。

画像:
サービス2 <img src="img/img06.jpg" class="img-fluid" alt="画像6です">を囲った

<div>タグに <div class="col-md-6 order-md-2" id="service2">と書き込む。

サービス4 <img src="img/img08.jpg" class="img-fluid" alt="画像8です">を囲った

<div>タグに <div class="col-md-6 order-md-2" id="service4">と書き込む。 ### 実現したいこと** 1「.aタグ」の指定範囲を、テキストの下に実装した「Lightボタン」だけに収めたいです。 2.最初の目的の画像とテキストを左右入替したいです。**

該当のソースコード HTML

コード

<html lang="azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"> <head> <meta charset="utf-8" <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Edu+VIC+WA+NT+Beginner:wght@500&family=Shadows+Into+Light&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/205b28f9d8.js" crossorigin="anonymous"></script> <title>corporatesite</title> </head> <body> <header> <div class="top-img"> <div class="top-text"> <h1>Corporate Site</h1> <p>弊社は会社情報を伝えるサイトです。</p> </div> </div> </header> <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"><h3>Corporate Site</h3></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link" aria-current="page" href="#"><i class="fa-solid fa-house-chimney"></i>Home</a> <a class="nav-link" href="#feature"><i class="fa-solid fa-lightbulb"></i>Features</a> <a class="nav-link" href="#service"><i class="fa-solid fa-list-ul"></i>Service</a> <a class="nav-link" href="#information" tabindex="-1" aria-disabled="true"><i class="fa-solid fa-info"></i>Information</a> </div> </div> </div> </nav> <div class="feature-area" id="feature"> <h2>Feature</h2> <p>弊社は株式会社〇〇です<br> ここに企業理念が入ります。</p> </div> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/img03.jpg" class="d-block w-100" alt="画像3です"> <div class="carousel-caption d-none d-md-block"> <h5>1枚目の画像です。</h5> <p>説明が入ります。</p> </div> </div> <div class="carousel-item"> <img src="img/img04.jpg" class="d-block w-100" alt="画像4です"> <div class="carousel-caption d-none d-md-block"> <h5>2枚目の画像です。</h5> <p>説明が入ります。</p> </div> </div> <div class="carousel-item"> <img src="img/img05.jpg" class="d-block w-100" alt="画像5です"> <div class="carousel-caption d-none d-md-block"> <h5>3枚目の画像です。</h5> <p>説明が入ります。</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <div class="service-list" id="service"> <h2>Service</h2> <div class="container"> <div class="row service-description"> <div class="col-md-6"> <img src="img/img05.jpg" class="img-fluid" alt="画像5です"> </div> <div class="col-md-6" id="service1"> <h3>サービス1</h3> <p>サービス1ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button> </div> </div> <div class="row service-description"> <div class="col-md-6 order-md-2" id="service2"> <img src="img/img06.jpg" class="img-fluid" alt="画像6です"> </div> <div class="col-md-6 order-md-1"> <h3>サービス2</h3> <p>サービス2ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。</p> <a href="https://getbootstrap.jp/"><button type="button" class="btn btn-light">Light</button></a> </div> </div> <div class="row service-description"> <div class="col-md-6" id="service3"> <img src="img/img07.jpg" class="img-fluid" alt="画像7です"> </div> <div class="col-md-6"> <h3>サービス3</h3> <p>サービス3ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button></a> </div> </div> <div class="row service-description"> <div class="col-md-6 order-md-2" id="service4"> <img src="img/img08.jpg" class="img-fluid" alt="画像8です"> </div> <div class="col-md-6 order-md-1"> <h3>サービス4</h3> <p>サービス4ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> <a href="https://getbootstrap.jp/" target=" blank"><button type="button" class="btn btn-light">Light</button></a> </div> </div> </div> </div> <div class="feature-area" id="information"> <h2>Information</h2> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="info"> <i class="fa-solid fa-user fa-4x"></i> <p>商品説明が入ります。商品説明が入ります。</p> </div> </div> <div class="col-md-4"> <div class="info"> <i class="fa-solid fa-diagram-project fa-4x"></i> <p>商品説明が入ります。商品説明が入ります。</p> </div> </div> <div class="col-md-4"> <div class="info"> <i class="fa-solid fa-laptop-code fa-4x"></i> <p>商品説明が入ります。商品説明が入ります。</p> </div> </div> </div> </div> </div> <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> </body> </html> ### 該当のソースコード CSS *{ margin:0; padding:0; color: #fff; } .top-img{ background-image:url(../img/img01.jpg); background-size:cover; background-attachment:fixed; } .top-text{ text-align:center; padding: 250px 0px; } .top-text h1{ font-size: 100px; font-family: 'Dancing Script', cursive; font-family: 'Edu VIC WA NT Beginner', cursive; font-family: 'Shadows Into Light', cursive; } nav h3{ font-family: 'Dancing Script', cursive; font-family: 'Edu VIC WA NT Beginner', cursive; font-family: 'Shadows Into Light', cursive; color: black; } nav i{ color:#888 } .feature-area{ background-image:url(../img/img02.jpg); background-attachment:fixed; background-size:cover; padding:250px 0; text-align:center; } .feature-area h2{ font-size:80px; font-family: 'Dancing Script', cursive; font-family: 'Edu VIC WA NT Beginner', cursive; font-family: 'Shadows Into Light', cursive; margin:40px; } .service-list{ background-color:black; text-align:center; padding:50px; } .service-list h2{ padding:50px; font-size:80px; font-family: 'Dancing Script', cursive; font-family: 'Edu VIC WA NT Beginner', cursive; font-family: 'Shadows Into Light', cursive; } .service-description{ padding:30px; } #service a{ text-decoration:none; display: block; } ---------------------------------------------- ### 試したこと ・CSSで「text-decoration」プロパティ指定し下線消しました。 ・デベロッパーツールから検証し、不具合発端となった可能性がある「order」消去し、 元に戻るか確認するも戻りませんでした。 ・そのほかあちこち消したり順番変えるも、改善にならず。 よろしくお願いいたします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML

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