タグ

2016年8月25日のブックマーク (3件)

  • Sass - Materialize

    Variables When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _variables.scss. $primary-color: color("materialize-red", "lighten-2") !default; $primary-color-light: false !default; $primary-color-dark: false !default; @if not $primary-color-light { $primary-color-light: lighten($primary-color, 15%); }

    hatekats
    hatekats 2016/08/25
    “-webkit-transition”
  • Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA

    ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

    Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
  • CSSフレームワーク30選!デザイン含めて一括総まとめ

    CSSフレームワークを使うのは、すでに一般的になっている。 CSSはよくできたWebページデザインシステムだが、大規模なアプリケーションに弱い、車輪の再開発のような部分も多いという弱点がある。 そんな弱点を補ってくれるのがCSSフレームワークだ。フレームワークを使うことで作業時間は大幅に減り、品質も上がる。 しかし、一方で同じCSSフレームワークを使うと、同じようなデザインになりがちという欠点もある。 そこでこのページではCSSのフレームワークを30種類ご紹介する。人気のものからマイナーなものまで幅広く揃えてみた。 CSSフレームワークを選ぶときに参考にしてほしい。 CSSフレームワーク大体の使い方 CSSフレームワークの使い方は大体どれも同じだ。 ステップ1 CSSを読み込む サイトに行って、CSSとあればJavaScriptをダウンロードする。link rel でサイトに組み込んで準備

    CSSフレームワーク30選!デザイン含めて一括総まとめ