元ニート中卒派遣30代ブサメン童貞のブログ

みんなが存在に疑問を感じている「元ニート、中卒、派遣、30歳超えのブサメン童貞」が実際に生息し、そして「どうやって生きてるか」を晒していくブログ

ユーザスタイルシートでデザイン改造する 〜カスタムデータ属性編〜

f:id:design1983:20180726235557p:plain

Safariを使ってクラウド上で仕事をしているのですが、クラウドアプリケーションのデザインが糞すぎて我慢できません。Webインスペクタを使いながらユーザスタイルシートで専用ツールをオシャンティーでシャレオッティにするための個人的なメモ。あ、我慢できないのは糞じゃないよ。

あくまで自分用ですが、あとで自分で見て混乱しないようになるべくわかりやすい解説を心がけます。もうね、みんな小難しいこと書きすぎ。

カスタムデータ属性にCSSを適用させる

HTML5から自分で属性と値を作れるようになりました。細かいルールはあるのですが、大雑把に書くとdata-からはじまる属性、その値を任意の要素に付加できます。それをJavascriptCSSでコントロールし、よりフレキシブルなアクションを実現させる。イケてるデザイナーはそんなことを考えているらしいのですが、ともかくせっかくクラウドアプリケーションにも使われているので、ここは静的なデザインのために使ってみます。

HTMLソースは以下を基に。

<button data-action-name="default">DEFAULT</button>
<button data-action-name="valid">VALID</button>
<button data-action-name="invalid">INVALID</button>

実際の挙動

CSSの解説

/********** 
button の基本デザイン
 **********/
button {
width: 160px;
height: 60px;
font-size: 10px;
letter-spacing: 0.1em;
background-color: #FFFFFF;
border-radius: 3px;
outline: none;
}

/********** 
VALID button のデザイン
 **********/
button[data-action-name="valid"] {
color: #e83e6e;
border: 2px solid #e83e6e;
}

/********** 
INVALID button のデザイン
 **********/
button[data-action-name="invalid"] {
color: #2da6e2;
border: 2px solid #2da6e2;
}

要素の直後に[属性名="値"]追記するだけ。a[target="_blank"]のように書いていたCSS2.1時代と何ら変わっていないけど……。こういった編集の場合は:nth-child(n)といった疑似クラスでやるのがCSS的には正しいのかもしれないです、わからんけど。