ONZE/BLOGオンズ開発ブログ

【CSS】レスポンシブに対応して要素の比率を保持する方法 任意のボックス要素の縦横のアスペクト比率を保持したまま、レスポンシブにも対応する方法を紹介します。 HTML 早速ですが、まずはHTMLの記述から。 <div class="aspect"></div> 何の変哲もな... 【CSS】レスポンシブに対応して要素の比率を保持する方法続きを読む →

【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法 CSSの「keyframes」のアニメーションを一時停止する方法を紹介します。 ここで利用するのは「animation-play-state」プロパティ。 指定できる値は running と paused の2つで、running のほうは... 【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法続きを読む →

【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装 テーブル要素の任意の行にマウスカーソルを合わせたとき、他の行がボカされて、フォーカスした部分が目立つように切り替わるCSSのテクニックを紹介します。 サンプルは下記のURLより。 SAMPLE : https://on-ze.com/dem... 【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装続きを読む →

【CSS】placeholderの色を変更する方法 inputタグやtextareaタグで使う「placeholder」属性にCSSを効かせる方法を紹介します。 テストHTMLは以下。 <input class="sample" type="text" placeholder="サンプ... 【CSS】placeholderの色を変更する方法続きを読む →

【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！ 画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。 まずはサンプルをご覧ください。 サンプル：https://on-ze.com/demo/css3-loading/ クルクル回るローディングのアニメ... 【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！続きを読む →

【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法 CSSの擬似要素「::before」と「::after」のcontent内で改行させる方法を紹介します。 ポイントは疑似要素にwhite-space:pre;を追加すること。 そしてcontent内の改行させたい箇所に\Aを挿入します。 具... 【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法続きを読む →

【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。 だいぶ以前に「border要素にグラデーションを施す方法」という記事を公開しましたが、それとほぼ同じテクニックで、「border:dashed;」や「border:dotted;」をグラデーション処理させる方法を考えてみました。 理論として... 【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。続きを読む →

【CSS3】ネコ好き垂涎のスタイルシートのテクニック『Cat Swinging on String』が面白い！ 画像は使用せず、HTMLとCSSのみで実装されたスタイルシートのテクニック『Cat Swinging on String』が面白かったのでコチラでも紹介します。 さすがにココまで複雑なアニメーションを実装するとなると、HTMLもCSSも長文... 【CSS3】ネコ好き垂涎のスタイルシートのテクニック『Cat Swinging on String』が面白い！続きを読む →

【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。 最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。 今日はこの『慣性スクロール付きカルーセル』を JavaScript 無... 【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック続きを読む →

【CSS3】文字の色を半分だけ変えるテクニック 画像を使用せずに CSS のテクニックだけで文字の色を半分だけ変える方法を紹介します。 言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。 CSS3 Black & White : https://... 【CSS3】文字の色を半分だけ変えるテクニック続きを読む →

【CSS】スタイルシートだけで画像をモノクロにする方法 画像にマウスカーソルを合わせた際にモノクロとフルカラーを切り替えたいとき。 以前はモノクロとフルカラーの２種類の画像を用意しておく必要がありましたが、最新のCSS3では１つの画像だけで、スタイルシートに簡単なコードを記述するだけで事足ります... 【CSS】スタイルシートだけで画像をモノクロにする方法続きを読む →

【CSS3】背景画像を無限スクロールさせる［Infinite Scrolling Background］がカッコいいですよ。 背景画像を縦方向に無限スクロールさせる［Infinite Scrolling Background］を紹介します。 まずは実際に動いているサンプルをご覧ください。 Infinite Scrolling Background : https:... 【CSS3】背景画像を無限スクロールさせる［Infinite Scrolling Background］がカッコいいですよ。続きを読む →

【CSS3】画像やテキストのコピーを禁止する「user-select」の指定方法 ウェブサイト上の画像やテキストをコピーさせたくないときに使える便利なCSSプロパティを紹介します。 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: no... 【CSS3】画像やテキストのコピーを禁止する「user-select」の指定方法続きを読む →

【jQuery】ダイナミックな動作がカッコいいスライドショー［Tilted Content Slideshow］の使い方 カッコいい動作のスライドショー［Tilted Content Slideshow］を見つけてきました！ アニメーション部分にCSS3のTransformsとAnimationsを使用した高機能スライダーです。 画像をCSS3の「transf... 【jQuery】ダイナミックな動作がカッコいいスライドショー［Tilted Content Slideshow］の使い方続きを読む →

【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！ このアイコン使いたい！ 合計1,001種類のデザインが揃ったアイコンフォント［Linearicons］が可愛くて素敵です。 基本は有料になりますが、このうち170種類のアイコンをピックアップした無料版［Linearicons Free v1... 【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！続きを読む →

【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方 今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/... 【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方続きを読む →