初めてCSSを書いたときにハマった話

きっかけ

業務で初めてCSSを書いたとき、なぜかわからないけど反映されずに悩んだこと。

CSSが効かない２つの罠

1. セレクタには優先度がある

CSSを書くときは以下のパターンがある。

（例）以下のdiv要素の文字に色を付ける。

<div id="id" class="class" name="name" style="color:red;">文字の色を変えるよ</div>

/*ID指定*/
#id {
  color: blue;
}
/*class指定*/
.class {
  color: green;
}
/*属性指定*/
[name=name] {
  color: yellow;
}
/*要素指定*/
div {
  color: white;
}

何色になるかというと、、、赤色になる。
セレクタの指定方法によって優先度が変わってくることがわかる。
細かく言うとセレクタの指定ごとに点数が決められていて、計算結果で優先度が変わるらしい。

優先度は以下のようになっている

1. htmlのstyle属性
2. idセレクタ
3. classセレクタ
4. 属性セレクタ

しかし、整備したソースを書くならCSS設計規則BEMなどをの概念を参考にした方がよい。
BEMにそって書くならclassセレクタしか使わないことになる。
BEMについてはまた今度書く。

つまり

自分が書いたCSSより優先度が高いCSSがすでについている。
書いたまま反映すると思っちゃダメってこと。

2. 親要素に依存するものがある

例えば要素の位置を右上にしたいとする。
その場合、以下のように書くとする

/*対象要素のclass*/
.target {
  position: absolute;
  right: 0;
  top: 0;
}

このとき、このCSSは効かない。
なぜかというと、absoluteは親要素を基準とした絶対的な位置を決めるものだから。
absoluteを使うときは親要素に以下のCSSを書く必要がある。

/*親要素のクラス*/
.parent {
  position: relative;
}

つまり

CSSによっては親要素も関係してくる。
普段使わないCSSを使うときは調べたほうがよい。

最後に

自分で最初から書く場合は親要素からCSSを考えないといけないってことを学んだ。
1年ぐらい経験してやっとつけたいCSSを邪魔されずにつけれるようになった。
初めのころはIDで指定したりしてたくさん書きがちだけど、再利用できるものは再利用して行数を少なくしたほうがいい。

概要

サイトA：検索フォームが設置されている[文字コードUTF-8]
サイトB：サイトAからのリクエストを受けて結果を表示[文字コードEUC-JP]

例えば古いサイトで、ブログだけWordPressで作られてたりして、
共通ヘッダーから商品検索ができるようにしたい場合。
まぁ今時UTF-8以外で作られてるサイトって...とは思いますが、それは置いといて。

対策しないとどうなるか

文字化けします↓

[対策1] accept-charset

<input type="search" name="search_form" placeholder="キーワードを入力" autocapitalize="off" value="" />
<input type="button" name="search_button" value="検索" />
<form name="search" id="search" method="get" action="/list.html" accept-charset="EUC-JP">
    <input type="hidden" name="search_key" id="search_keyword" value="">
</form>

accept-charset属性に送信先の文字コードを指定するだけで上手くいっちゃったりする。
しかし、IE非対応。あるある過ぎて、もはや怒りも湧いてこない。

[対策2] ecl.js

https://www.junoe.jp/downloads/itoh/enc_js.shtml

<form name="search" id="search" method="get" action="/list.html" onsubmit="submitFunc(); return false;">
    <input type="text" name="search_form" placeholder="キーワードを入力" autocapitalize="off" value="" />
    <input type="submit" name="search_button" value="検索" />
    <input type="hidden" name="search_key" id="search_keyword" value="">
</form>
<script src="./js/ecl.js"></script>
<script>
    function submitFunc() {
        var utf8Pram = document.search_form.value; //入力値を取得
        var eucPram = EscapeEUCJP(utf8Pram); //エンコード処理
        document.forms.search.search_key.value = eucPram; //valueに設定
        document.forms.search.submit(); //送信処理
    }
</script>

詰まったところ

onsubmit="submitFunc(); return false;"

対策2を試しているとき、入力してエンターキーを押すと、デフォルトでフォーム送信処理が走るのですが、その際submitFunc()の処理が通らない事象に遭遇しました。
エンターキー押下時のデフォルトの動きを抑制しつつ、処理を挟むやり方が最初分からなかったです。
インラインで実行せずに全部JavaScript側で処理しても良かったのですが、今回はなるべくソースを流用する方向で対応しました。

参考文献

form - MDN - Mozilla

[IE対策も] UTF-8フォームから別の文字コードへPOSTする際の文字化け解消法

100日チャレンジの244日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

244日目は、

おはようございます
244日目
・youtubeで、webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 19, 2020