SPOTブログ
2015/04/20
選択して反転するとドイツ国旗が出現！？CSSで簡単につくれますよ。その方法をご紹介！
IDEA*IDEAさんで取り上げられていたフッターを選択して反転させるとドイツ国旗が現れるというサイトが先日話題になっていましたね。
該当サイトはこちらのランダムパスワードジェネータです。
今回は、この機能の実装方法をご紹介します。
ドイツ国旗のコード解説
htmlの記述は以下のとおりです。
|
1 2 3 4 5 |
<div class="copyright"> <span class="flag-part-1">黒くなる部分</span> <span class="flag-part-2">赤くなる部分</span> <span class="flag-part-3">黄色になる部分</span> </div> |
span にてflag-part-1からpart3までクラス分けを行います。
次に、cssにて以下のように設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.copyright{ color:#ccc; text-align:center; } .flag-part-1, .flag-part-2, .flag-part-3{ margin:10px 0; display:block; } /*反転時の色を::selectionで設定*/ .flag-part-1::-moz-selection { background:#000 } .flag-part-1::selection { background:#000 } .flag-part-2::-moz-selection { background:#d00 } .flag-part-2::selection { background:#d00 } .flag-part-3::-moz-selection { background:#ffce00 } .flag-part-3::selection { background:#ffce00 } /*反転時に見えなくなるので、黄色背景の文字色を黒に変更*/ .flag-part-3::-moz-selection { color:#000 } .flag-part-3::selection { color:#000 } |
::selectionと::-moz-selectionが反転時の擬似要素なので、ここで背景色を変更するだけです。
コロン（:）が2つ必要なことだけ注意が必要です。
サンプルページはこちら
関連記事一覧
2011/12/28
IEで楽天RMSの商品ページがはみ出してしまう不具合の対処方法 #rakuten
今回、楽天のショップをカスタマイズする案件をさせていただくことになり、初めて楽天のRMSを触ることになりました。 最近ではあまり考えられないようなtableレイアウトでのシステムに戸惑いつつも、デザイ...続きを見る
2012/01/26
楽天市場RMSで簡単に商品を倉庫から出し入れするブックマークレット
引き続き楽天市場の話題です。CSVでの商品管理が月額一万円ということでちょっと高いので、手動で商品管理をしていますが、これがすごくめんどくさい。とりあえず、ちょこちょことブックマークレットで処理を自動...続きを見る
2012/04/11
ダメなSEO業者に騙されて契約しないための３つのポイント
被リンクは確かにSEO（上位表示）には有効です。 以前までは、手っ取り早く上位表示するための簡単な方法でした。
でも、ちょっと待ってください。 最近では、被リンクのリスクが非常に高くなっており、期待...続きを見る
2012/01/06
iPhone/iPadのMobileSafariで背景画像のセンタリングが効かない不具合をMediaQueryで解決する方法 #iPhone #iPad #CSS3 #html5
追記：2012/02/07
もっとシンプルでいい解決法が見つかりました。
viewportを設定すれば簡単に解決します。詳しくはこちら。
iPhoneやiPadで背景がズレる問題は、viewport...続きを見る
リンク
![はたらくホームページ制作なら、愛知県名古屋市の株式会社SPOT [スポット]](http://spot-web.jp/wp-content/themes/spot-web.jp/images/common/header-logo.png){kind=logo}