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

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

【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方 Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じて... 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方続きを読む →

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

超快適 YouTube のショートカットキーを網羅 みんな大好きYouTube動画。 今日はYouTubeの動画を再生する際に便利なショートカットキーを紹介します。 基本のショートカットキー フルスクリーン ON/OFF F シアターモード ON/OFF T ミニプレーヤー ON/OFF I... 超快適 YouTube のショートカットキーを網羅続きを読む →

【jQuery】スライドと画像ズームの機能を兼ね備えた［Zoom SlideShow］の使い方 今日ご紹介する［Zoom SlideShow］は、スライドショーとズーム機能を兼ね備えた、ちょっと特殊な動きをするjQueryプラグインです。 公式のデモサイトは以下。 Zoom SlideShow : https://zoom-slide... 【jQuery】スライドと画像ズームの機能を兼ね備えた［Zoom SlideShow］の使い方続きを読む →

【iPhone】メール本文に挿入される「iPhoneから送信」を表示させない方法 iPhoneの標準のメールアプリでメールを送信するとき、メール本文の末尾に「iPhoneから送信」というテキストが自動で挿入される仕様になっています。 もしかすると毎回手動で削除してませんか？ 今日は、この「iPhoneから送信」をあらかじ... 【iPhone】メール本文に挿入される「iPhoneから送信」を表示させない方法続きを読む →

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

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

【WordPress】タグクラウドの最大表示数を変更する方法 WordPressのウィジェットの機能でタグクラウドを表示する際、デフォルトでは最大45個までしか表示されない仕様になっています。 この最大表示数を変更したい場合、次の方法でカスタマイズが可能です。 いま使っているテーマファイルの「func... 【WordPress】タグクラウドの最大表示数を変更する方法続きを読む →

【SEO】多言語サイトでは「hreflang」タグの設定を忘れずに。 多言語サイトを構築するときに極めて重要なタグが「hreflang」です。 例えば日本語と英語の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に、日本語が表示されてしまうと内容を読めずに離脱してしまうケースがあ... 【SEO】多言語サイトでは「hreflang」タグの設定を忘れずに。続きを読む →

Apple製品のモデル名にある「Early」「Mid」「Late」の発売時期は？ Apple製品の型番に見られる、発売時期を表す「Early」「Mid」「Late」がそれぞれ、どの時期を意味するのかを紹介します。 Macの型番が知りたいと思った場合は画面左上の「」から、「このMacについて」をクリックすると、「概要」欄... Apple製品のモデル名にある「Early」「Mid」「Late」の発売時期は？続きを読む →

【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を効かせて色を変更する方法を紹介します。 使用するのはCSSの疑似クラス『::placeholder』です。 例を... 【CSS】placeholderの色を変更する方法続きを読む →

【WordPress】プラグイン［Contact Form 7］で記事のタイトルとURLを自動で取得したかった。 先日WordPressで構築したサイトで、複数ページにまたがって問い合わせフォーム［Contact Form 7］を設置し、その際に該当ページのURLやタイトルも同時に取得する、という案件に取り組みました。 あまり知られていないようですが［... 【WordPress】プラグイン［Contact Form 7］で記事のタイトルとURLを自動で取得したかった。続きを読む →

HTTPステータスコード一覧 「HTTPステータスコード」とは3桁の番号で、サーバーからのレスポンスの内容を示します。 ここではサーバーがブラウザに返してくるHTTPステータスコードを一覧にしてまとめました。 100番台：Informational - 情報レスポンス ... HTTPステータスコード一覧続きを読む →

【WordPress】不要な標準ウィジェットを無効化する方法 先日WordPressの新バージョン4.9.1が公開されました。 重要なセキュリティ関係のアップグレードが含まれていますので、バージョン4.9.0未満をご利用の方はなるべくお早めにアップデートしておきましょう。 さて。 WordPress（... 【WordPress】不要な標準ウィジェットを無効化する方法続きを読む →

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

【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法 CSSの擬似要素「::before」と「::after」で設定したcontent内のテキストを改行させる方法を紹介します。 このアイデアを知っておくとHTMLタグの数をかなり減らせますし、CSSコーディングの自由度も増します。 ポイントは2... 【CSS】疑似要素「::before」と「::after」のcontent内で改行させる方法続きを読む →

【WordPress】カテゴリの順番を変更できる［Category Order and Taxonomy Terms Order］プラグインを紹介します。 WordPressのカテゴリーやタグの順番を並び替えできるプラグイン［Category Order and Taxonomy Terms Order］を紹介します。 通常は記事のカテゴリーとタグの並び順は「名前」の昇順（ASC）になります。... 【WordPress】カテゴリの順番を変更できる［Category Order and Taxonomy Terms Order］プラグインを紹介します。続きを読む →

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

【Font】アニメやマンガのロゴに最適なフリーフォント［アンニャントロマン］が面白い！ アニメやマンガのロゴに最適な［アンニャントロマン］というフリーフォントを見つけてきました。 公式サイトでの説明は以下のとおり。 フリーフォント「アンニャントロマン」はロゴでの利用を想定した、全角ひらがな・カタカナ・アルファベットのフォントで... 【Font】アニメやマンガのロゴに最適なフリーフォント［アンニャントロマン］が面白い！続きを読む →

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

Android端末で明朝体フォントを表示させたい！ 普段のウェブサイト制作ではゴシック体を使うことが多く、この問題に気づくのが遅れました。 タイトルのとおり、明朝体フォントがAndroid端末では表示されません。 以下、解決策を調べたので個人的な備忘録を兼ねて紹介していきます。 検証 まずは... Android端末で明朝体フォントを表示させたい！続きを読む →