タグ

CSS3とレイアウトに関するmut00tumのブックマーク (3)

  • Flexboxで決まり! | Webクリエイターボックス

    2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

    Flexboxで決まり! | Webクリエイターボックス
  • CSSで計算式を可能にするcalc()ファンクション

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

    CSSで計算式を可能にするcalc()ファンクション
  • calc()を使うとCSSで四則計算ができる。それもコンパイルしなくていいぞ! - Qiita

    【メモ】高さをcssで%指定し、可変に。 という記事を発見したので、ちょっと調べてみたら。 CSSで四則計算ができるではないか!それもコンパイルなしで。 SASSとかLESSとかStylusとかのメタ言語じゃなくてもできる!とかうれしすぎ。 特に横サイズを固定できないスマホでは、これができたら助かること山盛りだったんだけど。 【メモ】高さをcssで%指定し、可変に。 だとコード例が書かれているけど 「説明べたなので…」 とおっしゃってるので、ちょっと調べてみた。 ブラウザ・OS対応状況 ブラウザ 対応状況 特記

    calc()を使うとCSSで四則計算ができる。それもコンパイルしなくていいぞ! - Qiita
  • 1