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

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

ただいまの
回答率

87.59%

段組の解除がうまくいきません

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 528

score 20

前提・実現したいこと

index.htmlで一部を段組にして、それ以降を段組を解除して表示させたいと考えています。

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

段組した記述以降がすべて、段組になってしまします。解除されません。

エラーメッセージ


エラーメッセージは出ません。

html

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

以下がindex.htmlの一部です。
<div class="blocka">
<p>□ Home</p>
<p>■<a href="lessons.html" target="_self">講座内容</a></p>
<p>■<a href ="schedule.html" target="_self">時間割</a></p>
<p>■<a href="choice.html" target="_self">選択</a></p>
<p>■<a href="link.html" target="_self">リンク集</a></p>
<p>■<a href="calendar.html" target="_self"></a></p>
</div>

<div class="blockb">
<p>■<a href="kids.html" target="_self">KIDS</a></p>
<p>■<a href="QandA.html">QandA</a></p>
<p>■<a href="news.html">記事</a></p>
<p>■<a href="access.html">アクセス</a><p>
</div>

</div>
<div>
<a href="tel:03-333-3333"><h3 class="h3font">電話をかける</h3></a>
<a href="mailto:info@kids.com"><h3 class="h3font">メールはこちら

</h3></a>
</div>

style sheetでは以下のようにしてあります。

div.blocka 
{
float:left;
width:50%;
}

div.blockb
{
clear:right;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • stdio

    2019/02/18 09:58

    インデントが無ければ、基本プログラマは見ないので、きちんとしましょう。
    今のままでは、「やってほしいことだけを記載した丸投げの質問」と認識されますよ。

    キャンセル

  • hisayan

    2019/02/19 07:16

    大変失礼いたしました。あの後、指摘いただいたこととなどを考えて試行錯誤してなんとかできました。ありがとうございました。

    キャンセル

  • m.ts10806

    2019/02/19 08:43

    質問は編集できますので適宜ご対応ください。「自分さえ解決すればそれでいい」ような姿勢だとそのうち誰も相手しなくなります。
    質問を読みやすくするのはまず一歩です。

    キャンセル

回答 2

+1

※注 回答ではなく編集依頼です。

<div class="blocka">
  <p>□ Home</p>
  <p><a href="lessons.html" target="_self">講座内容</a></p>
  <p><a href ="schedule.html" target="_self">時間割</a></p>
  <p><a href="choice.html" target="_self">選択</a></p>
  <p><a href="link.html" target="_self">リンク集</a></p>
  <p><a href="calendar.html" target="_self"></a></p>
</div>

<div class="blockb">
  <p><a href="kids.html" target="_self">KIDS</a></p>
  <p><a href="QandA.html">QandA</a></p>
  <p><a href="news.html">記事</a></p>
  <p><a href="access.html">アクセス</a><p>
</div>

</div> <!-- このdivタグどこのdivの終わりですか???-->

<div>
  <a href="tel:03-333-3333"><h3 class="h3font">電話をかける</h3></a>
  <a href="mailto:info@kids.com"><h3 class="h3font">メールはこちら</h3></a>
</div>
div.blocka {
  float:left;
  width:50%;
}

div.blockb{
  clear:right; /*右寄せされた要素に対する回り込みを解除するやつですが・・・。*/
}

![イメージ説明

↑今再現すると上の画像のようになります。

【編集していただきたいこと】
・HTMLの中にある不要なDIVタグがありますが、開始はどこへいったのでしょうか。
・段組み解除したいとおっしゃりますが、具体的な最終目標を図解していただきたいです。
(現状どこをどうしたらいいか文章だけからは判断がつきにくいです)
(一応clear:right を clear:leftに変えると右にあるdivは左によりますがそういうことではないですよね・・・?)

CSSのclearに関するHP

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/18 12:42

    右も左も分からないならbothにすればいいのに、と思わなくもないですね。

    キャンセル

  • 2019/02/18 13:04

    (bothならとりあえず回り込み解除してくれますからね)

    キャンセル

check解決した方法

-2

自己解決しました。htmlは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head><!--このファイルの最終更新日2019/2/14-->
<meta charset="utf-8">
<meta name="author" content="Kids体操クラブ">
<meta name="description" content="KIds体操クラブの前身は19    

80年にスタートした体操教室です。今では子どもから中高年の方まで通っています">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=device-width">
<title>Kids体操クラブのTopPage</title>
<link href="style_index.css" media="all" rel="stylesheet">
</head>
<body>
<h1>Kids体操クラブ<sup>
<main>
<p class="border-solid3">
Kids体操クラブは肉体的なハンディキャップのある方にも授業もおこなっています。
</p>
</main>

<div class="floating">
<p>□ Home</p>
<p>■<a href="lessons.html" target="_self">講座内容</a></p>
<p>■<a href ="schedule.html" target="_self">時間割</a></p>
<p>■<a href="choice.html" target="_self">選択</a></p>
<p>■<a href="link.html" target="_self">リンク集</a></p>
</div>

<div class="floating">
<p>■<a href="calendar.html" target="_self">カレンダー</a></p>
<p>■<a href="kids.html" target="_self">KIDS</a></p>
<p>■<a href="QandA.html">QandA</a></p>
<p>■<a href="news.html">記事</a></p>
<p>■<a href="access.html">アクセス</a><p>
</div>

<div class="clearfloating">
<a href="tel:03-333-3333"><h3 class="h3font">電話をかける</h3></a>
<a href="mailto:info@kids.com"><h3 class="h3font">メールはこちら</h3></a>
</div>

</body>
</html>

cssは以下の通りでした。

<style>  

div.floating
{
float:left;
width:50%;
}

div.clearfloating
{
clear:both;
}

</style>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/19 08:44

    マークダウン使いましょう。
    既についた回答のコード部分、どうなってますか?
    平でコードを置かれても正しく再現することにはなりませんし、読みづらいです。
    質問も回答も投稿者本人のみ編集できます。

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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