sublime-autoprefixer : Sublime Text でベンダープレフィックスを最適化してくれるプラグイン CATEGORY: HTML/CSS | TAG: sublime text 2015年2月5日 CSS のベンダープレフィックス（接頭語）を自動で最適化（追加・削除）してくれる Sublime Text のプラグイン「sublime-autoprefixer 」に関するメモ。 対象ブラウザやそのバージョンを指定することも可能。 適切なベンダープレフィックスを付けるのはとても面倒で大変だが、このプラグインを使用すると簡単に CSS に付与したベンダープレフィックスを自動的に最適化してくれる。 このプラグインは「caniuse.com」という HTML5 や CSS3 等の対応状況を調べられるデータベースを元に、必要な CSS のみにベンダープレフィックスを追加し、ま
CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheightがautoに設定されている要素にtransitionを適用したい時です。 transitionを有効にする場合、始点と終点の値を100pxのように絶対値で指定するか、50%（もちろんheightなどで親のautoを引継いでしまっている場合はダメ）のように相対値で指定することはできるけど、autoだとtransitionが効かない。 // Stylus .foo width 200px height 0 transition height .2s &.opened height auto 上の例の場合
正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、CSS界隈では有名な事象なのかもしれない。ただ、ググっても出てこないし、そもそも何てググればいいのかもよく分からず、この現象にあうたびにデベロッパーツールを開いてなんだかんだやっていたので、その原因を忘れないように書き残しておく。 どういう現象か visibility: hidden;とopacity: 0;で非表示にした要素を、マウスホバーで表示、マウスアウトで非表示に切り替える（アニメーション付き）際に、マウスアウトして完全に非表示となっているのにも関わらず、その要素が表示されていた部分にマウスをもっていくと消えた要素が再表示されてしまうという現象です！ 基本的には問題の
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
こんにちは、フロントエンジニアの栗原です。 今回はCSSのカラー指定方法のおはなしです。 CSSのカラー指定で良く見るのは、RGBaや#ffffff（#と6つの文字(16進数)で色を指定するもの）の表記ですよね。 CSS3では、HSLaと呼ばれる、色相・彩度・明度・透明度で指定することができるようになりました。 HSLaとは、色相（hue）・彩度（saturation）・明度（luminousity）・透明（alpha）からなります。 色相は色相環上の角度を0 度～360度、彩度の強さを0%～100%、明度の強さを0% ～100%で指定することができるので、色の指定からなるrgbaと違い、彩度と明度の調整がパーセントで行えるので、細かい調整や色の変化などを直感的に扱いたい時に大変便利になると思います。 記述方法 color : hsla(色相, 彩度, 明度, 透明); 例：赤 color
こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。 詳細は以下から。 コピペ自由！美しいグラデーションを180種類揃えた WebGradients WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
