Sassで色を調整する - Qiita
sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ HSL［色相（Hue）、彩度（Saturation）、輝度（Lightness）］ベース Photoshop等で使用されるHSB(HSV)［色相（Hue）、彩度（Saturation）、明度（Brightness・Value）］ではない HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています 色相の変更 adjust-hue($color, $degrees) 色相環の度数($degrees)を○○degで指定 // ベースとなる色 $base-color: #79a5e0; .adjust-hue { color: adjust-hue($base-color, 60deg); }
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
まだ必要？ベンダープレフィックスまとめ
日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックスは必要ないでしょう。 Can I use border-radius Opera Miniが非対応と出ていますが、日本国内シェアは0%とも言いますし、こちらももう問題ないでしょう。 Can I use box-shadow こちらも同様。 Can I use animation いつの間にかanimationまで。 「
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2245872982c8e900d7bcc462d8385b1f0845ff9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」:phpspot開発日誌
