ONZE/BLOGオンズ開発ブログ

【CSS】レスポンシブ対応の複数カラムの料金表を実装する方法 レスポンシブ対応の複数カラムの料金表を作ります。 今回のキモとなるのはCSSのcolumn-countとcolumn-gapプロパティ。 比較的新しいCSSの仕様ですが、これを利用することで料金表など複数カラムのデザインの実装がラクになりま… 【CSS】レスポンシブ対応の複数カラムの料金表を実装する方法続きを読む →

【CSS】table-cellを［position:sticky;］で固定したときのボーダーが消える現象を解決する方法 HTMLのtableタグ、およびCSSのdisplay:table;を使ったレイアウト実装時に、テーブルのセルを［position:sticky;］で固定すると、そのセルのボーダーが消えてしまう現象の解決方法を紹介します。 まずはエラーが発… 【CSS】table-cellを［position:sticky;］で固定したときのボーダーが消える現象を解決する方法続きを読む →

【CSS】アルファベットの大文字／小文字表記をコントロールする方法 「text-transform」プロパティについて CSSの「text-transform」は、アルファベットの文字列を大文字にするか小文字にするか、その表示方法を指定するプロパティです。 「テキスト・トランスフォーム」と読みます。 「te… 【CSS】アルファベットの大文字／小文字表記をコントロールする方法続きを読む →

【CSS3】スタイルシートで指定できるカラーネーム×147色一覧（+1色） ウェブサイト制作時の色の指定について。 よく使う16進数表記と共に、現在モダンブラウザで使用できるカラーネームをすべてリストアップして紹介します。 「CSS Level 3」では147のカラーネームが策定されています。しかし、中には同じ色を… 【CSS3】スタイルシートで指定できるカラーネーム×147色一覧（+1色）続きを読む →

意図していない横スクロールの原因を一瞬で特定する方法 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹… 意図していない横スクロールの原因を一瞬で特定する方法続きを読む →

JavaScriptが無効になっているとき限定のCSSを適用する方法 何らかの理由でJavaScriptが無効化されている環境でウェブページを表示させるとき、JavaScriptが無効になっているとき限定のCSSを読み込む方法を紹介します。 JavaScriptを利用する方法 先に仕組みをすると、あらかじめH… JavaScriptが無効になっているとき限定のCSSを適用する方法続きを読む →

【CSS】テキストを透明にする4つの方法 文字の色を透明にして見えなくする方法を4つ紹介します。 opacityを使う いちばん簡単で、最初に思いつくのは「opacity:0;」を指定する方法です。 .sample { opacity:0; } opacityの値は0〜1の間で指定… 【CSS】テキストを透明にする4つの方法続きを読む →

初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします 「ウェブサイトのアニメーションの基礎を網羅している書籍がほしい」 そんな想いを抱く初心者ウェブクリエイターの方々に超絶オススメの書籍があります。 『動くWebデザインアイディア帳』です。 久保田涼子さんと杉山彰啓さんによる共著。 とある場所… 初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします続きを読む →

【CSS】「::before」と「::after」疑似要素にCSSが効かないときの対処方法 CSSの「::before疑似要素」、「::after擬似要素」は様々な場面で使える便利な機能です。 しかしながら、スタイルシートを記述している途中で「疑似要素が思ったように反映されない！」という状況にもしばしば遭遇すると思います。 今日は… 【CSS】「::before」と「::after」疑似要素にCSSが効かないときの対処方法続きを読む →

【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。 先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。 以前、本ブログで「CSS3 … 【jQuery + CSS】レスポンシブでヌルヌル動く［Expanding Column Layout］を使ってみました。続きを読む →

【CSS】重なり順（z-index）の値が下の要素をクリックする方法 ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックしたいボタンなどの要素が背面になってしまうケースがあります。 このままだとボタンがクリックできずに困るので、なんとかして前面の… 【CSS】重なり順（z-index）の値が下の要素をクリックする方法続きを読む →

【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法 スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。 まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https… 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法続きを読む →

お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装 いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の１つになっています。 今日ご紹介する［Instagram.css］は、ウェブサイトで使用している画像にインスタグラム… お手軽にインスタグラム風の写真を再現できる［Instagram.css］フィルターを実装続きを読む →

【CSS】ボックス要素をCSSだけでクリッピングできるのか？ Ｑ 質問：ボックス要素をCSSだけでクリッピングできるのか？ Ａ 回答：できます！ ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング（切り抜き表示）する方法を紹介します。 使用するのは「clip-path」プロパティ。… 【CSS】ボックス要素をCSSだけでクリッピングできるのか？続きを読む →

【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。 さてさて。タイトルのとおり、そのまんまです。 まずはデモをご覧ください。 DEMO : https://on-ze.com/demo/css-bg-transparent/ 背景全面を覆うと目がチカチカしてしまいますが、特定の職業の方には透… 【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。続きを読む →

【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。 ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。 標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … 【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。続きを読む →