[B! grid] yk_acのブックマーク

記述次第でAutoprefixerいらず？！CSS Grid LayoutのIE11対応方法と未サポートブラウザのフォールバック例 | フロントエンドBlog | ミツエーリンクス

特に労力がかかるのがIE11ではGirdアイテムの配置で、-ms-grid-columnと-ms-grid-column-spanを適宜追記しなくてはならない点でしょう。 .grid-it em { /* IE10+での指定 */ -ms-grid-column: 1; -ms-grid-column-span: 2; /* モダンブラウザでの指定 */ grid-column: 1 / 3; } そこで登場するのがIE11でのCSS Grid Layoutサポートの強い味方、Autoprefixerです。 AutoprefixerでIE11のCSS Grid Layoutの対応が楽に Autoprefixerの最新版（2018年6月現在ではv8.6.4）は、IE11用のCSS Grid Layoutプロパティの追記はもちろんのこと、grid-areaの自動変換やIE11では未サポートである

yk_ac 2019/11/15

リンク

＜IE11対応＞実務で使うGridレイアウト【環境構築編（gulp）】

皆さん、Gridレイアウト使ってますか？こう質問すると割と「使ってるよー」と答える方も多いかもしれません。では「受託制作の実務現場でGridレイアウト使ってますか？」と質問したらどうでしょう？おそらく「バリバリ使ってるよー」という人の割合はグッと減るのではないかと思います。私も、勉強はしていますがまだ実務での実戦投入は見送っています。理由はいわずもがな「IE11」の呪いが解けていないからです。事業会社のように自分のwebサービスを展開している現場であれば自己判断でIE11を切るのも自由ですが、これが受託制作の現場になると、話は別です。 IE11を切るにはクライアントの説得が必要になります。うまく説得できれば良いですが、 MicrosoftのIE11サポートが2025年まで続く日本におけるIE11のシェアがまだ10%近くある中国、インドなどの途上国でもまだ古いWindows

yk_ac 2019/09/04

リンク

IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法

CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。最初は、C

yk_ac 2019/08/28

grid
IE

リンク

特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA

ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。この

yk_ac 2019/08/27

リンク

Bootstrap 4 グリッドシステムの使い方 - Workship MAGAZINE(ワークシップマガジン)

Bootstrapとは、Twitter社が開発したUIフレームワークです。Webサイトをデザインする際に役立つツールで、レスポンシブデザインに対応しています。この記事では、簡単にレスポンシブWebデザインができるBootstrap 4のグリッドシステムの紹介をします。 Bootstrapのグリッドシステムとは？グリッドとは「画面を縦横に分割する線」のことで、横の線で分割されたエリアを「行（Row）」、縦の線で分割されたエリアを「列（Column）」と呼びます。この「行」と「列」を使ってボックス（容器）を配置してデザインするのが、Bootstrap 4におけるグリッドシステムです。 Bootstrapグリッドは、CSSやJavascriptなしで使うことができます。”bootstrap-grid.css“にリファレンスするだけで、「Grid」クラスと「Flexbox」クラスへアクセス可能