小学生のタブのところに社会も入れたいのですが、入りません
あと、中学生と高校生の所に理科が入ってしまっています
これをどうにかしたいです
<!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;
}