投稿

10月, 2022の投稿を表示しています

Javascriptを使わずCSSだけでタブ切り替えのタイムテーブルを作るソース

 参考サイト: 【CSS】CSSだけでタブ切り替えを作る方法 - bagelee(ベーグリー) <style type="text/css"> <!-- #timetable{font-size:0;} .content{display:none;} .check{display:none;} #check1:checked ~ #check1_content, #check2:checked ~ #check2_content, #check3:checked ~ #check3_content, #check4:checked ~ #check4_content, #check5:checked ~ #check5_content, #check6:checked ~ #check6_content, #check7:checked ~ #check7_content {display:block;} .label:hover{color:red;} .check:checked + .label{border-bottom: solid 5px red;} .check:checked + .label:hover:after{color:red;} .label{   font-size:36px;   padding:0 5px 0 5px;   border-right: solid 1px gray;   cursor:-moz-pointer;   cursor:-webkit-pointer;   cursor: pointer; } .content{   padding-top:10px; } .time{   width:80px;   font-size:24px;   text-align:right; } .subtime{   width:80px;   font-size:16px;   text-align:right; } .summary{   padding-left:10px;   font-size:16px; } --> </style> <form id="timetable"> <input id="check0