タグ

CSSに関するturirin123のブックマーク (2)

  • 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

    2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

    日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
    turirin123
    turirin123 2017/03/31
    すごいな
  • CSSのcalc()関数を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ

    pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で

    CSSのcalc()関数を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
    turirin123
    turirin123 2017/02/09
    難しい
  • 1