@wai_ya.com

復数のクラスを全て含む場合のCSS指定

2014.08.13 | Cats : CSS, HTML

たとえば、

<div class="hoge1">
 あばばばば
</div>

<div class="hoge1 hoge2">
 ひでぶぶぶ
</div>

<div class="hoge2">
 うひゃひゃひゃひゃ
</div>

こんなコードがあって、ひでぶぶぶ部分だけ色変えたいとかあるとします。
その場合は、

.hoge1 {
 background-color: #FF0;
}
.hoge2 {
 background-color: #0FF;
}
.hoge1.hoge2{
 background-color: #F00;
}

みたいに、.クラス.クラスみたいな書き方で両方含む場合にだけCSSを適応させることができるようです。

使用例

 あばばばば
 ひでぶぶぶ
 うひゃひゃひゃひゃ

 

 

Atom エディタで 文字選択時の色変え

2014.07.10 | Cats : CSS, HTML

Github製エディタのAtomがついにWindows7,Windows8でも使えるようになりましたね。

Hello Windows | Atom Blog(英語)

Atom

そんなバリバリアップデートを重ねていっているAtomですが、
デフォルトでは文字選択のときのハイライトがちょっとだけみにくかったので
選択時の設定を変更してみました。

WinでもMacでもユーザーディレクトリの直下に「.atom」というディレクトリができますので、
その中のstyle.lessを編集すれば、CSSベースで見た目がいろいろ変更できるみたいです。

/Users/ユーザー名/.atom/style.less
(環境によっては異なる)

で、文字選択時の変更は下記のように記述

.editor{
  .selection .region{
     background-color: yellow; /* 文字選択時に背景を黄色に */
     opacity: 0.3;	           /* 透明度を設定 */
  }
}

CSSで見た目を簡単に変更できるのは嬉しいですね。