CSS

スポンサーリンク
プログラミング

[css] befere要素自信を基準としてpositionを指定する

つまり何がしたいかというと、 #redbox { width: 100px; height: 100px; background-color: red; position: relative; } こういうdiv要素が...
プログラミング

HoudiniのCSS Typed OMとは

CSSの魔法使いになれると噂のHoudiniだけれども、先日リリースされたChrome 66でCSS Typed OMが使えるということだったので使ってみた。 Houdiniの全体像についてはこちらが詳しい。 仕様 まだWorki...
プログラミング

CSSだけで押したボタンを活性化する

デモ 説明 :target擬似クラスは、リンクのターゲット(#hoge部分)に反映するスタイルを書くことができる。 そのため、次のようにaタグのhrefとidを一緒にすることにより、cssだけで実現できる。 <a href=...
プログラミング

chromeで10px未満の文字を出せないって聞いた

chromeで10px以下のフォントサイズは10pxになるらしい。 この話を聞いたときは衝撃だった。 実際、これはChromeの設定で変えることが出来て、 Chromeの設定 → 詳細設定 → フォントをカスタマイズ をすると、以下のよう...
プログラミング

css columnsでのカラムレイアウト

CSS3の新機能として、columnsというカラムレイアウトを手軽に実現できるプロパティがある。 実際使ってみたサンプルはこちら。 たしかに簡単にカラムレイアウトが作れる。がしかし、カスタマイズ制に乏しいのでどうなんだろう。 css...
プログラミング

css counterで要素の数を数える

cssのcounterを使ってみた。 下のページの文字達は全てcss内で書かれているっ こういうインクリメンタルな値をCSSで扱うことができるのがcounter。 counterはcontentプロパティ内で使うことができて、 ...
プログラミング

css animationがfirefoxで動かない

自分の作っているサービスで、ユーザへのコメント通知などのためにこのような画像を表示している。 この画像を実はCSSで色が薄くなったり濃くなったりするアニメーションをほそぼそとしているんだけれども、 以下のように書いた時、Chromeやs...
プログラミング

CSS attr()でタグの属性値を扱う

cssのcontentについて調べてるうちに、attrという面白い機能を発見した。 attr()はcontentプロパティの値として使えるようで、たとえば、 <a href="test.html">テストページ</a&g...
プログラミング

CSS vw vh vminの単位について

この記事でcssで扱える単位を調べた時にでてきたvw,vh,vminという単位。 vw は viewport width vh は viewport heightといって、1vw はwidthの1%と同じ、1vh はheightの1%と同...
プログラミング

css calc()で長さを計算して求める

calc()というもので、CSSで計算させることができるようになってたらしい。 sassとか使うわけじゃなく、ナチュラルなcssです。 たとえば、以下のようにすると、 #main{ width: calc(1000px - 10px...
スポンサーリンク
タイトルとURLをコピーしました