【超備忘】HTMLとかCSSとかで新しく覚えたわざを記録しておく記事

新しいページを作ったり難しめの更新をやると新しいわざを覚えたりするんですが、次に同じことやる時にはすっかり忘れててまたググったりエラー出しまくったりで時間がもったいないので覚えた時に記録しておこうの巻
すんごい自分用です 別にこんな全世界に公開せずともローカルで置いておけたらそれでもいいんですがこっちの方が見やすい感じにまとめられそうなのでここにひっそりと置いておくぜ ※置いた事すら忘れないように気を付けなければならない
万が一億が一、参考にする方が現れたらコードは全然コピペしていって大丈夫だと思います ただしエラーが出ても自己責任でなにとぞ～～GO

Flexboxの子要素左右で片方を固定幅、片方をサイズ可変にする
【HTML】

1
2
3
4
5
6
7
8
<div class="f-parent">
<div class="f-left">
  左側に配置するコンテンツが入る
</div>
<div class="f-right">
  右側に配置するコンテンツが入る
</div>
</div>

【CSS】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.f-parent{               /*flex親*/
  display: flex;           /*これ入れないと始まらない*/
  width: 100%;
  max-width: 1500px;       /*全体の最大幅*/
  flex: 1;  
  min-width: 0;
  margin-top: 10px;        /*全体の上に10pxの隙間*/
  margin: 0 auto;          /*全体を中央揃え*/
}
 
.f-left{                 /*flex子①(左側)*/
  flex: 1;                 /*これでサイズ可変になる！*/
}
 
.f-right{                /*flex子②(右側)*/
  flex-basis: 420px;       /*固定したい側の幅サイズを入れる*/
  margin-left: 25px;       /*左側に隙間*/
}

・普段は大体左と右でそれぞれwidthに%(合計で100)で入れてる
・子要素(f-left, f-right)の中にさらにFlexboxも作れる
メディアクエリ(スマホ版とかで見た目変えるやつ)
【CSS】

1
2
3
4
5
@media screen and (min-width: 1300px) {      /*minでもmaxでもOK*/
.nanka-class{
/*普通にCSS書く*/
}
}         /*←忘れまくるので気を付ける*/

・最後の閉じタグ忘れがち(忘れると全部崩れる)なので忘れないように頑張る
デフォルトと違う背景色のページ作る時
【固定ページのCSS】

1
2
3
4
5
#content{
background-color: #ffffff;  /*ページ全体の背景色*/
margin-top: 0;
color: #fff;                /*ページ全体のフォント色*/
}

【外観カスタマイズの追加CSS(デフォルトの色を設定してるとこ)】

1
2
3
4
5
6
@media screen and (max-width: 500.9px) {  /*メディアクエリはスマホ用*/
.page-id-**** .header{                    /*idは固定ページURL欄に出る*/
        background: #ffffff;      /*背景色(固定Pと合わせる)*/
        color: #ffffff;                   /*ハンバーガーの色？多分*/
}
}

・固定ページだけでなく外観カスタマイズの方にもCSS書く必要がある(欄最下部に入れといたので数字だけ変える)
蛍光ペンのやつ
【HTML】

1
<h1>おためし(タグはdivでもspanでもなんでもOKのはず)</h1>

【CSS】

1
2
3
4
5
6
h1{
background:linear-gradient(transparent 60%, #ff6 60%);
}
 
/*transparent=不透明度*/
/*一番後ろの60%は文字にどれだけ被せるかの数値*/

・黄色で良ければfluoreボタン作ってあるからそれでワンタッチ 違う色にしたければ↑でやる
ドロップダウンリスト(WORKSにあるカプ切り替えのやつ)
【HTML】

1
2
3
4
5
6
7
<select onChange="location.href=value;">
<option value="#">表示名①</option>  <!--表示中のページ--!>  
<option value="ページURL②">表示名②</option>
<option value="ページURL③">表示名③</option>
<option value="ページURL④">表示名④</option>
<!--以降も必要に応じて増やしてOK--!>
</select>

【CSS】

1
2
3
4
5
select{
float: right;         /*右寄せ*/
width: 150px;         /*横幅*/
border-radius: 50px;  /*角丸*/
}

・特記事項なし
文字の後ろに線引く(TOPのINFOとかの後ろの点線のやつ)
【HTML】

1
2
3
<div class="test">おためし</div>
 
<!--divタグにしないと上手くいかなかったかもしれん--!>

【CSS】

1
2
3
4
5
6
7
8
9
10
11
.test{
align-items: center;               /*多分いる*/
display: flex;                     /*多分いる*/
}
.title::after {
align-items: center;               /*タテの中央揃え*/
  content: "";                     /*なんだっけな*/
  flex-grow: 1;                    /* 横幅いっぱい */
  border-top: dashed #807a78 1px;  /*線の装飾*/
  margin-left: 10px;               /* 文字との余白 */
}

・たしかh1タグとかではできなかったような気がする
・dashed=破線／solid=普通の線
アコーディンなんたら(折りたたむやつ)
【HTML】

1
2
3
4
<details>
<summary>ここに見出し</summary>
ここに折りたたみたい内容
</details>

【CSS】

1
2
3
4
5
6
7
details[open] {
/*開いてる時の状態*/
}
 
details:not([open]) {
/*閉じてる状態*/
}

・MEMOの続きを読む/折りたたむはたたむボタン作ったのでワンタッチ
・スマホ版だと勝手に見出しに▶が付くので全体のCSSで消しとる(疑似要素-webkit-details-marker)
 
増えたら下に追加していくぜ