極個人的プログラミング学習備忘録

HTML、CSS、PHP、JavaScript、Vueなどで学習したことをメモしていきます

Bootstarp4の折りたたみ(Collapse)ボタンを押すたびにボタンの表示名を変える

Bootstarp4の折りたたみ(Collapse)のサンプルより (リンク形式は省略して、ボタンのみ) <p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 表示する </button> </p> <div class="collapse" id="collapseExample"> </div>

Bootstrap4のPaginationでスマホ時だけサイズを小さくする

Bootstrap4のPaginationを使っていると、モバイルで見たときに横にはみ出してしまうことがある。 そこで、通常は普通サイズ、モバイル時は小さいときは、pagination-smサイズにする方法はないかなーと考えてみた。 エレガントではないが、独自CSSに以下を追…

PHPの三項演算子

例えば以下のような分岐処理 if ($id){ echo 'disabled'; }else{ echo 'enabled'; } 三項演算子を使えばシンプルに記述できる echo($id ? ' disabled' : 'enabled'); 条件 ? 条件が真なら : 条件が偽なら という感じ。

Bootstrap4レスポンシブデザインのメモ

小さい解像度は非表示、解像度が768(md)以上なら2ブロック分表示する例 html <div class="d-none d-md-block col-md-2 bg-secondary">ブロック</div> d-none……非表示 d-md-block……mdサイズ以上で表示 col-md-2……mdサイズ以上で2ブロック bg-secondary……背景色をsecondary

複数のclass要素をまとめて削除する

CSSで隠した要素をまとめて表示したいときなど、class要素をまとめて削除する方法 [sample1,sample1,sample1].forEach(el => { el.classList.remove('hidden'); });