現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
Web制作において悩みの種の一つが、IE11のサポートです。 main要素に垂直方向のmargin, paddingが効かない、CSS Grid、変数、@supportsなど、IE11が足かせになって使用に躊躇している人も少なくないと思います。 IE11のサポート終了までのカウントダウンが始まりました。 IE11のサポート終了までのカウントダウン IE11は、Windows10にインストールされて出荷されていたため、サポート期間もWindows10のライフサイクルと同じです。 IE11がサポートしていない機能でも、対応策はあります。IE11をサポートするから使用しない、というのはあまり理由にはならないですね。 main要素に垂直方向のmargin, paddingが効かない main要素がinline要素として扱われているため、display: block;を定義する。 CSS Gridの
Bootstrap 5のリリースがいよいよ近づいてきたようです。 Bootstrap 5では、jQueryは削除され、IE10のサポート終了が予定されており、注目すべき新機能を紹介します。 Bootstrap 5 release date and what's new about it by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5がリリースされる日 Bootstrap 5で注目の新機能 jQueryの削除 😱 IE10のサポート終了 📺 SVGのカスタムアイコン 🚀 JekyllからHugoへ切り替え 🔝 JavaScriptとCSSのアップデート はじめに Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなり
Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
GitHub Actionsのワークフローを利用してクロスブラウザのE2Eテストを自動化する - Money Forward Developers Blog
こんにちは。 『マネーフォワード クラウド経費』のフロントエンドエンジニアをしている木村(@kimromi)です。 Ruby on Railsを利用してサービス開発を進めているプロダクトのフロントエンドの環境を整えていき、UIの改善やフロントエンド側の開発効率アップなどにつなげていくような動きを現在やっています。 なぜクロスブラウザのE2Eテストが必要になったか ある日、IE11のみでJavaScriptエラーが起こり動作しないとの連絡が入り、慌てて対象のプルリクエストをリバートしたということが起こりました。 原因としてはライブラリの追加によるものでした。 現在フロントエンドの改修を行っていく中で、ライブラリの追加やビルド方式の変更などドラスティックな変更をすることが多くなってきています。 そのたびにMicrosoftからダウンロードできるVM環境を立ち上げ手元で確認するのは手間がかかり確
Bootstrap 5 alphaがついにリリースされましたね。 この新しいBootstrap 5では、jQueryが削除され、IEのサポートも終了し、実装の手順も少し変わりました。 Bootstrap 5で管理画面のダッシュボードを実装するチュートリアルを紹介します。 Tutorial: how to build a simple admin dashboard interface using Bootstrap 5 by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の準備 ユーザー設定を含むナビゲーションバーの実装 ナビゲーションアイテムを含むサイドバーの実装 タイトル、キャッチ、パンくずを含むセクションの実装 いくつかのカードを含むメインコンテンツ フッタの実装 Vol
JavaScriptの大きな特徴の1つは、「シングルスレッド」基盤の言語だという点です。スレッドが1つということは、同時に1つの作業だけを処理できるということです。しかし、実際にJavaScriptが使われる環境を考えてみると、多くの作業が同時に処理されていることが分かります。例えば、Webブラウザは、アニメーション効果を見せながら、マウスの入力を受けて処理をし、Node.js基盤のWebサーバーでは、同時に複数のHTTPリクエストを処理したりします。スレッドが1つなのに、どうしてこのようなことができるのでしょうか？質問を変えると、「JavaScriptはどのように同時実行（Concurrency）をサポートしているのでしょうか？」 このとき登場する概念が「イベントループ」です。Node.jsを導入した際、イベントループ基盤の非同期方式でNon-Blocking IOに対応して…」のような
IEでのブラウザ確認にまだ意味はあるのか？
IEでのブラウザ確認にまだ意味はあるのでしょうか？ 2020年1月14日にWindows 7のサポートが終了し、翌15日にはChromium ベースのEdgeがリリースされました。そんな2020年の現在でもInternet Explorerでのブラウザ確認はまだ必要なのか、IEの現状とEdgeの登場でどう変わるのか、デベロッパーの目線で解説した記事を紹介します。 Does Browser Testing On Internet Explorer Still Make Sense? by Harshit Paul 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Internet Explorerでの確認に、まだ意味がまだありますか？ なぜInternet Explorerは終焉を迎えたのか EdgeとInternet Explor
Bootstrap 5 alphaがついにリリース！注目すべき新機能、jQueryは削除、IEすべてのバージョンのサポート終了
先日の記事で春後半の夏前にリリースされるとお伝えした通り、Bootstrap 5のalpha版がついにリリースされました！ IEすべてのバージョンのサポート終了、jQueryの削除をはじめ、注目すべき新機能を紹介します。 Bootstrap v5 Bootstrap v5の特徴 Bootstrap v5のダウンロード・インストール Bootstrap v5のグリッドやコンポーネント Bootstrap v5の特徴 最も注目すべき点は、jQueryへの依存がなくなり、Internet Explorerのサポートも終了したことです。ちなみに、Bootstrap 4.5ではIE10/11をサポートしています（v4.5 Supported browsers）。より高速なJavaScript、より少ない依存関係となり、よりフレンドリーなツールを構築することに重点が置かれています。 また、現時点ではア
WebサイトやスマホアプリのUIでアイコンを使用する際に候補になるのが、アイコンのライブラリです。中でも無料で利用できるFont Awesome（有料版もあり）の人気が高いです。 Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します。 Bootstrap 5 icons vs Font Awesome: comparison based on design, variety and usability by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Font Awesomeのアイコン Font Awesomeアイコンの使用方法 Bootstrapのアイコン Bootstrapアイコンの使用方法 結論 はじめに
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
Microsoft Internet Explorer の未修正の脆弱性 (CVE-2020-0674) に関する注意喚起
HOME緊急情報を確認するMicrosoft Internet Explorer の未修正の脆弱性 (CVE-2020-0674) に関する注意喚起 JPCERT-AT-2020-0004 JPCERT/CC 2020-01-19(新規) 2020-02-12(更新) I. 概要2020年1月17日 (米国時間)、マイクロソフトから Microsoft Internet Explorerの脆弱性 (CVE-2020-0674) に関する情報が公開されました。脆弱性を悪用された場合、リモートからの攻撃によって任意のコードが実行される恐れがあります。マイクロソフトによると、本脆弱性の悪用を確認しているとのことです。 Microsoft ADV200001 | Microsoft Guidance on Scripting Engine Memory Corruption Vulnerabili
jQuery 4.0β版が登場。バージョン3.0から8年振りのメジャーバージョンアップへ。IE10以前のサポートは終了に
jQuery 4.0β版が登場。バージョン3.0から8年振りのメジャーバージョンアップへ。IE10以前のサポートは終了に JavaScriptライブラリ「jQuery」の次期版として開発中の「jQuery 4.0ベータ版」が公開されました。 今年中にjQuery 4.0正式版がリリースされれば、2016年6月にリリースされたjQuery 3.0以来8年振りのバージョンアップとなります。ちなみにjQuery 1.0がリリースされたのは2006年ですので、jQueryの開発は18年にわたり継続されています。 IE 10以前のサポートが終了、Trusted Typesのサポート追加など jQuery 4.0ではInternete Explorer 10もしくはそれ以前のバージョンのサポートが終了します。Internet Explorer 11のサポートは継続されますが、次のjQuery 5.0で
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
デスクトップからの画像ファイルはもちろん、PCのカメラで今撮影した写真のアップロード、写真サイトからのアップロード、Twitter、Instagramからのアップロードにも対応したJavaScriptの画像アップローダーを紹介します。 Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます。 Uppload Uppload -GitHub Upploadの特徴 Upploadのデモ Upploadの使い方 Upploadの特徴 Upploadはカスタマイズにも対応した、JavaScriptの画像アップローダーです。 写真画像をドラッグアンドドロップでアップロード。 PCのカメラで撮影した写真画像をアップロード。 写真画像をサイト（Unsplash、Pexels、Pyramidなど）から検索してアップロード。 写真画像をWebサービス（Twitte
先日、Bootstrap 5のリリースについて紹介しましたが、IE10のサポート終了だけでなく、IE11のサポートも終了することに決まったようです。サポートが終了する経緯と今後の影響、IE10とIE11の使用状況、Bootstrap 5をIE 11に対応させる方法を紹介します。 Credits to Undraw サポートが終了される経緯と今後の影響について詳しく説明する前に、IE10とIE11の使用状況を確認しておくことが重要だと考えています。 IE10とIE11の使用状況 W3counterによるIEのシェアを見ると、IE10の使用は2017年から1％を大幅に下回っています。 さらに重要なのは、IE11は2015年の9%から2017年には2-3%に低下しましたが、2018年以降はこの範囲内で安定していることです。 Microsoftは公式にEdgeをプライマリブラウザとして使用すること
ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider
ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。
いまさらjQuery？ ここの人たちは見たくもない現実かもしれませんが、世界の9割はjQueryでできていいます。 ということで世界70億人が待望していたjQyery4のベータバージョンが2024/02/06に公開されたので以下で紹介します。 ちなみにjQuery1が2006/08/26、2が2013/04/18、3が2016/06/09のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。 しかし開発が止まっていたとかというとそういうわけもはなく、流石に2010年代前半ごろの更新ラッシュは落ち着いてきたとはいえ、着実にメジャーバージョンが3のまま3.7.1まで更新され続けています。 jQuery 4.0.0 BETA! jQuery 4.0.0の開発を長いこと続けてきましたが、ついにベータ版リリースの準備が整いました。 やらなければならないことはたくさんあり、開発チームは
17 ways to implement vertical alignment with CSS - LogRocket Blog
Editor’s note: This post was last updated by Emmanuel Odioko on 29 April 2024 to include methods such as using line-height and align-content for vertical alignment, and to address the accessibility implications of these techniques. Back in the good old days, the limits of CSS made even “simple” things like vertical centering a challenge, with some developers even relying on JavaScript solutions. I
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
JSer.info #446 - シングルページアプリケーション向けのJavaScriptフレームワークであるMithril 2がリリースされました。 Release v2.0.1 · MithrilJS/mithril.js 破壊的変更としてm.redraw()がデフォルトで非同期となり、代わりにm.redraw.sync()が追加されています。 その他にもm.withAttrの削除、m.requestが返すPromiseがサーバエラーの場合にもrejectされないように変更、IE10以下のサポート終了なども含まれています。 また、m.requestがtimeoutやresponseTypeのサポートなどの機能追加も含まれています。 Electron 6.0.0がリリースされました。 Release electron v6.0.0 · electron/electron Stable R
※行程さんを利用したくてこの記事に辿り着いた方へ。「Pen」https://pen.social という後継サービスを開発しました。 この記事は、2017年7月〜2020年6月まで運用されていた旅行のしおり作成サービス「行程さん」について書かれています。2019年4月に技術同人誌として執筆したものを元にnote用に無料公開したものです。内容はほぼそのときのままです。ナマモノな情報なので、（行程さんがクローズしたこともあり）無料公開いたします。 開発当時の考え方のため、いま思うと「こうしておくべきだった」等はたくさんあります。 1-1 行程さん 本書で取り上げる行程さんについて説明をします。 ■行程さんとは みなさんは複数人で旅行に行く計画を立てたとき、旅行のしおりをどうしてますか？ しおりを作るのが好きな方は凝ったものを作るでしょうし、面倒だから作らないという方もいるかと思います。 「行程
Bootstrap 5 Alpha 2の注目しておきたい新機能、ダークテーマのコンポーネント・新しいユーティリティclassなど
先日リリースされたBootstrap 5 Alpha 2の新機能を紹介します。 新しく導入されたダークテーマのコンポーネント、ドキュメントナビゲーションの再設計、新しいユーティリティclass、今までとは異なるボタンなど、解説します。 Bootstrap 5 Alpha 2 changes by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Bootstrap 5 Alpha 2がリリース Bootstrap 5 Alpha 2で導入されたダークコンポーネント ドキュメントナビゲーションの再設計 Bootstrap 5 Alpha 2で新しくなったクローズボタン positionの新しいユーティリティclass Bootstrap 5 Alpha 3はどうなる？ Bootstrap 5 Alpha 2がリリー
First published: Oct 2, 2019 Last updated: Jan 5, 2023 Tagged: webperf, ramblings, webpagetest. Matt Hobbs Read time: 149 mins Table of contents Basic Layout 1 - Key 2 - Request list 3 - Request timeline 4 - CPU Utilisation 5 - Bandwidth In 6 - Browser Main Thread 7 - Page is Interactive (Long Tasks) Vertical lines Horizontal timings Request 1 - The HTML Request 7 - A third-party JavaScript file R
Font Awesome 5 の使い方
Font Awesome 5 の基本的な使い方 Font Awesome のバージョン 5.9 以降を利用するにはアカウントを作成する必要があります。バージョン 5.9 以降でのアカウントの登録方法や使い方に関しては以下を御覧ください。 Font Awesome の使い方（ver5.9以降） 以下はバージョン 5.8 以前に関する説明です（アイコンの表示方法などは基本的に同じです）。 Font Awesome 5 について（ver5.8 以前） Font Awesome はバージョンが５になって、以下の２つの方法で利用できるようになっています。 今までと同じ Web フォントとして使う方法（Using Web Fonts with CSS） SVG と JavaScript で使う方法（Using SVG with JavaScript） 「SVG と JavaScript で使う方法」で
さくらインターネットは10月29日、提供している全てのサービスでInternet Explorer（IE）のサポートを2021年4月1日に終了すると発表した。4月1日以降は閲覧や動作に支障が生じる場合がある。 全てのサービスでIE 11の利用を非推奨とする。IE 10以前のバージョンは既にサポートを終了している。サポート終了の背景として同社は、米MicrosoftがMicrosoft Edgeへの移行を促していることを挙げている。 さくらインターネットは「IE 11でサービスを利用中のお客さまは、これを機にMicrosoft Edgeやその他のWebブラウザのご利用をお願い致します」と呼びかけた。 Microsoftは15年にリリースしたWindows 10の標準WebブラウザをEdgeに設定。IEのサポート終了時期は明らかにしていないが、16年1月以降は最新バージョンのみをサポート対象に
APEXから紐解くコミュニケーション能力を上げるために気をつけるべき事 |仙台を代表するホームページ制作会社｜アンドエイチエー｜AndHA inc.
APEXから紐解くコミュニケーション能力を上げるために気をつけるべき事 公開日 : 2021.10.11 最終更新日 : 2022.10.05 ディレクション 皆さんはゲーム、好きですか？ 僕はあまりゲームをやってこなかったタイプなのですが、1年ほど前からAPEXというFPSゲームにハマっています。 Twitterで事あるごとにトレンド入りしているため知っている方も多いのではないでしょうか？(大体はネガティブな文脈でトレンド入りしてますが) APEXの優れている機能このAPEXというゲームはパーティの行動指針をピンで指す(シグナル機能)というコミュニケーション方法があり、VC(ボイスチャット)を使わずともある程度の認識共有が出来るという非常に優れた機能があります。 この機能の優れているところは、この機能一つでコミュニケーションと、試合でのマイルストーン設定が出来ることです。 ゲームの性質が
こんにちは、会社員しょこちゅんです🤗 本日は、タイトルにもある通り、記事の一番下に自分で任意の広告をレスポンシブで入れる方法についてです。 グーグルアドセンスに合格されてない方や、他のアフィリエイトサイトに登録されてる方も多いと思いますので、是非参考にしてみてください。 それでは早速行ってみよー。 レスポンシブデザインとは？ レスポンシブって何？ レスポンシブで作るメリットは？ グーグル広告があるから必要ないんじゃない？ 実際のタグのご紹介 実際使用しているブロックはこちら 実際に使用するタグはこちら 任意の広告タグに張り替える方法 手順の説明 広告の分類ごとに追加していく方法 手順 最後に レスポンシブデザインとは？ レスポンシブって何？ はい、そもそもの質問からお答えします。 レスポンシブデザインとは、スマートフォン対応に作られてるサイトの事です。 分かりやすく説明すると、PCで開い
IE11でflexプロパティに書いたcalcが機能しないバグ
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。 基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
フォントサイズで使われる、pxとemはここが違う
pxとemはどちらもホームページで使われる単位を表すもの メートル・ヤード・フィートなどなど、大きさを表す単位がたくさんありますが、それぞれで大きさが異なりますよね。 例えば1メートルは約1.09361ヤード、約3.28084フィートですね。 単位は物差しの目盛りのようなもので、大きさの基準となるものです。基準が変われば同じ「1」でも単位が変わってしまいます。 pxとemも、大きさを表す単位です。 そしてpxとemの違いは文字の大きさの基準となる物が異なるという点です。 px（ピクセル） pxは画面上にある点の事で、1pxは1ドットという考え方でおよそ大丈夫です。 この単位は環境によって変化しない絶対単位です。 em（エム） emは文字の高さを基準とした単位です。 「エム」と読むそうですが、いままでずっと「イーエム」と間違えて読んでいました・・・ emは使われている書体（フォント）や、CS
ディレクトリ構造ディレクトリ構造はこんな感じです。 srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。 gulpが走ると、distディレクトリにコンパイルされます。 ├─ index.html ├─ gulpfile.js ├─ package.json ├─ package.look.json ├─ /node_modules ├─ /dist │ ├─ /css │ │ └─ style.css │ ├─ /js │ │ └─ script.js │ └─ /img └─ /src ├─ /scss │ └─ style.scss ├─ /js │ └─ script.js └─ /img npmパッケージについての説明は割愛しますが、progateで解説されている記事があったので紹介しておきますね。 基本的なg
LG.comのWebサイトをご利用いただくには、別のブラウザーを使用するか、Internet Explorerの新しいバージョン（IE10以降）にアップグレードする必要があります LG.com Webサイトでは、デバイスの画面サイズに適合するレスポンシブデザインを使用しています。 LG.COMのWebサイトを最大限に活用するには、以下の手順に従ってください。 Internet Explorer 9以前を使用している場合は、FirefoxやChromeなどのブラウザーを使用するか、Internet Explorerの新しいバージョン（IE10以降）にアップグレードする必要があります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
jQuery 4.0.0 BETA! | Official jQuery Blog
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる
Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ
新しくなったBootstrap 5を使用して、管理画面のUIを実装する方法を解説
JavaScriptとイベントループ | NHN Cloud Meetup
Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA
ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload
Bootstrap 5ではIE11のサポート終了も判明、Bootstrap 5をIE11に対応させる方法が用意されている
【jQuery】jQuery4.0.0の変更点紹介 - Qiita
「Silverlight」のサポートは2021年10月12日に終了 ～IE10対応は来年1月まで／ブラウザープラグインからHTML5への移行が進む
2019-07-30のJS: mithril.js 2、Electron 6、React入門ガイド
Microsoft、2020年1月の更新を発表 ～Windows 7、IE 10などに最後のセキュリティパッチ／OSの最大深刻度は“緊急”。「Office」「.NET」「OneDrive for Android」などにも脆弱性
ウェブサービス「行程さん」をバズらせたマーケティングとデザイン｜吉川雅彦
How to read a WebPageTest Waterfall View chart - Matt Hobbs
IE11がWindows Update/WSUS経由で提供開始 ～Windows Server 2012/Windows Embedded 8向け／IE 10のサポートが終了する2020年1月14日までに適用を
さくらインターネット、全サービスでIEのサポートを終了
【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。 - 花太郎BLOG
CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
LG 27.6インチ 16:18 DualUpモニター | LGエレクトロニクス・ジャパン