[B! HTML][CSS] kechinoのブックマーク

ここまでできる！HTML＋CSS | 第1回タイピングゲームを作る

記事中には先行実装の仕様を取り扱ったものがあります。仕様策定が続いていますので、最新仕様については、仕様書もご確認ください。（2017.07.14）はじめにこのシリーズでは、HTML＋CSSの技術を使った、さまざまな実装アイデアを解説します。JavaScriptを使わずとも、いろいろな表現が可能です。HTMLとCSSを力をどれだけ引き出せるかに重点をおきます。第1回目はJavaScriptを使わずに、HTMLとCSSのみで実装したタイピングゲームの解説をします。今回紹介するサンプルは以下のリポジトリからダウンロードまたはクローンできます。サンプル codegrid / 2014-01-derive-html-css まずはサンプルを見てみましょう。NEW GAMEボタンをクリックすると、ゲームが始まります。画面上に表示されたワードを制限時間内にタイピングしていきます。問題をクリア

kechino 2014/05/09

リンク

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少するという報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。今回はWebサイトのパフォーマンスを上げる方法を取り上げます。パフォーマンスアップの前に応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ

kechino 2011/08/29

リンク

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること

kechino 2011/07/08

リンク

CSS Nite LP9 - CSS3 FOR TOMORROW - CSSアニメーション

※注意点本日紹介する内容は、主としてAppleが提案し、採用の検討が進められている項目が殆どです。現状、CSSアニメーションの実装が進んでいるブラウザはSafari, Google Chromeになるため、このプレゼンテーション内では、webkitのvendor prefixを付けた形でご紹介させていただきます。 div{ transition : all .5s; /* CSS3 */ -webkit-transition : all .5s; /* webkitの独自実装 */ }

kechino 2010/04/17

CSS
HTML

リンク

Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法

Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。キャッシュの最適化往復遅延時間を減らす HTTPリクエストを減らすロードサイズを減らすレンダリングの最適化関連書籍 1. Optimize caching キャッシュの最適化ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。アドバイススタティックなリソースは全て、積極的にキャッシュにセットします。時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ

kechino 2009/06/09

リンク

旧・Macの手書き説明書 - FC2 BLOG パスワード認証

kechino 2009/03/26

リンク

はてなブックマーク

タグ

関連タグで絞り込む (14)

HTMLとCSSに関するkechinoのブックマーク (6)

お知らせ

今週のはてなブックマーク数ランキング（2024年11月第2週）

今週のはてなブックマーク数ランキング（2024年11月第1週）

月間はてなブックマーク数ランキング（2024年10月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス