Firefoxのみ、IEのみなど特定のブラウザにだけCSSを反映させるCSSハック。 - 僕トク的なアレ
CSSハックです。 なるべくならこういう行為はしないような実装をしなければならないのですが、今回どうしても上手くいかないので仕方なく。 メモがわりに置いておきます。 ややこしい指定は一切なしで単純にベンダープレフィックスを使用します。 Chorome @media screen and (-webkit-min-device-pixel-ratio:0) { hoge/*指定のclassやid*/ { margin-top: 0; } } Firefox @-moz-document url-prefix() { hoge/*指定のclassやid*/ { margin-top: 0; } } ||> ** Safari >|CSS| @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, hoge/
CSSブレンドモードで画像を彩ろう
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
CSSのブレンドモードを使った3Dのような表現 | UNORTHODOX WORKBOOK | Blog
使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。 イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数設定した背景画像どうしでもブレンドできるとのことで、知識として入れておきたくて、ブレンドモードを使った表現を色々と試してみました。 スマートフォン等の小さい画面ですと見切れてしまうので、大きな画面でご覧ください。対応しているブラウザも限定されますので、最新版のモダンブラウザでご覧ください。ただし、IEは最新の11も含め不可。未確認ですがMicrosoft Edgeではいけるようです。 「3Dのような表現」というのは少し大げさですが、それっぽい感じには見えますよね。上記は、色の違う3種類の画像を微妙にずらし、background-blend-modeのmultiply効果を与
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
Google Language Translatorを使ってプチ多言語サイトを作ってみた
Googleアナリティクスを見てみると、私のサイトは海外からのアクセスも結構あります。 何らかのワードでGoogle検索して、このサイトにたどり着いてもらっていると思いますが、きっと日本語がわからずに困っていると推測されます。 そこで、Google Language Translatorを使ってプチ多言語サイトを作ってみました。 Google Language Translatorプラグインとは Google Language TranslatorプラグインはGoogle翻訳を使って、オンデマーンドにサイトを翻訳してくれるプラグインです。 ドロップダウンリストで「英語」とか「フランス語」とかを選択すると、自動的に選択された言語に切り替わります。 サイトが瞬時に各言語に切り替わる様子を見るとまるで魔法のようです。 以下は、英語を選んで表示したところです。 使い方は、右上のTranslateで
Google Language Translator: 自動翻訳ツールのWordPressプラグイン
Google Language Translatorは、Google翻訳の自動翻訳ツールをあなたのブログに簡単に組み込めるWordPressプラグインです。 このプラグインを利用すると、ブログの閲覧者がGoogle翻訳ツールを利用して、ブログを様々な国の言語に翻訳できます。ブログの機能として翻訳ツールを組み込めるので便利です。 もし、あなたのブログに外国からの訪問者のアクセスが多い場合、翻訳ツールをブログの目立つ位置に配置しておくと、各国の言語に対応できるので、外国からの訪問者が増えやすくなるかもしれません。 活用例として、「外国人向けに情報発信するブログ、外国人と取引が多い企業のオウンドメディア」などのに設置しておくと役に立ちます。 記事執筆時点（2023.04.19）では「Google Language Translator」と「Site Kit by Google」のプラグインを一緒
Googleウェブサイト翻訳ツールの設置方法【新規インストールは終了】
コードを埋め込むだけで簡単にホームページやブログを外国語対応にできる「Googleウェブサイト翻訳ツール」の設置方法をご紹介します。 ※ Googleウェブサイト翻訳ツールのサービス提供が終了して、現在新規のインストールはできなくなりました。既存の設置済みサイトは引き続き利用可能です。 以下の記事内容はGoogleウェブサイト翻訳ツールのインストール方法を説明するもので、現在は利用できません。Google翻訳自体は問題なく使えます。 Google翻訳は外国語のウェブサイトやテキストを、日本語に変換して表示してくれる便利なウェブサービスです。その翻訳機能がサイト埋め込み用のツールとして提供されています。 Googleウェブサイト翻訳ツールのコードを埋め込むだけで、簡単に外国語対応のウェブサイトやブログが作成できますよ。しかもツール使用料は無料です。 翻訳はクラウドで行うので、ほったらかしでも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5から意味の変わる要素 <b>、<i>、<em>、<strong>、<small>、<hr>－HTML5リファレンス
WordPressのサイドバーにサイト内検索フィールド(ボックス)を設置する方法(標準) -
showjin.me