[B! css] willnetのブックマーク

How to stop FOUC when using css loaded by webpack

willnet 2019/04/09

CSS

リンク

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

willnet 2018/10/23

bootstrapの.disabledがこれつかってた

css

リンク

フレックスコンテナ内で絶対位置指定された要素の静的位置 / masuP.net

タイトルが少し分かりにくいですが、display:flexの中でposition:absoluteが指定された要素の初期位置がどこになるか、という話です。経緯ポップアップメニューのコンポーネントを実装していて、フレックスボックスと絶対位置指定︵position:absolute︶を利用してポップアップメニューを中央揃えさせようとしましたが、SafariとIE11では期待通りの表示になりませんでした。試してみた方法は、ポップアップのメニューとボタンを包むラッパーをフレックスボックスにして、justify-content:centerで中央寄せし、メニューの高さ方向だけ絶対位置指定する方法。 HTML <div class="wrapper"> <button type="button">Button</button> <div class="menu">hoge</div> </div

willnet 2018/08/25

これどうしたもんかなあ。flexbox内のdom要素に重なるように別のdomを配置したいんだけど

css

リンク

Compass の送別会 - Pepabo Tech Portal

2018 年3月15日、渋谷のはずれにある中華料理店﹃東亜飯店﹄では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。﹁えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします﹂はい、ありがとうございます。 Compass、いままでほんとうにありがとう。 Compass は、SCSS を CSS へトランスパイルする機能だけでなく、 CSS3で追加されたプロパティにベンダープレフィックスを付与してくれる mixin や、指定したディレクトリに画像ファイルを放り込むだけでスプライト画像も生成してくれる、とっても便利なライブラリでした。なんと最初のリリースは 2009 年で、

willnet 2018/03/15

僕もそろそろお別れしないとなー

rails
css

リンク

display:none と visibility:hidden の違い - Qiita

visibility:hiddenは名前の通り、要素はあるけど見えない状態。 display:noneは、要素も取得されず、完全にその場にない扱い。検証準備 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="one" class="box"></div> <div id="two" class="box"> <h3>Visibility:hidden</h3> エレメント描画されず。けど、表示エリアは﹁残る﹂。背景色で塗りつぶした感

willnet 2018/01/20

css

リンク

phiary

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも一応残ってるので, がっつり使わせて頂いてる次第です.

willnet 2018/01/20

css

リンク

CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、王です。デザイナーやってます。今回は﹁Flexboxを基本から理解して、使い方をマスターしよう！﹂ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！デモ昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。﹁なるべく手間をかけずに作りたい！﹂という世界中のデザイナーの声に応えて、﹁Twitter Bootstrap﹂をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

willnet 2018/01/20

css

リンク

PostCSS まとめ - Qiita

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の﹁CSSツールを作るためのフレームワーク﹂です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する﹁Autoprefixer﹂、未来のCSSの構文の一部を今のブラウザで解釈できるようにする﹁cssnext﹂、カスタマイズ性に富んでいるCSSリンターである﹁stylelint﹂などが有名です。 PostCSSは2018年2月、かなり広く使われて

willnet 2017/05/14

css

リンク

CSSフォント指定を考える2015 - リシンプル

必要なCSS フォント指定を考えてみる海外のWebサイトでは、Webフォントを用いることが常識化しています。Google フォントなどのWebフォントが無料で使用できることもあり、どのブラウザ、OSでも共通したフォントが使えるWebフォントはかなり価値があるものとして重宝されています。しかし、日本語におけるWebフォントの整備は、世界のフォント事情からするとかなり遅れており、トラフィックに応じた課金で使用するWebフォントが主流となっていることもあって、使用するにはハードルが高く、その他のいくつかの問題もあり、まだまだ、閲覧者のローカルでインストールされているフォントに頼らざるを得ません。そこで、日本語を表現するCSSのfont-familyのあり方を現在のWebブラウザやOSの標準フォントの現状を踏まえて再検討してみます。 font-familyで共通するものはないのかフォントをどう

willnet 2016/03/25

良さそう

css
font

リンク

Hologram | Generate a Styleguide right in your CSS

Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful styleguide. Quick start: gem install hologram And then: hologram init View on Github Why would I use it? Hologram makes building a styleguide as easy as maintaining your CSS. It is similar to Kneath Style Sheets and Styledocco. Your documentation is written in your production CSS using a combination of YAML and

willnet 2016/01/08

複数のデザイナが協業するときや、エンジニアもデザイン修正したりするケースで便利に使えそう

rails
css

リンク

box-sizing－CSS3リファレンス

box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。幅と高さにはパディングとボーダーは含まれません。これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない︵初期値︶ border-box パディングとボーダーを

willnet 2015/11/09

css

リンク

CSS3の「フレキシブルレイアウト」使い方まとめフラップイズム

どうも、くーへいです。今回は﹁レスポンシブデザイン﹂での使用が想定される、﹁フレキシブルボックス﹂についてまとめてみたいと思います。なお、本記事は﹁CSS Flexible Box Layout Module Level 1﹂の2014年5月22日付けの編集者草案︵Editor’s Draft︶を基に作成しています。また、﹁CSS Flexible Box Layout Module Level 1﹂は未だに策定中であり、現在は2014 年3月25日付の最終草案︵Last Call Working Draft︶が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。最初にブラウザの対応状況について注意点﹁フレキシブルボックス﹂で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。﹁

willnet 2015/08/03

css

リンク

z-index再入門 | 第1回 z-indexの仕組み

次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたときなぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。スタック文脈とスタックレベルスタック文脈︵stacking contexts︶、スタックレベル︵stack level︶という概念は、z-indexを扱う上でとても重要なものです。スタック文脈スタック文脈とは、ある条件を満たした要素によって形成される階層構造︵文脈︶のことです。スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整

willnet 2015/06/12

めっちゃ参考になった

css

リンク

Responsive Email Templates | Playground from ZURB

We've put together this set of super awesome em ail templates so that you can make your em ail campaigns responsive! Responsive, you say? Yep. With more and more people pulling out their phones to check their em ail, we knew there had to be an easier way to ensure campaigns looked good on any device. That's why we recently made all our em ail campaigns responsive. Which had a lot of folks asking if we

willnet 2015/05/31

css

リンク

obomemo.com

このドメインを購入する。 obomemo.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

willnet 2015/04/22

css

リンク

CSSでのパーセント指定まとめ

(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・) 一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。で、CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。というわけでまとめてみました。色系 RGB値説明：色をRGB表記で指定する範囲：0～100 指定方法：rgb(R%, G%, B%) 例：color:rgb(50%, 10%, 30%) 参考：スタイルシート［CSS］/CSSの基本/CSSの色指定 – TAG index Webサイト “color”や”background-color”などの色の指定のプロパティで利用する。それぞれ左から赤、緑、青の値

willnet 2015/01/14

“上下マージンも高さ(height)ではなく、横幅に対する割合をあらわすということ。”

css

リンク

emaillenin.com

willnet 2014/11/21

spinnerってブラウザ標準のやつあるの

css

リンク

CSSで計算式を可能にするcalc()ファンクション

Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート Chrome Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15

willnet 2014/10/21

“「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」”

css

リンク

Basscss

Code with ConfidenceUsing clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scala ble, more readable code. No Side EffectsThings behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS. ComposableReusa ble, interoperable styles work like buil