株式会社オンズのブログ記事一覧

【CSS】filterプロパティを使ってPNG画像を白黒反転する方法 CSSのfilterプロパティを使用すると、JavaScriptや画像編集ソフトを使わずに、画像の色を反転させることができます。 これを活用すれば、たとえばボタンやリンクのホバー時に画像を切り替える手間を省き、より効率的にデザイン＆コーディ... 【CSS】filterプロパティを使ってPNG画像を白黒反転する方法続きを読む →

【CSS】あなたの「object-fit」が効かない原因 object-fitが効かない場合、以下の原因が考えられます。 「object-fit」を img に対して効かせていない <img>に「width」「height」の指定がない 親要素の問題 Internet Explorer... 【CSS】あなたの「object-fit」が効かない原因続きを読む →

【CSS】JavaScriptを使わずにウィンドウの横幅と高さを取得する方法 JavaScriptを使わずにCSSだけでウィンドウの幅と高さをピクセル値として取得する方法を紹介します。 このテクニックはCSSの新しい仕様「@property」と三角関数を活用し、動的にウィンドウサイズを計算し、CSS変数として保持しま... 【CSS】JavaScriptを使わずにウィンドウの横幅と高さを取得する方法続きを読む →

【CSS】CSSアニメーションをGPUで快適に処理する方法 アニメーションを多用した魅力的なウェブサイトでは、CSSアニメーションが頻繁に使われます。 しかし正しく実装しないとパフォーマンスの低下を招くことも。 アニメーションが「カクカク」する場合、たいていGPUでなくCPUで処理されていて、リペイ... 【CSS】CSSアニメーションをGPUで快適に処理する方法続きを読む →

【CSS】スマホでリンクをタップしたときのハイライトを消す方法 スマートフォンでリンクやボタンをタップした際に、リンクエリアがハイライト（iOS Safari だとグレー / Android for Chrome だとオレンジ）で表示されることがあります。 このハイライト表示が不要なとき、CSSで無効化... 【CSS】スマホでリンクをタップしたときのハイライトを消す方法続きを読む →

【CSS】「-webkit-overflow-scrolling」は削除してOK かつて、-webkit-overflow-scrolling: touch はiOSデバイスのSafariで、なめらかなスクロールを実現するために使われていました。 現在の状況 特にiOSのSafariなどWebKitエンジンを使用している... 【CSS】「-webkit-overflow-scrolling」は削除してOK続きを読む →

デジハリ受講生が陥ったエラー全リスト［コーディング編］ 私が講師を勤める『デジタルハリウッドSTUDIOつくば』にて。 実際に、デジハリ受講生が遭遇したエラーの数々を以下にリストアップします。 HTML編 HTMLタグの中の得体の知れない半角スペース、全角スペース、タブ、改行 単純なスペルミス（... デジハリ受講生が陥ったエラー全リスト［コーディング編］続きを読む →

【CSS】文字の折り返し指定問題は「overflow-wrap:anywhere;」で解決 ウェブサイトのテキストの折り返し（改行）をどのように指定するか。なかなか悩ましい問題です。 これまでCSSで文字の折り返しを設定するには、様々なプロパティを組み合わせて使用する必要がありましたが、最近のCSSの進化により overflow-... 【CSS】文字の折り返し指定問題は「overflow-wrap:anywhere;」で解決続きを読む →

【CSS】JavaScript無しでスムーススクロールを実装できる［scroll-behavior］を紹介します ページ内リンクでスムーススクロールを実装する際、たいていはJavaScriptやjQueryを用いる方法を検討するでしょう。 しかしCSSの新機能scroll-behaviorプロパティを使えば、簡単にスムーススクロールを実現できます。 「... 【CSS】JavaScript無しでスムーススクロールを実装できる［scroll-behavior］を紹介します続きを読む →

【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が効かないときの対処方法続きを読む →

【CSS】竈門炭治郎の市松模様バックグラウンド 鬼滅の刃の影響で、和柄のデザインが幅広い世代（一部の界隈？）で人気のようです。 中でも、主人公「竈門炭治郎かまどたんじろう」が着用する羽織の市松模様は特に有名で、そのデザインは視覚的にもインパクト大です。 この市松模様は古くからある伝統的な... 【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だけでクリッピングできるのか？続きを読む →