Enduring CSSの設計思想 | 第1回 ECSSが目指す設計
Enduring CSSの設計思想 第1回 ECSSが目指す設計 CSS設計方法、Enduring CSS（ECSS）は、複雑さを排除し、ある程度のCSS容量増加を覚悟することで、CSSの寿命を伸ばすというアプローチを取っています。今回は、その基本となっている考え方から解説します。 はじめに CodeGridでは過去に、OOCSS、SMACSS、BEMの3つのCSS設計概念を紹介しました。 知っておきたいHTMLテンプレート設計法 この連載で紹介するEnduring CSS（以降、ECSS）は、これら3つと同じように、CSSの設計方法を示したものです。エンジニアのBen Frain氏が電子書籍として著し、現在はWebサイト上でもすべてのコンテンツが読めるようになっています。 ECSS: Home Page 先に挙げた3つのCSS設計概念と比較すると、本記事執筆時の2016年5月現在、ECS
Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. You want X lines of text. Anything after that: gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on the text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that t
Detect the End of CSS Animations and Transitions with JavaScript
CSS allows you to create animations with transitions and keyframes that once were only possible with JavaScript or Flash. Unfortunately, with CSS there’s no way to perform a callback when an animation is complete. With JavaScript, it’s possible to detect the end of a CSS transition or animation and then trigger a function. Separate the roles Handle the animations (with transitions or keyframes) in
[CSS] z-index とスタックコンテキスト - Qiita
z-index を使って要素の重なりを制御するとき、何も考えずに適当に z-index: 100; などと指定したりしていませんか？ このあたりの仕組みをよく理解せずに z-index を濫用していると、いつか怪奇現象に見舞われてつらいことになるかもしれません。 怪奇現象の例 早速ですが、以下のコードを御覧ください。 <div class='boxes'> <div class='box1'> .box1 { z-index: 1 } </div> <div class='box2'> .box2 { z-index: 2 } <div class='box3'> .box3 { z-index: 0 } </div> </div> </div> .boxes { color: white; position: relative; } .boxes div { width: 10em; h
![[CSS] z-index とスタックコンテキスト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/41e6edbde6e81d388772238765352ac681b35e5b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJTVEJTIwei1pbmRleCUyMCVFMyU4MSVBOCVFMyU4MiVCOSVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU4NiVFMyU4MiVBRCVFMyU4MiVCOSVFMyU4MyU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjI4NjhmYTg1NDA2ZDNjYzEzMjUyMWMwOGY1NTMxNzU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3RvMTcyOTYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyMjc0M2JmMTI1MGY3OGQzZjM4Mjk2YzE3MGU4ZjNh%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Gh44KF44KJ44OH44O844K_5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D37409b9dfe6d80ad7f0be4d0a58ec3f1)
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
Sizing Fluid Image Containers with a Little CSS Padding Hack
The Problem Scenario: Fluidly sized images, before the images load, the image containers initially appear collapsed. The problem here is the image containers don't initially have a height, and setting a fixed height would be wrong as we don't know how much space these fluid-width images are going to occupy once they load. <div class="grumpy-image-wrapper"> <img class="grumpy-image" src="images/gru
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
iOS8.1のSafariで$(window).height()を使うときの注意点 - 備忘録β版
表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。 環境 iPhone 5s（iOS8.1） jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー（を含む上下のバー）がスクロールで小さくなったりする部分。これが本当にやっかいな挙動をする。 縦（portrait）表示の時は良いとして、問題なのは横（landscape）表示のとき。 URLバー（を含む上下のバー）は、縦から横に回転させたとき隠れ、スクロールすると表示される。 このURLバー（を含む上下のバー）が表示されているか否かで、表示領域の高さは変わるはずなのに、$(window).height()は同じ値を返す。 iPhone 5sで実行した時返す値 取得方法 UR
z-index再入門 | 第1回 z-indexの仕組み
次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整
CSSで中央寄せの方法いろいろメモ - Qiita
ブロック要素は中央寄せにならないので、display: inline-block;でインラインにしてあげます。 margin: autoで中央寄せ margin: auto;を使って上下左右中央寄せにします。 ※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。 .parent{ border: 1px solid #aaa; position: relative; height: 200px; width: 300px; } .inner{ border: 1px solid #aaa; width: 150px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: auto; }
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
知っておくと役に立つCSS - Qiita
スクロール時のカクカクを直す overflow: scroll;はiOS Safariだとスクロールするとカクカクする スムーズにスクロールするよう下記CSSもセットで書いてあげる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexible box model - display : flex, box, flexbox?
CSS3 transition events
Web Fundamentals — Google Developers
css脱初心者？ :before :after擬似要素の使い方とか基本的なこと - Qiita
http://ideahacker.net/2014/02/18/7744/
http://ideahacker.net/2015/02/14/9779/
