たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
Inline Form nested within Horizontal Form in Bootstrap 3
I have created a demo for you. Here is how your nested structure should be in Bootstrap 3: <div class="form-group"> <label for="birthday" class="col-xs-2 control-label">Birthday</label> <div class="col-xs-10"> <div class="form-inline"> <div class="form-group"> <input type="text" class="form-control" placeholder="year"/> </div> <div class="form-group"> <input type="text" class="form-control" placeh
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
CSSでボックス要素を画面中央に表示させてみる – VERSIONFIVE
少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。 CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU 仕組みとミソ 元記事のようにネガティブマージンを使い、中央配置したボックスの大きさよりブラウザのウィンドウが小さくなると、右上半分が消えてしまいます。さらに、position: static;なbody要素に絶対配置すると、ブラウザのウィンドウを小さくしていくとうまいこといかない (画面の中央に表示されない) 現象がみられます。ということで今回は以下のように対策してみました。 高さ100%のbody要素にposition: relative;を指定する。 ボックスの縦横にmin-width、
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
liやtr、tdの背景色を交互に付ける - CSSテクニック - acky info
positionを使ったCSSテクニック テキストリンクをpositionでずらしてクリック感をつける フォームのradiobutton、checkbox、selectのずれを調整する positionプロパティのrelative、absoluteの簡単な使い方 フォームに関するCSSテクニック :focusを使って入力中のフォームに背景色をつける 検索ボックスのデザインをCSSで整える フォームの送信ボタンにロールオーバーをつける フォームのradiobutton、checkbox、selectのずれを調整する フォームのIME-MODEを指定する 疑似クラスを使ったCSSテクニック liやtr、tdの背景色を交互に付ける :focusを使って入力中のフォームに背景色をつける テキストリンクをpositionでずらしてクリック感をつける 検索ボックスのデザインをCSSで整える フォームの
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
Yahoo!のアイコン画像 - おぎろぐはてブロ
昨日の記事書いてるときに、気づいたのだけれど、www.yahoo.comのページのアイコン画像は、アイコン1個で1画像でなくて、巨大な画像に複数個配置して、その一部分を表示するようになっている。 おもしろいのでメモ。 左カラムのショートカットのアイコン http://us.i1.yimg.com/us.yimg.com/i/ww/thm/1/trough_1.7.gif メディアタイプやNEW表示、プルダウンボタンなどのアイコン http://us.js2.yimg.com/us.js.yimg.com/i/ww/sp/icons_1.3.gif http://us.i1.yimg.com/us.yimg.com/i/ww/sp/icons_1.4.gif 現時点では、バージョン違いが両方読み込まれていて、さらに、updatedやnewは単体画像としても読み込んでいて、なんか統制が取れてな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA
知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA
画像の保存を禁止する 〜CSSテクニック〜