コンパイラかく語りき

import { Fun } from 'programming'

CSS3

【CSS】複数行の時だけ line-height を指定する

複数行のときだけ line-height を効かせたい場合があります。 逆に言うと、1行なら特に指定したくない。 この場合、CSS の first-line 疑似要素が使えます。 span { font-size: 14px; // 文字サイズ line-heigth: 20px; // 複数行の場合、行間を開けたい } s…

【JavaScript】classList は Array 化することで順序削除、一致削除などができる

ちょっとしたアニメーションの実装などのために JavaScript から HTML の class を付け外しすることはあるかと思います。 そのときに利用するのが classList です。 const target = document.querySelector('.target') target.classList.add('foo') target.c…

【CSS】四つ角にだけ枠線をつける

サンプル このように、CSS だけで四つ角に枠線を付ける方法。 コード 以下のように書けばOK。 <div class="box">ここにテキスト</div> .box { position: relative; } .box:before { content: ""; background-image: linear-gradient(to right, #17172d, #17172d 40%, transparent 40…

【CSS】display: flex 指定の子要素の高さが伸びてしまう問題への解決策

解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …

【CSS】横スクロールし切った時に勢い余ってページバックするのを防ぐ

状況 以下のようなスタイルを指定しているとする。 .element { width: 300px; overflow-x: scroll; } .element の内側の要素がはみ出した場合、横スクロールで表示される。この時、モバイルデバイスやトラックパッドを使用している場合、意図せずページ移動…

要素の横並び+複数行ならflex-wrapが便利

CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、2行や3行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値は…

【CSS】text-overflowとはなんなのか

2015年もいよいよ佳境。そしてこのタイミングで出会った”text-overflow”というCSS。 ちょっと深掘りしてみたいと思います。 Try it いじくり回して理解したい人は、こちらがオススメ。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_js_text-…