株式会社オンズのブログ記事一覧
タグ "CSS" を含む投稿を表示中:91件
-
【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装! 画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。 まずはサンプルをご覧ください。 サンプル:https://on-ze.com/demo/css3-loading/ クルクル回るローディングのアニメ… 【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装!続きを読む →
-
【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法 CSSの擬似要素「::before」と「::after」で設定したcontent内のテキストを改行させる方法を紹介します。 このアイデアを知っておくとHTMLタグの数をかなり減らせますし、CSSコーディングの自由度も増します。 ポイントは2… 【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】スタイルシートだけで画像をモノクロにする方法 画像にマウスカーソルを合わせた際にモノクロとフルカラーを切り替えたいとき。 以前はモノクロとフルカラーの2種類の画像を用意しておく必要がありましたが、最新のCSS3では1つの画像だけで、スタイルシートに簡単なコードを記述するだけで事足ります… 【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]の使い方続きを読む →
-
【CSS3】jQuery無しで動く[Pure CSS Modal Popup]の実装方法 通常「モーダル・ポップアップ」はjQueryを利用して実装するケースが多いかと思いますが、今回紹介する[Pure CSS Modal Popup]は、その名のとおりスタイルシートの設定だけで実装できる便利なテクニックです。 まずは下記URL… 【CSS3】jQuery無しで動く[Pure CSS Modal Popup]の実装方法続きを読む →
-
【CSS】ブラウザの限界を突破した極小サイズの文字を表示させてみた。 ウェブサイトのフォントサイズはどこまで小さくできるのか? 今日は、そんな素朴な疑問に挑戦します。 スタイルシートで指定できるフォントサイズの限界 通常、CSSではフォントサイズを指定する際に font-size:12px; などと記述します… 【CSS】ブラウザの限界を突破した極小サイズの文字を表示させてみた。続きを読む →
-
【CSS3】要素を横並びに配置する[display:table;]と[display:table-cell]の使い方。 複数の要素を横並びで表示させたい場合、これまでは display:inline; か float を使うか、あるいは <table> 要素で組むか、そのいずれかの方法を利用するのが一般的でした。 それが CSS3 からは dis… 【CSS3】要素を横並びに配置する[display:table;]と[display:table-cell]の使い方。続きを読む →
-
【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。 これ、いつから使えるようになっていたのでしょうか? 今さらなのかもしれませんが Google Web Fonts で日本語フォントの[Noto Sans Japanese]が利用できるようになっていたので、その導入方法を紹介します。 「No… 【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。続きを読む →
-
【社内用】新しい「スタイルシート・リセット」のカタチ『ONZE Reset CSS』の設定。 今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート[ONZE Reset CSS]を紹介していきます。 「スタイルシート・リセット」とは? 各ブラウザ… 【社内用】新しい「スタイルシート・リセット」のカタチ『ONZE Reset CSS』の設定。続きを読む →
-
【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。 今日はオンズのオリジナルのスタイルシート[DarkForce.css]を紹介します。 まるでスターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。 まずはサンプルをご覧ください。 O… 【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。続きを読む →
-
【CSS】スタイルシートの基本:セレクタを一覧にしてまとめました。 CSS2 セレクタ 一覧 セレクタ名 パターン 簡単な説明 ユニバーサルセレクタ * 全ての要素に適用 タイプセレクタ E E要素に適用 子孫セレクタ E F E要素の子孫にあたるF要素に適用 クラスセレクタ E.warning warni… 【CSS】スタイルシートの基本:セレクタを一覧にしてまとめました。続きを読む →
-
【CSS3】ローディング中のテキストをアニメーションで表示する[Animated Type Loader]の実装方法。 テキストベースで、ローディング中のアニメーションを表示する[Animated Type Loader]の実装方法を紹介します。 まずはサンプルをご覧ください。 CSS3 Animated Type Loader:サンプル・デモ JavaSc… 【CSS3】ローディング中のテキストをアニメーションで表示する[Animated Type Loader]の実装方法。続きを読む →
-
【WordPress】公式アイコンフォント[Dashicons]の使い方。 通常は管理画面でのみ使われていますが、種類も豊富でデザインも秀逸なので、テーマファイルに組み込んでデザインの一部として活用しましょう。 まずは Dashicons を利用可能な状態に準備する。 [Dashicons]を使うためには、前提とし… 【WordPress】公式アイコンフォント[Dashicons]の使い方。続きを読む →
-
【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。 今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。 巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブ… 【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。続きを読む →
-
【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説… 【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。続きを読む →
-
HTML5の独自データ属性にCSSを効かせる方法。 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一… HTML5の独自データ属性にCSSを効かせる方法。続きを読む →