【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。 先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです... 【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。続きを読む →
【CSS】重なり順（z-index）の値が下の要素をクリックする方法 ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックさせたいボタンなどの要素が背面になってしまうケースがあります。 このままだとボタンがクリックできずに困るので、なんとかして前面の要素を無視して背面にあるボタンをクリックできるようにしたい。 この問題、「Ja... 【CSS】重なり順（z-index）の値が下の要素をクリックする方法続きを読む →- 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法 スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。 まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https://on-ze.com/demo/css3-background-stripe... 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法続きを読む →
お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装 いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の１つになっています。 今日ご紹介する［Instagram.css］は、ウェブサイトで使用している画像にインスタグラムと同じようなフィルターを施せる便利なCSSのライブラリー。 お手軽にインスタグラ... お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装続きを読む →- 【CSS】ボックス要素をCSSだけでクリッピングできるのか？ Ｑ 質問：ボックス要素をCSSだけでクリッピングできるのか？ Ａ 回答：できます！ ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング（切り抜き表示）する方法を紹介します。 使用するのは「clip-path」プロパティ。 実はCSS2でも使えましたが、最新のCSS3ではかなり便利な使い方ができるよう... 【CSS】ボックス要素をCSSだけでクリッピングできるのか？続きを読む →
【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。 さてさて。タイトルのとおり、そのまんまです。 まずはデモをご覧ください。 DEMO : https://on-ze.com/demo/css-bg-transparent/ 背景全面を覆うと目がチカチカしてしまいますが、特定の職業の方には透明に見えるはずです。 実装方法は以下のとおり。 .bg-transparent ... 【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。続きを読む →- 【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。 ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。 標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … ゆっくり始まる ease-out … ゆっくり終わる ease-in-out... 【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。続きを読む →
- 【CSS】レスポンシブに対応して要素の比率を保持する方法 任意のボックス要素の縦横のアスペクト比率を保持したまま、レスポンシブにも対応する方法を紹介します。 HTML 早速ですが、まずはHTMLの記述から。 <div class="aspect"></div> 何の変哲もない普通のボックス要素を用意します。 CSS 続いて重要なCSSの書き方ですが、仮... 【CSS】レスポンシブに対応して要素の比率を保持する方法続きを読む →
- 【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法 CSSの「keyframes」のアニメーションを一時停止する方法を紹介します。 ここで利用するのは「animation-play-state」プロパティ。 指定できる値は running と paused の2つで、running のほうは初期値なので省略が可能。 running を指定するとアニメーションが実行され、... 【CSS】オンマウスでkeyframesのアニメーションを一時停止する方法続きを読む →
- 【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装 テーブル要素の任意の行にマウスカーソルを合わせたとき、他の行がボカされて、フォーカスした部分が目立つように切り替わるCSSのテクニックを紹介します。 サンプルは下記のURLより。 SAMPLE : https://on-ze.com/demo/css-table-blur/ HTML まずはhtmlの記述ですが、こちら... 【CSS】任意の行にフォーカスしたら他の行をボカして表示させるtable要素の実装続きを読む →
- 【CSS】placeholderの色を変更する方法 inputタグやtextareaタグで使う「placeholder」属性にCSSを効かせる方法を紹介します。 テストHTMLは以下。 <input class="sample" type="text" placeholder="サンプルテキスト"> 試しに、この要素の placeholder 属性の色を変え... 【CSS】placeholderの色を変更する方法続きを読む →
- 【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！ 画像を使わずに、スタイルシートだけで実装するローディングのアニメーションを考えてみました。 まずはサンプルをご覧ください。 サンプル：https://on-ze.com/demo/css3-loading/ クルクル回るローディングのアニメーションは、多くの場合GIF画像を使って実装しますが、上のリンク先で紹介している... 【CSS】クルクル回るローディング中のイメージをスタイルシートだけで実装！続きを読む →
- 【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法 CSSの擬似要素「::before」と「::after」のcontent内で改行させる方法を紹介します。 ポイントは疑似要素にwhite-space:pre;を追加すること。 そしてcontent内の改行させたい箇所に\Aを挿入します。 具体的には次のようなコードになります。 HTML <div class="s... 【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法続きを読む →
- 【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。 だいぶ以前に「border要素にグラデーションを施す方法」という記事を公開しましたが、それとほぼ同じテクニックで、「border:dashed;」や「border:dotted;」をグラデーション処理させる方法を考えてみました。 理論としては、親要素に「position:relative;」を指定して、疑似要素:bef... 【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。続きを読む →
- 【CSS3】ネコ好き垂涎のスタイルシートのテクニック『Cat Swinging on String』が面白い！ 画像は使用せず、HTMLとCSSのみで実装されたスタイルシートのテクニック『Cat Swinging on String』が面白かったのでコチラでも紹介します。 さすがにココまで複雑なアニメーションを実装するとなると、HTMLもCSSも長文になってしまいます。 しかし技術を覚えるには良いサンプルだと思います。 具体的な... 【CSS3】ネコ好き垂涎のスタイルシートのテクニック『Cat Swinging on String』が面白い！続きを読む →
- 【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。 最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。 今日はこの『慣性スクロール付きカルーセル』を JavaScript 無しで実装する方法を紹介します。 HTML ここでは仮に、下記のようなHTMLを用... 【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック続きを読む →