CSS Variables （CSS カスタムプロパティ） の使い方
CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 について、最新仕様に基づいた解説します。 CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。 以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。 近日正式版がリリースされる予定の Firefox 31 で最新の仕様 （接頭辞が -- に変更） を基に実装、デフォ
印刷通販なら【プリスタ。】にお任せください
お客様のメール環境によりプリスタ。からのメールが届かない、遅延、迷惑メールフォルダに入ってしまう場合がありますので、 弊社からのメールを受信できるようにあらかじめ「@printsta.jp」のドメイン指定の設定をお願いいたします。 ※特にGmailなどのフリーメールでこのような事象が多く寄せられております。 用紙の取り扱いについて 「ミラーコートの代替用紙と取扱について」 弊社在庫分で取扱終了となります「ミラーコート」の用紙の代替用紙が決定いたしました。 同メーカーにて紙質を出来る限り再現したミラーコートの後継用紙となっております。 若干の色味は異なりますが、表面の光沢面はミラーコートと同様の紙質となっておりますのでご安心くださいませ。 「ミラーコート 180kg」は在庫分終了いたしました。 用紙の名称を「エスプリSS-F 180kg」という名前に変更させていただきます。 ※「ミラーコート
cssのposition: fixedが効かないというお話。
しかも大体のブラウザで発生。 調べていくと、レンダリングエンジンのバグかCSSの仕様かちょっとわからないのだけれど、悪さをしていたのは、fixedをつけている要素の親要素というか先祖要素。 そいつに transform: ～ のCSS指定があった。ぶっちゃけ外したら直ったのだが、もともと書いていたわけではなく、jPanelMenuというプラグインが勝手につけていたのだ。 このプラグイン自体はかなり便利なのだが、オプションでtransformの属性を外す指定がない。 今回は力技で、ブラウザがtransformをサポートしているかどうかを判定している箇所を書き換えて対応した。 /* transformsSupported: 'WebkitTransform' in document.body.style || 'MozTransform' in document.body.style || '
CSSだけ(flexbox)で高さ不定フッターを最下部に固定する方法
いわゆるStickyFooterってやつですが、サイトのコンテンツ量が少ない時にフッターの下に隙間が空いてしまう・・という微妙な状況下に陥った方は多いことでしょう。 というかぶっちゃけ、HTML/CSS書いているほぼ全員じゃないですかね。結論だけ知りたいという方はこちら。 で、そういう時の解決方法として、以下の様なものが検索したら出てきていました。 従来の解決方法 ネガティブマージン フッターの高さを事前に決め打ちできれば、ネガティブマージンで簡単に解決できます。 ただし、コンテンツの増減が今後も想定される場合はメンテの手間が増えるので、あまりやりたくない選択肢でした。 Javascript使う 有名なのはfooterFixed.jsでしょう。 可変する高さのフッターにも対応できて、CSSもシンプル。良いスクリプトですし、私も今までに大変お世話になりました。 しかしこんなことにjavasc
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
