z1a2nhのブックマーク / 2018年4月6日

z1a2nh id:z1a2nh

2018年4月6日のブックマーク (4件)

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
z1a2nh 2018/04/06
CSS
リンク
[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。まずはおさらい、CSSのボックスモデル「display: contents;」を使用すると、どうなるか「display: contents;」について詳しく解説「display:
z1a2nh 2018/04/06
CSS
リンク
CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラムまずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！可変幅 2カラムカラムを画面の幅に合わせて伸
z1a2nh 2018/04/06
CSS
リンク
とても軽量！ドラッグアニメーションに優れたPopmotion.js実装例！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちでございますよ。（:D 最大11.5kbしかないトゥイーンアニメーション、ドラッグアニメーションに優れたPopmotion.jsについてご紹介します。（☞ ՞ਊ ՞）☞ 導入方法 npmからインストールはこちらから。 npm install popmotion –save importはこちら！ import { action } from 'popmotion'; // or stand-alone: import action from 'popmotion/action'; これで導入は完了になります。実装の紹介実装できるアニメーションをご紹介します。(☞ ՞ਊ ՞)☞ トゥイーンアニメーション const { easing, tween, styler } = window.popmotion; const divStyler = styler(docume
z1a2nh 2018/04/06
JS
リンク
- 2018年4月7日
- 2018年4月6日
- 2018年4月4日