Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで:JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
い・ろ・は・すのみかん風味のやつ、『温州(うんしゅう)みかんエキス入り』だけど『無果汁』って、いったいみかんのどんなエキスが入ってるんだよ? 前回作ったコンテンツスライダーのアニメーションは、縮小アニメーション→回転アニメーション→拡大アニメーションという3つの動作を、transitionendイベントを利用してjavascriptで繋げていたのですが、CSSアニメーションにはキーフレームアニメーションという方法もありまして、こちらを利用すれば先の動作を以下のように一連の動作をCSSのみで設定することができます。 #hoge:hover { animation:anime-name 2s linear; } @keyframes anime-name { 10% { "transform:scale(0.75) rotateY(0deg); } 90% { "transform:scal
かぜなどいじでもひくものか こんにちは、たすくです。 先日、家で背景画像付きのGoogleの検索トップを見ていて、 ちょっと気になったことが。 なんだこれ?なんか動いてる。 「クリックすると今日のDoodle(ホリデーロゴ)を表示します」だそうです。 どんな風にやってるんだろう、と思ってCSSを調べたら・・・ (※↓長すぎるので小さくしています。実際は28px×2856px。) 長いパラパラマンガだ! Firebugを見てみると、CSSの数字が増えたり減ったりしてる。 要するに、CSSの背景画像の位置をいじって、 疑似アニメーション画像を作ってるみたいな感じだとわかったわけです。 難読化されてるJSを読む気はしなかったので、自分で作ってみることにしました。 縦長のpng画像 (50px×400px) 参考までに、アニメgifでも書き出してみた。(50px×50px) CSS #hoge{
document.getElementById("test").style.backgroundColor = "#008800"; の様な感じで使う。 CSS JavaScript 背景の一括指定
なぜ、ごちゃごちゃしてるのか?ぱっと気づくのがこの2点です。 改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。 もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。 ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。 コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。 これは当然ですね。 コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く