タグ

2018年1月29日のブックマーク (3件)

  • テーブルのセルが空だった場合にハイライトしたり文字を挿入したり

    Result 5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。 特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。 セル毎に異なるスタイルや文字にしたい場合はclass付与等で対応してください csstd:empty{/*tdが空なら背景をyellowに*/ background:yellow; } td:empty:before{/*背景が空なら文字挿入*/ content:"無し"; }html<table> <tr> <th>順番</th> <th>名前</th> <th>数</th> <th>金額</th> </tr> <tr> <td>1</td> <td>りんご</td> <td>10</td> <td>2000円</td> </tr> <tr> <td>2<

    テーブルのセルが空だった場合にハイライトしたり文字を挿入したり
  • 【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方

    Webページのスクロールに合わせて要素を表示させるjQueryプラグイン[Scrolla]を紹介します。 同様の機能を持つプラグインでは[ScrollReveal]や[jquery.inview]または[WOW.js]などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。 実際に使ってみたサンプルは コチラからどうぞ。 Download : https://github.com/maximzhurkin/jquery-scrolla 導入方法は以下より。 [Scrolla]のアニメーション部分は[animate.css]に依存します。 つまり必要になるファイルは3つ。 animate.css jquery.js scrolla.jquery.min.js これらのファイルを予め読み込んでおきます。 <link rel="stylesheet" href="animat

    【jQuery】ページのスクロールに応じて要素を表示する[Scrolla]の使い方
  • Webサイトに印象的な効果を取り入れる!おすすめの選択肢6選【画像や動画を使うだけじゃない!】

    画像や動画は、Webサイトのホームページを改善するための最も一般的なオプションです。しかし、それらが唯一の手段なのでしょうか? 新しく生まれてくるトレンドはこれまでの常套句以外の手段を私たちに与えてくれます。 1.360度パノラマ Nova Skoda この概念は、画像またはビデオに基づかせることができます。すべては、アイデアとプロジェクトの予算によって決まります。このトリックは、Nova Skodaの公式Webサイトのような自動車業界を代表するものから、さまざまな種類のWebサイトで見ることができます。 2.パララックス あなたのホームページに画像や動画を使用するというアイデアが気に入らない場合は、抽象的で芸術的なソリューションを利用できます。最も簡単な方法の1つは、視差効果を採用することです。 Code Resolution 3.マウスエフェクトで遊ぶ マウス関連のエフェクトには、小さ

    Webサイトに印象的な効果を取り入れる!おすすめの選択肢6選【画像や動画を使うだけじゃない!】