2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ | Web Design Trends

2020/05/26 6 users Flexbox CSS CSS Grid Layout 解説

TOP > Web制作 > 2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ CSS Grid Layoutは、CSSで柔軟にレイアウトを作ることができる便利なレイアウト手法です。 しかし、Flexboxと比べてブラウザ対応が遅れているなど、推奨環境について気になる方も多いのではないでしょうか。 今回は、20... 続きを読む

?よくハマったFlexboxのバグまとめ｜たかもそ｜note

2020/03/25 8 users Flexbox Note たか パク バグまとめ

Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がは... 続きを読む

上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA

2018/03/28 465 users ICS MEDIA 手軽 displ Flexbox 3行

CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番短いコード量で済みます。中央揃えしたい要素の親に対して たった3行記述するだけ です。最新ブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィックスなしで動作します。 ▼ CSS .container { displ... 続きを読む

CSSのベンダープレフィックスは必要？不要？ - かきのマネー

2017/02/23 11 users カギ bookmark かきたろー CSS 雑記

2017 - 02 - 23 CSSのベンダープレフィックスは必要？不要？ ブログ運営 雑記 スポンサーリンク シェアする Bookmark! Facebook Twitter Google+ Pocket こんにちは！かきたろー( @kakitaroo_ )です。 カスタマイズのために、CSSの勉強をちょこちょこしています。 その中で「ベンダープレフィックス」っていうものがあります。 聞いたこと... 続きを読む

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

2015/08/18 274 users Flexbox WebKit 応用 CSS 前述

以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要で... 続きを読む

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル | NxWorld

2015/05/10 108 users NxWorld CSS 追記 グラデーション ファーストビュー

ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。そのヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 ※以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスやサイズ指定などは必要に応じて追記・変更してください。... 続きを読む

Autoprefixerによる、CSS3の管理｜Web Design KOJIKA17

2014/01/08 165 users Autoprefixer Tools プレフィックス ツール

KOJIKA17 Home - About - RSS Autoprefixerによる、CSS3の管理 Published: 2014-01-08 Categories: tools, css3, CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、 せっかく付けたベンダー... 続きを読む

CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ

2013/05/07 50 users くらげだらけ disp css3プロパティ 方向 CSS3

2013-05-06 CSS Flexible Box Layout Moduleで均等幅にレイアウトする 最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 disp... 続きを読む

[CSS]ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシート | コリス

2013/04/02 60 users コリス inline-block CSS グリッド 実装

inline-blockを使ってシンプルなグリッドで、ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシートを紹介します。 Gallery -Inline Block Grid デモ 実装 デモ デモは、最新のモダンブラウザでご覧ください。 ※CSS3はベンダープレフィックスの記述なしです。 Gallery -Inline Block Grid 実装 Step 1... 続きを読む

ベンダープレフィックスの順序｜Web Design KOJIKA17

2013/02/22 105 users 順序 プロパティ 実装 先行 識別子

CSS3を扱う上でベンダープレフィックスの話題は外せません。 そのベンダープレフィックスの順序について書いてみます。 ベンダープレフィックスとは ベンダープレフィックス(vendor prefix)は、ブラウザが独自の拡張機能を実装、勧告候補前の仕様を先行実装する場合に、 将来的に仕様が変更されるリスクに備えて、プロパティや値につけられる識別子のことです。 その識別子は、ベンダー識別子(vendo... 続きを読む

要素を変化させる、CSS3「transform」のおさらい｜WEB Drawer

2013/01/15 79 users transform Animation 初歩 おさらい 動作

今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています... 続きを読む

CSSアニメーションの初歩をおさらい｜WEB Drawer

2012/12/20 239 users 初歩 おさらい CSSアニメーション WEB Drawer

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたので... 続きを読む

コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 - YATのBlog

2012/10/31 437 users YAT コーディング CSS SCSS Sass

Sass、Scssのフレームワーク「Compass」に関しての記事です。ベンダープレフィックスの記述が不要など、コーディングのスピードアップに最適なその秘密を紹介しています。CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになって... 続きを読む

復習にぜひ！WebparkのCSS3に関する記事のまとめ｜Webpark

2012/08/14 36 users Webpark CSS 復習 まとめ｜Webpark 構造

このブログではCSS3に関する記事がなかなか人気です。個人的にも力を入れているところですのでうれしい限りです。そんな記事をもっと知ってもらいたいということでまとめてみました。単なるまとめですが、新しい発見などあればうれしいです。 CSS3のはじめ まずは基本的な内容から。 CSS3について知っておきたいことのまとめ CSSの構造やベンダープレフィックスなど基本的な内容を幅広く載せています。CSS3... 続きを読む

jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com

2012/08/13 356 users Ginpen.com CSS 諸々 jQuery Blog

個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。）　えらい！ jQuery Blog » j... 続きを読む

[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free | コリス

2011/10/13 144 users コリス WebKit moz 接頭辞 スクリプト

ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3... 続きを読む

CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net

2011/10/05 190 users プレフィックス jQuery mootools CSS net

久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのよう... 続きを読む

面倒なCSS3のベンダープレフィックスを自動で付けてくれる -prefixMyCSS | コリス

2011/07/28 54 users コリス WebKit moz CSS3 スタイルシート

スタイルシートをペーストし1クリックするだけで、「-webkit-」や「-moz-」などの面倒なCSS3のベンダープレフィックスを自動で付けてくれるオンラインサービスを紹介します。 prefixMyCSS シンプルながら [...] 続きを読む