モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
配列の要素挿入、置き換えもsplice()で。Vue.jsでも大丈夫。（配列とかおれおれAdvent Calendar2018 – 07日目） | Ginpen.com
const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 0, value); console.log(arr); // => [ 11, 99, 22, 33 ] const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 1, value); console.log(arr); // =>[ 11, 99, 33 ] 第2引数を 0 にするとただ挿入するだけ、 1 だと置き換えます。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
無料で使い捨てメールアドレスをワンクリックでゲットでき無数のアドレス追加や独自ドメインにも対応する「myTemp.email」
アカウント作成時にメールアドレスでの認証が求められる場合は多いモノですが、サービス利用者にメールアドレスを収集されるのがイヤな場合など、一定時間だけ有効な「使い捨てメールアドレス(捨てアドレス)」は非常に便利です。そんな捨てメールを、たったワンクリックで取得でき、メールエイリアスの追加も自由自在で、自分の取得済みドメイン名での捨てアドレスの作成もでき、もちろんスマートフォンにも完全対応という強力なサービスが「myTemp.email」です。 myTemp.email - Temporary Disposable Email https://mytemp.email/ 24時間使える捨てアドレスをサクッとゲットするには上記サイトの「Create My Email」をクリックするだけ。 メールボックス画面が現れ、左上に捨てアドレスが表示されました。myTemp.emailで作成されるメールアド
任意のエレメントに、サイズに応じてclassの追加/削除をするスクリプト・Responsive elements
任意のエレメントに、画面サイズに合わせて特定のclassの追加/削除を行うスクリプト・Responsive elementsのご紹介です。特定の画面サイズになるとclassが付与されるので、そのclassを使ってCSSを書きます。 前も似たようなものがあった気がしますけど・・こちらも軽量で良さそうです。classを与える事で、RWDの対応もしやすくなりそうです。尚、スクリプトはjQuery依存です。 特定のサイズで指定した要素にclassを追加してくれます。シンプルで良さそうですね。 セッティングは要素ごとにカスタムデータ属性を利用します。 <div class="foo" data-respond="start: 100px; end: 900px; interval: 50px;">これで、画面サイズにあわせてclassが付与されます。 詳細は以下よりどうぞ。 Responsive e
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
いま改めてWordPressとOGPについて考える
「WordPress Advent Calendar 2011」も半分を折り返してしまいました。 ということは、今年は残り半月も無いわけですね、恐ろしいですね; どうも、@anticyborg さんからバトンをうけました @kamiyam です。 WordPressについて WordPressはその多機能さもさることながら、やはり大きな特徴は非常に活発なコミュニティーの存在ではないでしょうか。 また、最近では Twitter、FacebookなどのSNSを始めとしたソーシャルグラフが非常に有用で、そのつながりから沢山の情報を得ることが多くなってきました。 そこで OGPを正しく設定して情報を有効に伝えましょう。というのが今回のお話です。 Open Graph Protocol OGP ( Open Graph Protocol )は 指定したURLコンテンツの内容をあらわす情報とその仕組み
WordPressをFacebookのOGPに対応させる
前回のソーシャルボタンを追加しようと思ったときに 当然その方法を探すために、ググっていろいろなサイトを見たわけですが、 その中に「いいね！ボタンを付けるなら、OGP対策をしないと意味ないよ」的な情報を見ました。 OGPって何？ The Open Graph protocol フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 つまり、いいね！やシェアしたときに、いい感じにしてくれるらしい。（よく分かってない） まずは、OGP対策前に試しにいいね！ボタンをクリックしてみました。 Facebookのウォールには以下のように表示されました。（1ヶ月くらい前の画像で申し訳ない） アイキャッチ画像が何故か「はてブ」のアイコンになってるし、 記事の概要ではなく、サイトの説明（WordPressでいうところのキャッチフレーズ）だし、
WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた。
INSPIRE TECH > その他 > WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた。 WordPressで非常に簡単にOGPが実装できることで有名な、WP-OGPプラグインというものがあります。 WordPress › WP-OGP « WordPress Plugins 自分もFacebookのいいね！ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。 ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり（変更するにはプラグインに含まれるファイルを差し替える必要がある）、Facebook用のOGPタグであるfb:a
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」:phpspot開発日誌
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 2011年10月27日- Asketic Swipe Gallery | jQuery Plugins PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 この手のものはスマホ限定だったりするのですがPCでもドラッグ＆ドロップのようにしてスワイプさせて画像を送ることができるようになっています。 両方に対応させる場合に個別に対応するよりも一緒に作ってしまいたいという場合に使えますね デモページはこちら 今後はもっとこうしたクロス環境でも似たように動作する物が出てくるかもしれませんね。 数年後にはスマホがPCを追い抜くという予測もあるぐらいなので、スマホありきでPCもとりあえず対応なんていう流れになっ
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」:phpspot開発日誌
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 2011年10月17日- Infinite Rounded Scrolling Tabs | jQuery Plugins タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 次のような角丸デザインで、幅が足りない場合はスクロールボタンが表示されるタブUIが作れます こういうのは過去にあんまりなかったかも。デザインとかはCSSで調整できますね スクロール部分は自分でやろうとするとめんどくさそうなのですが、これは参考にできそうです 関連エントリ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」 jQueryベースのタブUI１５種まとめ textareaやin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
