clip-path | MDN CSS clip-path property | Can I Use clip-path を使うと、ひし形など様々な画像の切り抜きをすることができる。 (Demo) clip-path: polygon（ひし形） | JSFiddle .clip { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } clip…

最近新しい CSS の機能に目がいきがち。ここらで根本的なところをおさらいしておこうと思う。 CSS 設計の基礎概念 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 予測しやすい 書いたコードが意図したとおりに動くこと。 たとえば、セレクタの関係…

先週土曜からはじめた CSS Grid Layout の学習も、いよいよ今回でおわり。最後は指定した領域の並び替え方法を学んでみようと思う。 グリッドコンテナーの中の要素は、なにも指定しなければ HTML で書かれた順序で並ぶ。この並び順を変更するには、order プ…

grid-template-columns および grid-template-rows、grid-template-areas でつくられたセルは明示的なグリッドセル（グリッド格子）と呼ばれる。そして、これらのプロパティの定義なしにつくられたセルは暗黙的なグリッドセルと呼ばれる。 暗黙的なグリッド…

grid-area | MDN 大きく 2つの使い方があるプロパティ。 まずは grid-row と grid-column をまとめて指定するショートハンドとしての一面。 (Demo) grid-area、ショートハンドの一面 | JSFiddle これは指定方法がわかりづらいので使う予定はないけど、MDN と…

2日間 Grid Layout の学習に取り組み、昨日はグリッド領域を個別に指定する方法を確認した。今日はグリッドセルに名前をつけてグリッド領域を指定する方法を調べた。 (Demo) セルに名前をつけて表示領域を指定する | JSFiddle 用語、グリッドセル と グリッ…

昨日は最低限の Grid Layoutをやった。今日はもう少し踏み込んで、グリッド領域を個別に指定する方法を調べる。 領域をグリッドコンテナーの子要素で指定する (Demo) グリッド線で領域を個別に指定 | JSFiddle Grid Layout には領域を仕切る「グリッド線」と…

グリッドレイアウトの基本的な概念 | MDN CSS Grid Layout | Can I Use CSS Grid Layout の熱が高まる昨今、基本的な使い方の紹介には飽きてる自分がいるが、その反面で人の記事を読むだけでは理解しきれていない自分がいる。そういうわけで、今回は Grid La…

Sticky 位置指定- position | MDN CSS position:sticky | Can I Use IE ではまだ使えない。@supports 規則を使って、すでにサポートされているブラウザのみに指定するのが良いだろう。ただし、その場合でも Firefox 57 や Chrome 63 ではバグがあるようなの…

CSSの変数を使う | MDN CSS Variables (Custom Properties) | Can I Use 現在の仕様だとこんなふうに指定する。IE ではまだ使えない。 /* 変数を定義する */ /* :root 擬似クラスに指定することで、変数をどこでも使えるようにする */ :root { --black: #333…

caret-color | MDN CSS caret-color | Can I Use caret-color でキャレットの色が変えられるようで、いまは Firefox と Chrome でこのプロパティが使える。 デモを用意した。入力エリアをクリックすると、枠線と同じ色でキャレットが表示される。 (Demo) car…

background-repeat | MDN CSS background-repeat round and space | Can I Use background-repeat プロパティに space という値があることを発見。デモを用意した。 (Demo) background-repeat: space で繰り返し画像を見きれなしに表示する | JSFiddle backg…

@document 現在 @document 規則は Firefox だけが対応している。 この規則を使うと、URL をもとにしてスタイルを適用する・しないを分けることができる。これにより、やろうと思えば CSS だけでもメニューのアクティブ状態を表現することができるになった。 …

Selectors Level 4 | W3C :has() CSS relational pseudo-class | Can I Use まだ使えるブラウザがないのは残念だが、これまで JQuery などを使ってしかできなかったことが CSS でもできるようになるのは魅力的。 nth-child セレクターと組み合わせることで、…

@supports で何ができるか。 @supports - CSS | MDN CSS Feature Queries | Can I Use @supports を使うと、CSS プロパティまたは値が未実装のブラウザには代替手段を用意することができるので、すべての主要ブラウザに実装されるのを待つ必要なく、使いたい…

もう 1ヶ月以上前だけど、HTML5 カンファレンス 2017 に参加した。 封印していたメモ書きを開放（ブログ用にちょっと整えるのが面倒で放置してただけ）。 聞いたのはこんなセッション。 Nitendo SwitchとWeb WebGL、実践編 デザインカンプの限界 - Adobe XD…

はてなブログのデザインテーマを公開しました。 Amagasa と言います。ちなみにこの記事を公開する現時点では、本ブログにすこしカスタマイズを加えた Amagasa テーマが適用されています。 Amagasa - テーマ ストア Amagasa は、シンプルな色使いと、太く力強…

SVG を背景画像で指定するには、fill='#...' を fill='%23...' というように書き換えなければいけなかった。 書き換えないと、色指定が反映されなかった。 /* fill='#...' change to fill='%23...' */ .class { background-image: url("data:image/svg+xml;u…