|
|
| 第1行： |
第1行： |
| | <includeonly><style type="text/css"> | | <includeonly><style type="text/css"> |
| − | #cssTabs {
| + | *:before, *:after { |
| − | position: relative;
| + | margin: 0; |
| − | width: 600px;
| + | padding: 0; |
| − | height: 290px;
| + | box-sizing: border-box; |
| − | margin: 0 auto;
| + | } |
| − | }
| + | |
| − | .tabHead {
| + | .top { |
| − | font-weight: normal;
| + | padding-right: 20px; |
| − | padding: 5px;
| + | background: #261F41; |
| − | height: 30px;
| + | text-align: right; |
| − | line-height: 30px;
| + | } |
| − | text-align: center;
| + | |
| − | border: 1px solid #000;
| + | p1 { |
| − | border-width: 1px 1px 0;
| + | margin: 0 0 20px; |
| − | -moz-border-radius: 5px 5px 0 0;
| + | line-height: 1.5; |
| − | -webkit-border-radius: 5px 5px 0 0;
| + | } |
| − | border-radius: 5px 5px 0 0;
| + | |
| − | width: 140px;
| + | .tabbox { |
| − | position: absolute;
| + | margin: 0 auto; |
| − | left: 0;
| + | min-width: 320px; |
| − | top: 0;
| + | max-width: 800px; |
| − | background: #fff;
| + | text-align: center; |
| − | cursor: pointer;
| + | } |
| − | }
| + | |
| − | .tabContent {
| + | .content > div { |
| − | padding: 10px 20px;
| + | display: none; |
| − | background: #fff;
| + | padding: 20px 25px 5px; |
| − | border: 1px solid #000;
| + | } |
| − | position: absolute;
| + | |
| − | top: 40px;
| + | input { |
| − | left: 0;
| + | display: none; |
| − | height: 230px;
| + | } |
| − | width: 100%;
| + | |
| − | opacity: 0;
| + | .tp { |
| − | filter: alpha(opacity=0);
| + | display: inline-block; |
| − | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
| + | padding: 5px 10px; |
| − | -webkit-transition : opacity 0.5s ease-in 0.218s;
| + | font-weight: 600; |
| − | -moz-transition : opacity 0.5s ease-in 0.218s;
| + | text-align: center; |
| − | -o-transition : opacity 0.5s ease-in 0.218s;
| + | font-family: Meiryo |
| − | -ms-transition : opacity 0.5s ease-in 0.218s;
| + | } |
| − | transition : opacity 0.5s ease-in 0.218s;
| + | |
| − | }
| + | .tp:hover { |
| − | #tab1 .tabHead {
| + | color: #fff; |
| − | z-index: 3;
| + | cursor: pointer; |
| − | }
| + | } |
| − | #tab2 .tabHead {
| + | |
| − | left: 155px;
| + | input:checked + .tp { |
| − | z-index: 1;
| + | background: #FFA500; |
| − | }
| + | color: #fff; |
| − |
| + | } |
| − | #tab3 .tabHead {
| + | |
| − | left: 310px;
| + | #tab1:checked ~ .content #content1, |
| − | z-index: 1;
| + | #tab2:checked ~ .content #content2, |
| − | }
| + | #tab3:checked ~ .content #content3, |
| − |
| + | #tab4:checked ~ .content #content4, |
| − | #tab1 .tabContent {
| + | #tab5:checked ~ .content #content5 { |
| − | z-index: 2;
| + | display: block; |
| − | opacity: 1;
| + | text-align: left; |
| − | filter: alpha(opacity=100);
| + | } |
| − | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
| + | |
| − | }
| + | @media screen and (max-width: 400px) { label {padding: 15px 10px;} } |
| − |
| |
| − | #tab1:hover h3,
| |
| − | #tab1:focus h3,
| |
| − | #tab1:active h3,
| |
| − | #tab2:hover h3,
| |
| − | #tab2:focus h3,
| |
| − | #tab2:active h3,
| |
| − | #tab3:hover h3,
| |
| − | #tab3:focus h3,
| |
| − | #tab3:active h3 {
| |
| − | z-index: 4;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | #tab1:hover .tabContent,
| |
| − | #tab1:focus .tabContent,
| |
| − | #tab1:active .tabContent,
| |
| − | #tab2:hover .tabContent,
| |
| − | #tab2:focus .tabContent,
| |
| − | #tab2:active .tabContent,
| |
| − | #tab3:hover .tabContent,
| |
| − | #tab3:focus .tabContent,
| |
| − | #tab3:active .tabContent {
| |
| − | z-index: 3;
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=100);
| |
| − | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
| |
| − | }
| |
| | </style></includeonly> | | </style></includeonly> |
