プログラミング [css] befere要素自信を基準としてpositionを指定する つまり何がしたいかというと、 #redbox { width: 100px; height: 100px; background-color: red; position: relative; } こういうdiv要素が... 2020.07.31 プログラミング
プログラミング HoudiniのCSS Typed OMとは CSSの魔法使いになれると噂のHoudiniだけれども、先日リリースされたChrome 66でCSS Typed OMが使えるということだったので使ってみた。 Houdiniの全体像についてはこちらが詳しい。 仕様 まだWorki... 2020.01.16 プログラミング
プログラミング CSSだけで押したボタンを活性化する デモ 説明 :target擬似クラスは、リンクのターゲット(#hoge部分)に反映するスタイルを書くことができる。 そのため、次のようにaタグのhrefとidを一緒にすることにより、cssだけで実現できる。 <a href=... 2020.01.15 プログラミング
プログラミング chromeで10px未満の文字を出せないって聞いた chromeで10px以下のフォントサイズは10pxになるらしい。 この話を聞いたときは衝撃だった。 実際、これはChromeの設定で変えることが出来て、 Chromeの設定 → 詳細設定 → フォントをカスタマイズ をすると、以下のよう... 2013.06.11 プログラミング
プログラミング css columnsでのカラムレイアウト CSS3の新機能として、columnsというカラムレイアウトを手軽に実現できるプロパティがある。 実際使ってみたサンプルはこちら。 たしかに簡単にカラムレイアウトが作れる。がしかし、カスタマイズ制に乏しいのでどうなんだろう。 css... 2013.05.31 プログラミング
プログラミング css counterで要素の数を数える cssのcounterを使ってみた。 下のページの文字達は全てcss内で書かれているっ こういうインクリメンタルな値をCSSで扱うことができるのがcounter。 counterはcontentプロパティ内で使うことができて、 ... 2013.03.30 プログラミング
プログラミング css animationがfirefoxで動かない 自分の作っているサービスで、ユーザへのコメント通知などのためにこのような画像を表示している。 この画像を実はCSSで色が薄くなったり濃くなったりするアニメーションをほそぼそとしているんだけれども、 以下のように書いた時、Chromeやs... 2013.01.15 プログラミング
プログラミング CSS attr()でタグの属性値を扱う cssのcontentについて調べてるうちに、attrという面白い機能を発見した。 attr()はcontentプロパティの値として使えるようで、たとえば、 <a href="test.html">テストページ</a&g... 2013.01.08 プログラミング
プログラミング CSS vw vh vminの単位について この記事でcssで扱える単位を調べた時にでてきたvw,vh,vminという単位。 vw は viewport width vh は viewport heightといって、1vw はwidthの1%と同じ、1vh はheightの1%と同... 2013.01.07 プログラミング
プログラミング css calc()で長さを計算して求める calc()というもので、CSSで計算させることができるようになってたらしい。 sassとか使うわけじゃなく、ナチュラルなcssです。 たとえば、以下のようにすると、 #main{ width: calc(1000px - 10px... 2013.01.06 プログラミング