Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 beforeとafter


cssにbeforeとafter があるということで
直前の記事、クリックすると+になるをクリックすると+がーになるをお勉強です。
今度もチェックボックスを使います。

クリックすると+がーになりますよね。
ここまでのHTMLとCSSです
HTMLは
<body>
<input type="checkbox" id="check1" class="hiraku-hidden">
<label for="check1" class="hiraku-open">ありがとう</label>
</body>

CSSは
<style>
.hiraku-hidden {
display: block;;/* チェックボックス、今は表示*/
}
.hiraku-open {
display: block;
padding: 10px;
width:400px;/* 高さ不要 */
border:1px solid #ccc;
background: #fff;
cursor: pointer;/* ポインターが手の形 */
position: relative;/* 親に相対的位置 */
}
.hiraku-open::before,.hiraku-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
*/content: '';が不明ながら ― になる。beforeとafterで同じ所に二つある */
}
.hiraku-open::after{
transform: rotate(90deg);
*/afterで一本を90度回転させる。*/
}
/* クリッされたら縦棒を横棒にして-にする */
.hiraku-hidden:checked + .hiraku-open:after {
transform: translateY(-30%) rotate(0);
}
</style>>

何をしたいかというと
クリックで展開するメニューなどです。

追記に記載

クリックで展開のHTMLとCSSです


HTMLは
<div class="box"><!--divでくくる-->
<input type="checkbox" id="check1" class="hiraku-hidden">
<label for="check1" class="hiraku-open">ありがとう</label>
<label for="check1" class="hiraku-close">できました。できました。出来ました。</label>

<input type="checkbox" id="check2" class="hiraku-hidden"><!--IDを上と変える-->
<label for="check2" class="hiraku-open">二番目です</label><!--IDに注意-->
<label for="check2" class="hiraku-close"><!--IDに注意-->できました。できました。出来ました。</label>

</div><!--/box-->


CSS
<style>
.hiraku-hidden {
display: none; /* 今回は非表示 */
}
.box {
width: 420px; /* close(隠れている部分)の幅 */
max-width: 100%;
}
.hiraku-open {
display: block;
padding: 10px;
width:400px;/* 高さ不要 */
border:1px solid #ccc;
background: #fff;
cursor: pointer;/* ポインターが手の形 */
position: relative;/* 変更部分 */
}
.hiraku-open::before,.hiraku-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
*/ content: '';が不明ですがーになる、beforeとafterで同じ所に二つある*/
}
.hiraku-open::after{
transform: rotate(90deg);
*/afterで90度回転させる。*/
}
/* 隠れている部分が開いたら縦棒を横棒にしてーにする */
.hiraku-hidden:checked + .hiraku-open:after {
transform: translateY(-30%) rotate(0);
}

/*隠れている部分 */
.hiraku-close {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: 0.5s;/* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったら隠れたr部分を表示する */
.hiraku-hidden:checked + .hiraku-open + .hiraku-close {
 width:400px;
height: auto;
opacity: 1;/*要素の透明度 */
padding: 10px;
background: pink;
}
</style>
【2021/04/20 11:31】 css | トラックバック(0) |
コメント(0)

comment
投稿













管理者にだけ表示を許可する




trackback
trackback url ↓
http://dreamy.blog2.fc2.com/tb.php/250-244725c7



| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview