【CSS】CSSでチェックボックスonになると要素表示

jqueryが動かなくて困った時に助かったよお～( ；∀；)

ありがとうございます！

【html】

<input type="checkbox" class="toggle"/>

<div class="text">

チェックボックスON時表示

チェックボックスOFF非表示

</div>

【css】

/* チェックボックスOFFで非表示 */

.text{

  display: none;

}

/* チェックボックスONで表示 */

input:checked ~ .text{

  display: block;

}

/* チェックボックス横にラベルを表示させる */

[type="checkbox"].toggle{

  position: relative;

}

[type="checkbox"].toggle:after{

  content: "表示する";

  position: absolute;

  width: 100px; height: 20px;

  padding-left: 20px;

  top: 50%;

  transform: translateY(-50%);

}

参考URL

https://pisuke-code.com/css-show-elem-when-checked/

【CSS】beforeやafterにlastやfirst-child、nth-childなど使う

（書き方）

.ranking-list-wrap li:nth-child(1):before{}で使えるよ！！

くっつけて書こう！

【動画】iphoneなどで読み込めない問題を解決する2

他の人がファイナルカットなどで編集した際、その動画がiphoneで見れないことが！

その際はプレミア(premire)で設定を変更して書き出そう。

【やり方】

①premireで動画を読み込み、プロジェクトタブ(動画サムネイル出ているよ)の動画素材を右クリック

②「変更」→「フッテージを変換」 を押す

③「フィールドオーダー」→ 「ピクセル縦横比を指定」を なしにする

※なしにするというか、フィールドオーダーの設定をとにかく無くす？！のが大事なのかも

④書き出そう！

【Premiere プレミア】動画サイズ小さくするためのコツ

動画、ムービーの圧縮ポイントをまとめ！

全部「書き出し」時値を修正できるよ！

【CSS3】ボーターをグラデーションに

borderをグラデーションに出来るcss小技

{

    border-image: linear-gradient(to right,  #fbcee4 0%,#ded8e9 41%,#c7dde9 70%,#dcf1f2 100%) 1/0 0 2px 0;
    border-style: solid;

}