css
前 2回の記事で Sass の @for 文を使ってるけどこれ便利。もう少し試したくて適当なアニメーションをつくった。 クソアニメーション（回転） | JSFiddle クソアニメーション（拡縮） | JSFiddle background-color を登録した配列から取り出して設定、あとは…
<length> | MDN px や em 、vw 値がカテゴリーに登録されている。% だけ別で、これはカテゴリーになる。 負の を許容するプロパティとそうでないプロパティがあります。 どれのことだ？MDNのページを読み進めてもわからなかった。 さてわからなかったことはおいとい</length>…
<color> | MDN CSSのデータ型を見ていた。aqua と cyan のように、同じ色を表すキーワードがあることを知った。 色キーワードは、CSS1の16色から始まり、CSS2で orange 1色を追加、CSS3で数えるのが面倒なくらい大量の色を追加、CSS4で rebeccapurple 1色を追加とい</color>…
昨日のやつ少しコード書いてみた。サイズや配置を rem で指定することで、html 要素（root）の文字サイズの変更に合わせて全部変わる。 calc(100% + 1vw) | JSFiddle html { font-size: calc(100% + 1vw); } div { margin: 1rem 0; } .box { display: inline…
いまViewport sized typography with minimum and maximum sizes を読んでて、font-size: calc({X} + {Y}vw) っていう指定に魅力を感じてる。フォントサイズが 16px 以下にはならないようにして、あとはウィンドウの幅に合わせて文字サイズをでかくするよ、…
&__action のコンパイル結果は .blockLink:hover__action になるが、 前回のこれ、Sass の機能をうまく使えばなんとかなる気がしていくつか試してた。 状態を変更するセレクター下にスタイルを指定（selector-replaceを使う） | JSFiddle .blockLink { &:hov…
namikuguri.github.io では CSS をそのまま書いてる。Sass などのプリプロセッサーを使っていない。 理由としては、 コンパイルの時間を待たなくていい コンパイル後の CSS ファイルを想像しながら書かなくていい ローカル環境いらずなのでどこからでも触れ…
SVGアイコンボタン | JSFiddle ポイントは2つ。 display: inline-flex でアイコンをコンテナーの中心に配置 マウスオーバーなど、インタラクションに合わせて色が変えられるように svg 要素の fill プロパティには inherit を指定 .iconButton { display: in…
order | MDN Flexboxを使っていると、PCとモバイルで表示順序を変えたいときがある。そんなときに order プロパティが便利そうなんだけど、指定結果がちょっと読みにくかったので確認してみる。 <ul class="flexbox"> <li>1</li> <li>2</li> <li>3</li> </ul> .flexbox li:nth-child(2) { background-color: red;…
画像の表示について、3つのバリーションをつくった。 画像表示のバリーション | JSFiddle 画像に背景がないとサイトに画像が溶け込んでしまうことがある。そんなときはデモにある「通常」スタイルを使う。 メインとなる画像はサイトのウィンドウの幅いっぱい…
相も変わらず namikuguri.github.io を触ってた。 https://github.com/namikuguri/namikuguri.github.io/commit/9da837903c9de19f42647bb24d7b3ab4bccfc437 ウィンドウサイズが大きいときに文字サイズも合わせて大きくなるように、とかしてた。 @media scree…
「※」つきリスト | JSFiddle 普通に文章の中に「※」マークを含めてしまう場合が多いんだけど、「注意書きリスト」としてコンポーネントを定義する場合は、以下のように before 疑似要素ですべてのリストの先頭に「※」マークをつけるほうが良い気がした。コン…
珍しいCSSプロパティたち | Qiita スマホでアニメーションつきリンクをクリックしたときに（アニメーションが起きず）何も反応がないように見えるけど、will-change はこういうのも解決してくれるのかな。 textarea 要素みたいに伸縮可能な入力欄をつくりた…
今回は以下の記事を参考にして「ウィンドウサイズを可変しても常に要素で敷き詰める（余白をつくらない）グリッドレイアウト」をつくる。 Common Responsive Layouts with CSS Grid (and some without!) | Medium つくったやつはこんな動きになる。 ウィンド…
ポートフォリオをつくる中でカードコンポーネントをつくった。こんなやつ。 Demo - カードコンポーネント | JSFiddle 動きを記録した動画 - 拡大・縮小してもいい感じになる画像 | YouTube このカードコンポーネントの中でサムネイルの画像サイズを指定して…
youtu.be もとは別のデザインで、もっと大きいメニューをびろっと出す予定だったんだけど、今のメニューの数なら開く前のヘッダーの高さに収まるんじゃないかと思ってこの案を考えた。CSS だけでできそうだから、というのもある。 マウスオーバーでハンバー…
マウスオーバーしたらふわっと前に出てくるやつ、7割くらいできた。ふわっとさせてるのは .card:hover らへん。その他グリッドレイアウトをようやく使い始めることができてうれしいなど。 Demo - showcase | JSFiddle :root { font-size: 100%; --white: #ff…
cursor | MDN cursorプロパティで値にURLを指定する | MDN CSS3 Cursors (original values) | Can I Use インターネットをしているとカーソルの形が様々に変わる。ボタンにマウスオーバーすると手の形に、フォームの入力欄にフォーカスすると I の形に。これ…
ブラウザごとにサポートされている疑似要素を使えば、プログレスバーを簡単にカスタマイズできる。 (Demo) プログレスバーをカスタマイズする Firefox では赤く、 Chrome などの Webkit 系ブラウザでは青くした。 /* バーの背景を変える */ progress { -webk…
仕様の理解に苦しむ疑似要素を昨日 6つ並べたが、それらについて調べがついた。 ::backdrop 疑似要素は、簡単にいうとダイアログの 1つ下のレイヤーに背景を敷くための疑似要素。あーあれか、って思った人はその通り、アレのことだ。 ::slotted 疑似要素は S…
デモが動かないこものも多く、使用の解釈が困難。説明、およびツッコミを求めて今困ってる疑似要素をとにかく並べる。 ::backdrop | MDN フルスクリーンモードにしたときに、背景要素として追加される？ ::cue | MDN キュー（合図）ってなんや ::grammar-err…
今日は :indeterminate という奇妙なセレクターを覚えた。フォームの状態が正常でないとき、「ラジオボタンが、どちらも選ばれないなんておかしい」というときなどにセレクターがマッチする。 Demo - :indeterminate でグループ内のラジオボタンがすべて未選…
:default | MDN :default CSS pseudo-class | Can I use :default 擬似クラスは IE と Edge 以外で使える。このセレクターを MDN では以下のように説明されている。 :default 擬似クラスは、類似の要素のグループ内で既定となっているユーザインタフェース要…
CSS セレクターをマスターしたい ので、まずは自分が何を知って何を知らないか把握しておきたい。 結果 27 個くらい知らないセレクターがあった。-webkit- とか -moz- のベンダープレフィックスつきセレクターは除外してこれなので、想像以上に多い。セレク…
CSS セレクター | MDN CSS セレクターは全部で 60 種類くらいある。 ::first-line とか実制作であまり使わない :root はこれから人気そう :not は便利な場面あると思うけど、使うとコードがややこしくなりそう :focus-within は最近 Chrome の DevTools にで…
:any | MDN :matches() CSS pseudo-class | Can I Use :matches を使うと CSS コードの記述量が減らせる。また、このセレクターは Firefox や Chrome といった一部のブラウザで実装されているが、セレクターの指定は :matches ではなく :any という名前にな…
scroll-behavior | MDN CSSOM Scroll-behavior | Can I Use scroll-behavior は現在 Chrome と Firefox でサポートされている。このプロパティはスクロールが発生したときにスクロールの振る舞いを指定できる。また、ユーザー操作によるスクロールを制御する…
display | MDN display: flow-root | Can I use cleafix は要素の回り込みを回避するための手段としてこれまで使われてきた。この clearfix に変わるのが display: flow-root だ（まだ Chrome と Firefox でしか使えない）。 ひとつ前置きをするが、display:…
@viewport | MDN CSS Device Adaptation | Can I Use @viewport については、まだサポートしているブラウザが少ないので使えない。どんなものかというと、これまで HTML の meta タグでやってたビューポートの指定が CSS でもできるようになるよ、くらいの理…
conic-gradient を使えば円錐状のグラデーションをつくることができる。ただ残念なことに、現時点でサポートしているブラウザはない。 ブラウザでサポートされれば、以下のように書くことで円錐状のグラデーションをつくることができるはずだ。 .content { b…
