autoprefixer@9.8.6 を使ってつまづいた部分をメモっておきます。 1. grid-template-rows を明示的に指定する // NG .container { display: grid; grid-template-columns: 1fr 1fr; } // OK .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }2. grid-template-rows と grid-template-columns は同じブロック内で宣言する// NG .container { ... @media screen and (max-width: 840px) { grid-template-columns: 1fr; } } // OK .contai

はじめに 2020 年 7 月現在、私のシェア率は国内でだいたい10% 弱です。 どうか、私への対応を諦める前にそのことを覚えておいて欲しいのです。 - Internet Explorer 11 WebブラウザシェアランキングTOP10(日本国内・世界) CSS Grid を IE11 で使用する上での注意点を確認していきます。 ※ Gulp および Autoprefixer を使用した IE11 対応を前提とします。また環境構築の手法については本記事では触れないものとします。 CSS Grid が私に何を求めているのか、私がそれを理解できるように記述してほしいのです 私はモダンなプロパティをベンダープレフィックス無しで理解することができません。 CSS Grid も例外ではないため、私の友人である Autoprefixer を介してそれを理解できるように変換して欲しいのです ひとつひとつ

CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】 object-fitってすごい便利なCSSなんですけどIEでは効かないんですよね... この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。 Sassを使用してる方向けにもmixin化したものも紹介します。 CSSだけではobject-fitをIEに対応させることは出来ないので、JavaScriptのobject-fit-imagesを使用します。 インストール方法 スクリプトタグとNPMの2種類を紹介します。 各自環境に合った方法をご選択ください。 スクリプトタグ 以下よりダウンロードしてください https://github.com/fregante/object-fit-images C

function is_IE() { $ua = mb_strtolower( $_SERVER['HTTP_USER_AGENT'] ); //すべて小文字にしてユーザーエージェントを取得 if ( strpos( $ua,'msie' ) !== false || strpos( $ua, 'trident' ) !== false ) { return true; } return false; } <?php if ( is_IE() ) : ?> <div class="ie_alert"> <span>Internet Explorer、ダメ絶対！</span> <p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br> 言ってしまえば、百害あって一利なしの老害です。<br> 世界中で、多くのWEB制作者があなたの

Home ブログ CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】※2021年 aspect-ratioプロパティ追記 今回は、CSSでサムネイル画像を描画する方法を、自分用のメモも兼ねていくつか紹介します。 段階を追って、divなどのブロック要素で縦横比率を守ったボックスを作る方法と imgタグを使用した場合、ieに対応した場合、background-imgを使用した場合に、それぞれ内接リサイズ・外接リサイズで表示する方法をまとめました。 内接リサイズ:画像全体が枠内に収まるようにリサイズする。画像の長辺に合わせた方法。 外接リサイズ:枠からはみ出す部分はカットする。画像の短辺を枠に合わせた方法。 ①divの縦横比を固定してレスポンシブにする方法 サムネイルではレスポンシブ対応するために、CSSだけでアスペクト比を固定したい、という場合が多いと思います。

この記事では、JavaScript モーダルウィンドウライブラリ、Micromodal.js を紹介します。 Micromodal.js は以下の特徴を持っています。 軽量である（1.9 KB！） WAI-ARIA ガイドライン に則ったアクセシビリティ対応 ライブラリに依存しない Pure JavaScript で書かれている スタイルが自由（デフォルトの装飾が適用されていない） CSS が付属されていないのがサイトのテイストに合わせやすくて逆に嬉しいです。jQuery 製のライブラリは結構個性的な装飾ついちゃってること多い気がするので。Pure JavaScript なので Vue や React とも相性が良さそうです。 というわけで、ここから使いかたを紹介していきます。 Micromodal.js の使いかた インストール まずはインストール方法です。npm リポジトリおよび CD

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

JavaScript で IE かどうかを判別する IE 判別関数 (isIe) navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { var ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript（jQuery）で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています