CSS Grid Layoutをガッツリ使った所感 - Qiita
この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat yo
MUI - Material Design CSS Framework
The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── email │ ├── mui-email-i
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
CSS だけで 空の要素に指定した background-image の高さを正しい縦横比で動的に変化させる - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自己紹介</title> </head> </head> <body> <section class="profile-content"> <header> <h1>自己紹介</h1> </header> <div class="profile-image"></div> <p>僕はととろ、君はとろろ。<br> ごめんほんとは僕、らっしーっていうんだ。Railsエンジニアしてます。</p> </section> </body> </html> な感じでウィンドウ幅に合わせて縦横ちゃんと合わせて表示したいのです。 background-size: 100% auto; してやればいいじゃん！は 間違い。 一般的にbackground-size: 100% auto;とすれば
CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
[CSS3] Androidのmask-imageに関する不具合について
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。 その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、 参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。 でもよく調べてみたらそれだけじゃなかったんです。 検証するにあたって書いたデモはこれです。 以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは３つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく
![[CSS3] Androidのmask-imageに関する不具合について](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル
今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。 フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val
そのベンダー接頭辞はいつまで書くの？
ベンダー接頭辞（プレフィックス）については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない（使われることもない）であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった（終わりつつある）のに、なんでそれしか書いてないの」と思うことが結構あります
[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル
How to create animated tooltips with CSS3 [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。 Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。 実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
Ultimate CSS Gradient Generator from ColorZilla
Blog - LINE ENGINEERING
http://html5please.us/