擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
こんにちは、@yoheiMuneです。 CSSのdisplayはマークアップするには絶対に必要なスタイルの1つですよね。その中でtableやtable-cellは業務でなんとなく使っていますが断片的にしか理解していなかったので、今日はそれらのまとめブログを書いてみたいと思います。 Special Thanks to https://flic.kr/p/iNeYy7 目次 display:tableとは display:tableはテーブル要素のように表示するためのCSSです。このスタイルを用いることでtableタグを使わずに、同様のスタイルを利用することができます。 <!-- tableタグを利用した例 --> <table> <tr> <td>名前</td> <td>メールアドレス</td> </tr> <tr> <td>よーへい</td> <td>aaaa@bbb.ccc</td> <
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
無限スクロールの仕組みを調べている中で、jQueryを使って汎用性の高そうな動作が意外と簡単に実装できることがわかったのでメモ。 ページ内のある要素が、スクロールされて表示されたときになんらかの命令を実行するJavaScript。 $(function() { // 引き金となる要素を設定 var triggerNode = $(".trigger"); // 画面スクロール毎に判定を行う $(window).scroll(function(){ // 引き金となる要素の位置を取得 var triggerNodePosition = $(triggerNode).offset().top - $(window).height(); // 現在のスクロール位置が引き金要素の位置より下にあれば‥ if ($(window).scrollTop() > triggerNodePosition)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く