TECH EXPERT 59日目

TECH::EXPERT

cssのセレクタや疑似クラスを勉強中。
この辺は奥深いので新たな発見がいっぱい。

kaminariのページネイトに関して、左右2個ずつ表示ではなくて、固定長で5マス表示に切り替えたいんだけど、そんなオプションがなくて困る。if文でつなぐしかないのかな。

css

優先順位

id > class > typeセレクタの順
:not()内にid指定を伴う場合もid指定と同様に優先されてしまうため、cssの上の方に記載したとしても強弱関係が強くなり、打ち消せない。

:not()

指定した要素以外をセレクトする。

div:not(p)

セレクタ > セレクタ

直下の子要素を選択。

セレクタ + セレクタ

隣接セレクタ。直後のセレクタを選択できる。
複数繋げて書くこともできる。

セレクタ+セレクタ+セレクタ
h1+h2+p
とすると、h1の隣にh2があってなおかつp要素がh2に隣接している場合にスタイルが適用される。

セレクタ ~ セレクタ

弟要素をセレクトする。
1つではなく、該当する弟要素の全てに適用される。

セレクタ > セレクタ

子要素を選択する。直下の子要素のみで、孫要素には影響しない。

ラジオボタン

1つしか選べない。
nameを同一に指定したボタンは一連のボタンと認識される。
チェックされたかどうかはinput[type=radio]:checkedで判定できる。

<input type="radio" id="b1" name="b" class="b">
<label for="b1" id="b1_1">すべて</label>
<input type="radio" id="b2" name="b" class="b">
<label for="b2">レディース</label>

pointer-events

defaultではauto.
noneにすることでアクションを起動させない。
具体的にはaタグのリンクへ飛ぶ動作やフォーカスさせる時。

pointer-events: none;

この機能を使って、親要素でのアクションを否定するが、子要素でautoを指定することでアクションの機転を作ることができる。

<a>
<p></p>
<span></span>
</a>

a{pointer-events: none;}
p{pointer-events: auto;}

上記のように設定すると、pタグをクリック時にaタグのアクションを発動できる。

1つのdivの中に複数の要素を持ち、:hoverした時に一部のスタイルを変えるという動作も、pointer-eventを使って制御することで、別の要素にhoverした際に別の要素のスタイルを変えるということもできる。

<div>
  <p>hoge</p>
  <button>fugafuga</button>
</div>

div{pointer-events: none;}
button{pointer-events: auto;}
div:hover p{
  color: red;
}

上記はdivのhoverイベントの惹起をbtnに限定している。
その上で、イベント発行時にpタグのスタイルを変更している。

html

tabindex

tabindex=0を与えるとキーボードのtabでフォーカスできるようになる。
1以上の数字を与えると優先順位を指定できるが、管理が煩雑になるため使わない。0を指定しておけばブラウザが解釈する順序で表示される。

またtabindex=”-1″を与えるとタブキーではフォーカスが当たらないようになる。

<div tabindex="0">hogehoge</div>

kaminari

ビューの変更

rails g kaminari:views default

上記のコマンドで以下のviewファイルが作成され、これを編集することで変更する。

create  app/views/kaminari/_next_page.html.haml
create  app/views/kaminari/_gap.html.haml
create  app/views/kaminari/_last_page.html.haml
create  app/views/kaminari/_page.html.haml
create  app/views/kaminari/_prev_page.html.haml
create  app/views/kaminari/_paginator.html.haml
create  app/views/kaminari/_first_page.html.haml

件数表示

Displaying items 1 – 4 of 10 in total

上記のような総件数と表示中の件数を出すためには以下のようにhamlで記述する。

= page_entries_info @items, entry_name: 'item'

コメント