0

小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="index.css">
  </head>
 <body>
<font face: "Zen Maru Gothic,M PLUS Rounded 1c,Rounded M+,UD デジタル 教科書体 NK-R>
<div class="relative">
  <img src="C:\Users\tomoking\Documents\days_with_study_rogo_kanse-removebg-preview.png" class="absolute" alt="ロゴ">
  <img src="C:\Users\tomoking\Documents\benkyo kanse nami daikirei.png" alt="勉強の画像">
</div>
<br>
<div class="tabs">
  <input id="all" type="radio" name="tab_item" checked>
  <label class="tab_item" for="all">小学生</label>
  <input id="programming" type="radio" name="tab_item">
  <label class="tab_item" for="programming">中学生</label>
  <input id="design" type="radio" name="tab_item">
  <label class="tab_item" for="design">高校生</label>
  <div class="tab_content" id="all_content">
    <div class="tab_content_description">
      <p class="c-txtsp">
     <divclass="btn-wrap5"><a class="btn btn-border-shadow5">国語</a></div>
       <divclass="btn-wrap6"><a class="btn btn-border-shadow6">算数</a></div>
       <divclass="btn-wrap7"><a class="btn btn-border-shadow7">理科</a></div>
       <divclass="btn-wrap8"><a class="btn btn-border-shadow8">社会</a></div>
    </p>
    </div>
  </div>
  <div class="tab_content" id="programming_content">
    <div class="tab_content_description">
      <p class="c-txtsp"></p>
    </div>
  </div>
  <div class="tab_content" id="design_content">
    <div class="tab_content_description">
      <p class="c-txtsp"></p>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
   </font>
 </body>
</html>
@charset "utf-8";

body {
  background-image: url("C:\Users\tomoking\Documents\benkyou kanse.png");
  background-size: cover;
}

body {
  background-color: white;
}


img {
    width: 100%;
    height: auto;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: 0px;
  bottom: 900px;
}



*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow5 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: red;
}

a.btn-border-shadow5:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow5:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow5:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow6 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: blue;
}

a.btn-border-shadow6:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow6:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow6:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow7 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: green;
}

a.btn-border-shadow7:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow7:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow7:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow8 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: yellow;
}

a.btn-border-shadow8:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow8:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow8:hover:before {
  top: 0;
  left: 0;
}




/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}
1
  • ありがとうございます!
    – Romi
    Commented 2022年4月12日 10:07

1 件の回答 1

0
<divclass="btn-wrap5">

divの要素のつもりですが、空白がないためdivclassという要素になってしまっています。

<div class="btn-wrap5">

正しく空白をつけてあげましょう。

HTMLは構文チェックが非常に大事です。
最初のうちはオンラインのもので結構なのでHTMLのチェックをしましょう。
https://validator.w3.org/

もしくはエディタやそのプラグイン等を利用して構文に間違いがないかチェックしましょう
エディタはいろいろありますのでいろいろ試してみて使ってみてください。

@charset "utf-8";

body {
  background-image: url("C:\Users\tomoking\Documents\benkyou kanse.png");
  background-size: cover;
}

body {
  background-color: white;
}


img {
    width: 100%;
    height: auto;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: 0px;
  bottom: 900px;
}



*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow5 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: red;
}

a.btn-border-shadow5:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow5:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow5:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow6 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: blue;
}

a.btn-border-shadow6:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow6:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow6:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow7 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: green;
}

a.btn-border-shadow7:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow7:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow7:hover:before {
  top: 0;
  left: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

/* 背景用*/
body {
  padding: -5px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
}

a.btn-border-shadow8 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: yellow;
}

a.btn-border-shadow8:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow8:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow8:hover:before {
  top: 0;
  left: 0;
}




/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}
<font face: "Zen Maru Gothic,M PLUS Rounded 1c,Rounded M+,UD デジタル 教科書体 NK-R>
  <div class="relative">
    <img src="C:\Users\tomoking\Documents\days_with_study_rogo_kanse-removebg-preview.png" class="absolute" alt="ロゴ">
    <img src="" alt="勉強の画像">
  </div>
  <br>
  <div class="tabs">
    <input id="all" type="radio" name="tab_item" checked>
    <label class="tab_item" for="all">小学生</label>
    <input id="programming" type="radio" name="tab_item">
    <label class="tab_item" for="programming">中学生</label>
    <input id="design" type="radio" name="tab_item">
    <label class="tab_item" for="design">高校生</label>
    <div class="tab_content" id="all_content">
    <div class="tab_content_description">
      <p class="c-txtsp">
     <div class="btn-wrap5"><a class="btn btn-border-shadow5">国語</a></div>
       <div class="btn-wrap6"><a class="btn btn-border-shadow6">算数</a></div>
        <div class="btn-wrap7"><a class="btn btn-border-shadow7">理科</a></div>
       <div class="btn-wrap8"><a class="btn btn-border-shadow8">社会</a></div>
   </p>
    </div>
  </div>
  <div class="tab_content" id="programming_content">
    <div class="tab_content_description">
      <p class="c-txtsp"></p>
    </div>
  </div>
  <div class="tab_content" id="design_content">
    <div class="tab_content_description">
      <p class="c-txtsp"></p>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</font>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。