SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル（base.scss）を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ
Google Chromeでフォーム入力時に日本語変換中のテキストが消えちゃう | FJWR BLOG
確か去年の夏頃から、Google Chromeでフォームに入力してる時に、日本語変換中のテキストが消えてしまう現象が起こるようになった。 ↓みたいな感じに。 おい、どこ行った。ってなる。 原因はCSSの「::selection」だった よくCSSの「::selection」でテキスト選択時の文字色や背景色を以下のように変更するんだけど、 ::selection { color: #fff; background: #000; } なぜかGoogle Chromeでは、この時の文字色（#fff）が日本語変換中に適用されてしまう、ってことだった。 だから、文字が消えてるんじゃなくって、フォームの背景色と文字色のどちらもが白だから見えなかっただけなんだな。 解決策 下記のようにすれば良い。 ::selection { color: #fff; background: #000; } input:
イメージスケールを使ってWebサイトの配色を論理的に決める方法 | ベイジの社長ブログ
デザインをやっていて特に難しいと感じるのが、色の決定です。色は、言語化できない心理的なイメージに作用するため、デザイナーとしては慎重にならざるを得ません。しかし残念ながら、私自身は、色に関して天才的なセンスを持っているわけではありません。そこで、配色のためのツールや配色理論などを用いて色を決定していくのですが、その過程で特によく使うのは言語イメージスケール（©小林重順／日本カラーデザイン研究所）です。その一連のプロセスを、実際に関わった某学習塾サイトを例にご紹介します。 キーワードの抽出 配色の決定にあたり、まずは学習塾のパンフレットや広告、既存のWebサイトなどの情報を収集し、ブランドキーワードの抽出を行いました。結果として、以下のようなキーワード群を抽出しました。 安心、安全、堅実、真面目、確実、知的、本物、楽しい、明るい、健全、のびのび、元気な、豊か、丁寧、親切、誠実 ここでは、「塾
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-807.html
