みかづきブログ・カスタム

基本的にはちょちょいのほいです。

CSS

scroll-snapを使ってカルーセルをつくる 🖱

CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード(抜粋) JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…

radial-gradientで円形のクラデーションを描く際は内接する四角形の大きさを指定する ⭕️

CSS

先日、radial-gradientを使ってパキッとした円を描こうと思った際に、円形グラデーションの%の指定が、円に内接する四角形の大きさを指定していることに気づきました。 ソースコード(抜粋) div { display: flex; align-items: center; justify-content: ce…

accent-colorを使って、チェックボックス(type="checkbox")、ラジオ(type="redio")、スライダー(type="range")の色を変更する ✅

CSS

accent-colorというCSSプロパティを使えば、input要素の色を変更できることしりました。developer.mozilla.orgInternet Explorerは非対応ですが、モダンブラウザの最新版であれば問題なく使えるようです。 検証 ソースコード input { accent-color: red; } …

CSSで方眼紙のような線を引く 📄

CSS

linear-gradientを使うとbackground-sizeをうまく使うと、背景に繰り返しで線を引くことができます。 DEMO CSS div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, red 1px, transparent 1px); background…

CSSのmix-blend-modeを試す(トランジションとの併用を検証) 🎨

CSS

最近、CSSのmix-blend-modeを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる値を確認しました。developer.mozilla.org 基本的な使い方 mix-blend-modeを指定すると、重なっていている要素の色を合成し…

CSSフィルターを試す(記述順・トランジションとの併用を検証) 🎨

CSS

最近、CSSのfilterを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる関数を確認しました。※ SVGフィルターは試してません ※ 上限はある程度適当に決めていますdeveloper.mozilla.org DEMO 記述順 今回は…

iOS15のSafariでoptionの文字色が青になるのでスタイルを上書きする 🟦

CSS

iOS15から明示的にcolorを当てないと、optionの文字色に-apple-system-blueと当てられてしまい、青くなってしまうようです。 body { color: #000; } option { color: #000; } では修正できなかったのですが、 select { color: #000; } で上書きました。ただ…

特殊文字を使って擬似要素(before, after)に半角スペースを設定する 📝

CSS

ものすごく特殊な例な気がしますが、擬似要素に半角スペースを設定しようと思い、SCSSで、 p { &:before, &:after { content: ' '; } } と書いてみたのですがダメでした。HTMLで文頭、文末に半角スペースを書くのであれば実体参照を使うところなのですが、 p…

placeholder属性の色を変更する(最新ブラウザに限ればプレフィックスが不要なことに気づく) 🎨

CSS

これまで、 input::placeholder { color: red; } input::-moz-placeholder { { color: red; } input::-ms-input-placeholder { color: red; } という感じでベンダープレフィックスをつけて実装していたのですが、改めてMDN Web Docsを確認したところ、IE以外…

GAFAのfont-familyを調べて、フォントの指定を再考する 📝

CSS

結論 調査結果 Google Apple Facebook Amazon Microsoft Twitter Instagram フォントの指定を考える ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。 最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウ…

position: fixedで位置を指定した要素の親要素にoverflow: hiddenを指定を併用したい場合、親要素のtransform, perspective, filterを指定する 👀

CSS

通常、positionをfixedにした要素の親要素のoverflowをhiddenにしても、はみ出した部分は隠れません。 HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overfl…

Safariでtext-decorationを一括指定すると表示されなくなる 👁

CSS

developer.mozilla.orgAndroid Chromeではアンダーラインが表示されるのに、iOSのSafariでは表示されないという事態に直面しまして、いろいろ調べてみると、text-decorationを一括指定すると、Safariで表示されなくなることに気づきました。iOSでもMacOSでも…

clip-pathを使ってSVGをマスクとして使いつつ、マスクをアニメーションさせる 😷

CSS

DEMO 解説 clip-pathにSVGのID(正確にはSVG内の図形のID)を渡してあげればその図形をマスクにすることができます。developer.mozilla.orgまた、SVGもタグなのでCSSアニメーションで動かすことができます。 そうすると、合わせ技でマスクをアニメーションさ…

Safariにてbackground-colorの設定されたposition: fixedの子要素のbackface-visibilityがおかしい気がする 🤔

CSS

❶ position: fixedの要素を用意する ❷ ❶で用意した要素に背景色を設定する ❸ ❶で用意した要素の子要素を用意する ❹ ❸で用意した要素をY軸で180度回転させる(裏返す)という処理、つまりコードで書くと、 HTML <div> <p></p> </div> CSS div { position: fixed; background-col…

Macで観覧時もウェブサイトのフォントにSegoeUIを使いたいという想い 📝

CSS

SegoeUIはマイクロソフトがよく使用するフォントであり、Windowsに搭載されていますが、Macには搭載されていません。 なので、ウェブサイトでSegoeUIを使い、絶対に表示させたい場合、ウェブフォントを導入することになります。まず、Googleフォントで探して…

clip-pathでDOMにマスクを掛けつつdrop-shadowで影を落とす 😷

CSS

developer.mozilla.org最近、clip-pathを使い、DOMにクリッピングマスクを掛けることが多いのですが、クリップしたDOMにbox-shadowで影を落とそうとすると上手く行きませんでした。 影が落ちない例 div { width: 200px; height: 100%; background: #fff; cli…

text-decorationで波線を引く 🌊

CSS

developer.mozilla.org text-decoration-style: wavy; を使えば、 波線を引くことができます。 実際は、text-decoration-lineも指定する必要があるので、下線として波線を引く場合は、 span { text-decoration: underline wavy; } という感じになります。

position: stickyを使う際に気をつけたいこと 👆

CSS

最近、ウェブサイトを作る際、IEを非対応にして良いというケースが増えてきたため、ついに position: sticky を使い始めました。 position: sitickyとは 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロ…

imgタグでも background-size: contain とか cover みたいにトリミングしたい 🖼

CSS

developer.mozilla.orgIEに対応しなくてよいのであれば、object-fitを使えば実現できます。object-fitで指定できる値は4つあって、デフォルトはfillです。 contain 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大…

画面幅に合わせてフォントサイズを可変させつつ、最小サイズと最大サイズを設定する 🍣

CSS

CSS font-size: 100vw / 1200 * 36; @media (max-width: 750px) { font-size: 750px / 1200 * 36; } @media (min-width: 1601px) { font-size: 1600px / 1200 * 36; } こんな感じで設定できます。 上記の設定だと、 画面幅1200pxの際にフォントサイズ36px 画…

CSSで範囲からはみ出したテキストを省略して...にする(一行の場合・複数行の場合) ✏️

CSS

一行の場合 複数行の場合 一行の場合 text-overflowを使います。developer.mozilla.org overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceを…

CSSセレクタの前方一致を使って、ページ内リンクをまるっとセレクトする 🕸

属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…

touch-action: noneでtouch操作を無効にする 👆

CSS

iOSでウェブページのスクロールを止めるためにもろもろ調査をしていて、touch-actionたるものを知りました。developer.mozilla.orgその名の通り、許容するタッチ操作を指定できるプロパティで、 touch-action: none とすることで、スワイプ、ピンチなどのす…

shape-outsideをつかってテキストの表示領域を平行四辺形にする 📝

CSS

DEMO See the Pen shape-outside by kimmy (@kimmy) on CodePen. CSSシェイプをつかって、テキストを斜めに段組してみました。developer.mozilla.orgやっていることは単純で、テキストの左右に三角形を置いて、floatで配置しているだけです。縦位置をセンタ…

text-transformを使ってCSSの力でテキストを大文字にしたり小文字にしたりする 📝

CSS

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…

image-renderingをつかってCanvasをニアレストネイバー法で拡大してドット絵のような見た目にする

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…

JavaScriptを1行も書くことなくドロワーメニューをつくる 💻

CSS

HTMLのcheckボックス、CSSの隣接セレクタ、target擬似クラスを使って、JavaScriptを書かずにドロワーメニューをつくってみました。ざっくりとだけ解説すると、 メニューボタンに見える要素が実はinput要素(チェックボックス) inputにチェックの有無でメニ…

iOSとAndroidでシステムフォントのfont-weight:600の扱いが違う ✏️

CSS

偶然気づきました。 iOSとAndeoirdでfont-familyを指定せずにfont-weightを指定すると、差異が出てくることに。font-weightがnormalとboldの2択なところは一緒なのですが、iOSはfont-weight:600からがbold、Androidはfont-weight:700からがboldとなっていま…

親にtranslate3dやfilterを掛けるとposition: fixedが効かなくなる 😱

CSS

DEMO develop.kimizuka.org position: fixedを掛けた要素の親に、 transform: translate3d(0, 0, 0); や、 filter: blur(0); を指定すると効かなくなり、position: relative指定時の位置を取るようになります。 色々試してみましたが、対策は無くて、transla…

CSSの力でスクロールバーを非表示にする 👀

CSS

blog.kimizuka.org本当はこの記事で書こうと思っていたことなのですが、-webkit-overflow-scrolling: touchが不要になっていたことに驚きすぎて、記事を分けることにしました。さて、overflow: scrollを実装するとき、「スクロールバーを消したい」という要…