css 【CSS】レスポンシブ対応の三角形背景
ひとまず備忘録
◆html
<div id="content">
<p>コンテンツ</p>
</div>
<div id="triangleBtm"></d...
css
css css 【css】flexboxのbox-sizingが効かない【IE】
flexboxでのカラム落ちが発生する場合の処理。通常flex-basisで指定するけど、IEのみ無効化されるいつもの酷いパターン。orzIE対策に「flex-basis」と同じwidthを「max-width」で設定してあげる。例fle...
css 【css】objectーfit【IE対策】
IEのせいで しばらく設定せねばならぬ。orz
IE11が2020年11月ごろまでサポートされてるので、それまでの我慢。
【ofi.js】のCDN。
スクリプト
<script>objectF...
css 【css】上付き文字、下付き文字
「sup」は数学的な表示（「m2」とか）に使うのが本来の使用方法。
例えば「※1」等の注釈に使う際のcss設定
◆上付き文字
.sup {
font-size: .8rem; /*好きな文字サイズで*/
vertical-...
css 【css】隣接・直下セレクタ【備忘録】
いつも忘れるの、ホント勘弁。www
■隣接セレクタ
.text + div
<div class="text"></div>
<div>ここに適用</div>
■直下...
css 【css】calc()で算出したフォントサイズはIE(Edge)での表示が狂う【備忘録】
レスポンシブでフォントサイズを変えたいとき、
calc(% + vw)の計算はIEとEdgeでは正確な表示が出来ない。
ので、calc(% + vw)ではなく、calc(em + vw)で記載。
※「rem」でも可。
fon...
css 【CSS】高さ可変Footerの下部固定【備忘録】
レスポンシブ対応することでfooterの内容が改行した、等によって高さが固定しない場合、footerを最下部に表示する。
※普段から適用するようにしておけば楽なのかも。
html
<body>
<div class...
css 【CSS】レスポンシブでの改行制御【備忘録】
折り返したくない文節があり、レスポンシブで改行を制御したい場合のcssの書きかた。
この場合、
◆html
<p>
<span class="text">あのイーハトーヴォの</sp...
css 【CSS】要素の上下中央寄せ
何度も引っかかってるので備忘録。
◆上下中央寄せ、テキストの場合
上下中央寄せをしたいテキストを内包しているブロックへ
display: flex;
を適用し、Flexコンテナ化。
次に内包テキスト（Flexアイテム）...