CSS小技メモ

   

CSSについての個人的メモ。
1.ドラッグした時の色を変更する
  1. ::selection {
  2. color:<color>
  3. background:<background-color>
  4. }

※現在は仕様外の機能
この 擬似要素は CSS Selectors Level 3 の草案には記載されていましたが、特に入れ子の要素での動作の定義が不十分に見え、相互互換性が実現できなかったため、勧告候補の段階で取り除かれました（W3C Style のメーリングリスト上の議論による）。

::selection 擬似要素は現在、標準路線上のどの CSS モジュールにも存在しません。製品の環境で使うべきではありません。
引用元：Mozilla Developer Network(https://developer.mozilla.org/ja/docs/Web/CSS/::selection)

2.縦書き
  1. writing-mode:vertical-rl;
  3. /* IE独自仕様 */
  4. writing-mode:tb-rl;
  6. /* ベンダープレフィックス付 */
  7. -o-writing-mode:tb-rl;
  8. -moz-writing-mode:tb-rl;
  9. -webkit-writing-mode:tb-rl;
  10. writing-mode:tb-rl;


3.スライド画面遷移
アンカーリンクがアクティブになるまで表示位置が画面外になるようにtransform100％(-100％)に設定。
transformXだと横移動、transformYだと縦移動。

CSS）
  1. .slide {position:fixed; width:100%; height:100%; left:0; top:0; margin:0; padding:0;}
  2. #page1 {z-index:10;}
  3. #page2 {z-index:20; transform:translateX(100%); background-color:#336699; transition:1s;}
  4. #page2:target {transform:translateX(0%); transition:1s;}
  5. #page3 {z-index:30; transform:translateY(-100%); background-color:#ff6600; transition:1s;}
  6. #page3:target {transform:translateY(0%); transition:1s;}

HTML）
  1. <div id="page1" class="slide">
  2. …
  3. </div>
  4. <div id="page2" class="slide">
  5. …
  6. </div>
  7. <div id="page3" class="slide">
  8. …
  9. </div>
  11. <ul>
  12. <li><a href="#page1">page 1</a></li>
  13. <li><a href="#page2">page 2</a></li>
  14. <li><a href="#page3">page 3</a></li>
  15. </ul>

▸▸テストページ

〈