サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
●はてなブックマークって？
●アプリ・拡張の紹介
●ユーザー登録
●ログイン
●ログアウト
d4-1977
id:d4-1977
●
19,579
ブックマーク
●
-
お気に入り
●
-
お気に入られ
タグ
●すべて
●
あとで読む
(27)
●
まとめ
(19)
●
開発
(32)
●
37signals
(55)
●
ABTest
(9)
●
ABテスト
(19)
●
ACL
(9)
●
AHK
(7)
●
AIR
(37)
●
AMP
(7)
●
API
(181)
●
AWS
(123)
●
AWS Lambda
(9)
●
ActionScript
(173)
●
ActiveRecord
(23)
●
AdSense
(6)
●
Adobe
(56)
●
AdobeMAX2007
(15)
●
AdobeMAX2009
(6)
●
Ajax
(44)
●
Amazon EC2
(13)
●
Amazon S3
(20)
●
Amplify
(6)
●
Android
(139)
●
AppleScript
(11)
●
Atom
(34)
●
AtomPub
(11)
●
Automator
(20)
●
BEM
(17)
●
Backbone.js
(21)
●
BigQuery
(14)
●
Boot Camp
(9)
●
Bootstrap
(30)
●
CGI
(13)
●
CI(17)
●
CSS
(616)
●
CSS Nite
(62)
●
CSS3
(76)
●
CSS設計
(10)
●
CakePHP
(145)
●
Canvas
(19)
●
Catalyst
(17)
●
CentOS
(6)
●
Chatwork
(11)
●
Chrome
(40)
●
Chrome拡張
(6)
●
CircleCI
(8)
●
CoffeeScript
(12)
●
CoreData
(10)
●
DB(41)
●
DNS
(6)
●
DeNA
(36)
●
DevOps
(11)
●
Devise
(6)
●
Dreamwaver
(6)
●
Dropbox
(20)
●
EC(8)
●
EC2
(8)
●
ES6
(12)
●
Eclipse
(6)
●
Elasticsearch
(13)
●
Ethna
(16)
●
Evernote
(33)
●
Excel
(19)
●
Facebook
(99)
●
FastCGI
(8)
●
Fedora Core
(14)
●
Figma
(54)
●
Firebug
(18)
●
Flash Lite
(6)
●
Flex
(123)
●
Flexbox
(9)
●
Fluentd
(18)
●
Flutter
(17)
●
GPS
(21)
●
Gmail
(16)
●
Google Analytics
(127)
●
Google App Engine
(68)
●
Google Apps
(7)
●
Google Apps Script
(33)
●
Google Calendar
(9)
●
Google Chart
(6)
●
Google Chrome
(24)
●
Google Docs
(6)
●
GoogleMaps
(14)
●
GraphQL
(18)
●
HCD
(14)
●
HTML
(71)
●
HTML5
(127)
●
HTMLメール
(8)
●
Hadoop
(19)
●
Heroku
(87)
●
IA(53)
●
IDEO
(9)
●
IE(17)
●
IFTTT
(7)
●
Illustrator
(11)
●
ImageMagick
(21)
●
Instagram
(41)
●
Jenkins
(26)
●
KPI
(7)
●
Kindle
(10)
●
LINE
(34)
●
Lambda
(20)
●
LifeHack
(18)
●
Lighttpd
(6)
●
Livedoor
(30)
●
Mac
(35)
●
Mac OS X
(8)
●
MacBook
(11)
●
MacOS X
(230)
●
MacPorts
(19)
●
MacVim
(8)
●
Markdown
(22)
●
Material Design
(11)
●
MeCab
(20)
●
MongoDB
(12)
●
MovableType4
(99)
●
MySQL
(65)
●
NHK
(12)
●
Next.js
(22)
●
OAuth
(19)
●
OGP
(10)
●
OOUI
(25)
●
OpenCV
(9)
●
OpenID
(9)
●
PDF
(18)
●
PEAR
(23)
●
PNG
(7)
●
PR(209)
●
Perl
(295)
●
Pintarest
(9)
●
Plagger
(25)
●
PostgreSQL
(19)
●
PostgresSQL
(9)
●
Prott
(12)
●
Python
(83)
●
Qiita
(29)
●
REST
(23)
●
RSS
(16)
●
Rails
(233)
●
Rails3
(10)
●
Rails4
(6)
●
React
(175)
●
React Native
(28)
●
React.js
(13)
●
ReactNative
(9)
●
Realm
(8)
●
Redmine
(22)
●
Rspec
(21)
●
Ruby
(397)
●
Ruby on Rails
(527)
●
S3
(17)
●
SEO
(195)
●
SQL
(40)
●
SVG
(22)
●
SaaS
(7)
●
Safari
(12)
●
Screen
(13)
●
Selenium
(20)
●
Sinatra
(21)
●
Sketch
(96)
●
Sledge
(27)
●
Smarty
(19)
●
Solr
(24)
●
Stimulus
(9)
●
Storyboard
(12)
●
TDD
(12)
●
TOEIC
(9)
●
TextMate
(8)
●
Thread
(7)
●
Titanium
(37)
●
Titanium Mobile
(23)
●
TortoiseSVN
(7)
●
Tumblr
(32)
●
Tweener
(7)
●
Twitter
(88)
●
TypeKey
(7)
●
TypeScript
(55)
●
UI(863)
●
UX(327)
●
UXデザイン
(19)
●
UXリサーチ
(11)
●
Ubuntu
(12)
●
VM(6)
●
Vagrant
(27)
●
VirtualBox
(14)
●
WEB+DB
(8)
●
Web Fonts
(21)
●
WebSig
(51)
●
Webサービス
(12)
●
Web屋
(11)
●
Wi-Fi
(6)
●
XHTML
(125)
●
Xcode
(30)
●
YAML
(27)
●
YSLOW
(8)
●
YUI
(23)
●
Yahoo!
(13)
●
Yahoo! Pipes
(11)
●
ZenCoding
(7)
●
Zeplin
(12)
●
amazon
(56)
●
apache
(77)
●
apple
(42)
●
atomic design
(31)
●
autolayout
(7)
●
blog
(30)
●
capistrano
(26)
●
capybara
(10)
●
chef
(10)
●
cms
(53)
●
concrete5
(6)
●
cookie
(7)
●
cookpad
(15)
●
cpan
(15)
●
csv
(7)
●
design
(13)
●
devsummit2007
(6)
●
docker
(35)
●
ePub
(7)
●
emacs
(109)
●
ffmpeg
(34)
●
firefox
(30)
●
flash
(240)
●
flickr
(64)
●
flv
(32)
●
font
(13)
●
foursquare
(9)
●
gem
(31)
●
git
(147)
●
github
(141)
●
google
(206)
●
google sitemaps
(12)
●
gree
(14)
●
gvim
(11)
●
hubot
(15)
●
iOS
(241)
●
iOS7
(8)
●
iOS8
(10)
●
iPad
(33)
●
iPhone
(407)
●
iTunes
(11)
●
ical
(21)
●
icon
(7)
●
ie7
(13)
●
jQuery
(209)
●
jQuery Mobile
(29)
●
javascript
(912)
●
json
(33)
●
life
(53)
●
lightbox
(6)
●
linux
(26)
●
meadow
(15)
●
memcached
(53)
●
mixi
(39)
●
mobile
(225)
●
mod_perl
(15)
●
mod_rewrite
(6)
●
movabletype
(284)
●
mt(242)
●
mvc
(33)
●
nanapi
(19)
●
network
(6)
●
nginx
(10)
●
node.js
(26)
●
npm
(6)
●
objective-c
(21)
●
oop
(10)
●
phantomjs
(11)
●
php
(529)
●
phper
(10)
●
prototype.js
(44)
●
radiko
(10)
●
rsync
(8)
●
sass
(14)
●
shibuya.js
(11)
●
shibuya.pm
(7)
●
sixapart
(19)
●
slack
(46)
●
sns
(14)
●
subversion
(78)
●
svk
(7)
●
svn
(47)
●
swift
(82)
●
symfony
(55)
●
trac
(61)
●
unix
(10)
●
ustream
(6)
●
vim
(249)
●
vim7
(17)
●
vimrc
(10)
●
vmware
(43)
●
vue.js
(8)
●
web
(30)
●
web2.0
(37)
●
webkit
(15)
●
webpack
(28)
●
webpacker
(8)
●
webservice
(184)
●
webデザイン
(104)
●
web制作
(607)
●
web標準の日々
(14)
●
wiki
(10)
●
windows
(52)
●
wordpress
(106)
●
xml
(14)
●
yahoo
(64)
●
youtube
(37)
●
zsh
(14)
●
あとで作る
(6)
●
あとで考える
(22)
●
あとで聞く
(6)
●
あとで行きたい
(17)
●
あとで行く
(58)
●
あとで見る
(27)
●
あとで試す
(73)
●
あとで読む
(4572)
●
あとで調べる
(12)
●
あとで買う
(155)
●
あとで食べる
(241)
●
お金
(9)
●
これはすごい
(6)
●
さくらインターネット
(34)
●
そうめん
(8)
●
はてな
(130)
●
ふりかえり
(7)
●
まとめ
(106)
●
めも
(10)
●
アイコン
(32)
●
アクセシビリティ
(31)
●
アクセス解析
(212)
●
アジャイル
(96)
●
アニメーション
(28)
●
アプリ
(27)
●
イベント
(16)
●
イラスト
(6)
●
インタビュー
(8)
●
インテリア
(6)
●
インンターネット
(6)
●
エンジニア
(144)
●
オブジェクト
(10)
●
オブジェクト指向
(22)
●
カメラ
(52)
●
ガイドライン
(15)
●
ガンダム
(7)
●
キャッシュ
(6)
●
キャリア
(22)
●
クックパッド
(64)
●
グロースハック
(18)
●
ケータイ
(16)
●
ゲーム
(21)
●
コンテンツ
(11)
●
コーディング
(8)
●
コードレビュー
(7)
●
サイボウズ
(7)
●
サーバー
(18)
●
サービス
(47)
●
スクラム
(15)
●
スタジオジブリ
(6)
●
スタートアップ
(14)
●
スマホ
(9)
●
スマートフォン
(35)
●
セキュリティ
(22)
●
セッション
(13)
●
ソフト
(18)
●
ソフトウェア
(14)
●
ソーシャル
(14)
●
ソーシャルゲーム
(15)
●
タスク管理
(6)
●
タブ
(6)
●
チュートリアル
(13)
●
チーム
(67)
●
チーム開発
(18)
●
ツール
(32)
●
テスト
(64)
●
デザイナー
(136)
●
デザイン
(1754)
●
デザインシステム
(90)
●
デザインスプリント
(10)
●
デザインパターン
(18)
●
デザインレビュー
(7)
●
デザイン思考
(10)
●
デザイン組織
(152)
●
デジカメ
(6)
●
デブサミ
(9)
●
デプロイ
(12)
●
データベース
(7)
●
ドラクエ
(6)
●
ニコニコ動画
(12)
●
ネタ
(25)
●
パフォーマンス
(9)
●
ビジネス
(19)
●
フォント
(38)
●
フラットデザイン
(6)
●
フリーソフト
(18)
●
フリー素材
(6)
●
フレームワーク
(36)
●
フロントエンド
(62)
●
ブログ
(9)
●
プラグイン
(70)
●
プレゼン
(10)
●
プログラミング
(17)
●
プロジェクト管理
(20)
●
プロダクトマネージャ
(34)
●
プロトタイピング
(24)
●
プロトタイプ
(6)
●
ペパボ
(46)
●
マネジメント
(57)
●
マーケティング
(53)
●
メディア
(12)
●
モバゲー
(10)
●
ユニクロ
(12)
●
ユーザビリティ
(16)
●
ユーザーインタビュー
(17)
●
ライブラリ
(36)
●
リサーチ
(35)
●
リファレンス
(19)
●
リモートワーク
(13)
●
リンク集
(7)
●
レシピ
(19)
●
レスポンシブ
(21)
●
ワイヤーフレーム
(8)
●
京都
(15)
●
京都精華大学
(24)
●
人生
(37)
●
仕事
(558)
●
任天堂
(25)
●
位置情報
(23)
●
働き方
(9)
●
写真
(195)
●
勉強
(21)
●
勉強会
(12)
●
動画
(31)
●
北海道
(11)
●
参考
(10)
●
台南
(23)
●
台湾
(215)
●
台湾料理
(25)
●
台湾旅行
(89)
●
同人誌
(7)
●
地図
(9)
●
大学
(10)
●
学習
(18)
●
宮崎駿
(9)
●
家具
(7)
●
帯広
(10)
●
広告
(11)
●
形態素解析
(16)
●
採用
(16)
●
携帯
(191)
●
教育
(10)
●
数学
(10)
●
文字コード
(7)
●
文章
(9)
●
料理
(21)
●
新卒研修
(97)
●
旅行
(15)
●
映画
(32)
●
書籍
(636)
●
書籍紹介
(80)
●
書評
(79)
●
本
(8)
●
楽天
(30)
●
機械学習
(14)
●
正規表現
(9)
●
水曜どうでしょう
(9)
●
消しゴムはんこ
(14)
●
無印良品
(10)
●
生活
(15)
●
画像
(19)
●
研修
(35)
●
社会
(13)
●
管理画面
(10)
●
素材
(19)
●
組織
(143)
●
結婚
(24)
●
結婚式
(20)
●
統計
(28)
●
統計学
(38)
●
絵文字
(9)
●
考え方
(9)
●
育成
(38)
●
自宅サーバ
(17)
●
英語
(37)
●
解析
(9)
●
設計
(56)
●
認証
(11)
●
資料
(64)
●
農業
(7)
●
運用
(77)
●
開発
(1792)
●
開発環境
(733)
●
雑貨
(21)
●
電子書籍
(15)
●
面接
(7)
●
音楽
(9)
●
高円寺
(17)
●
高雄
(12)
●
あとで読む
(4572)
●
開発
(1792)
●
デザイン
(1754)
●
javascript
(912)
●
UI(863)
●
開発環境
(733)
●
書籍
(636)
●
CSS
(616)
●
web制作
(607)
●
仕事
(558)
関連タグで絞り込む (1)
●
XHTML
タグの絞り込みを解除
CSSとCSSスプライトに関するd4-1977のブックマーク (4)
●
993 users
●
lopan.jp
●テクノロジー
﹁CSS Sprites︵CSSスプライト︶﹂についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね︵2012.8現在︶。 具体的には﹁サイト内で使用するたくさんの画像︵パーツ︶をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする﹂という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
d4-1977
2012/08/26
●CSSスプライト
●CSS
●
4 users
●
blog.livedoor.jp/fseeker
●テクノロジー
CSS Sprite︵CSSスプライト︶というテクニックの解説です。 YouTubeやGoogleで使われているCSSテクニックの1つで、リクエスト数を減らしたり表示速度を向上させるといったものです。 もちろん弊害もあるといえばありますので、少し見ていきましょう。 アイコン画像やナビゲーション画像など、1枚の画像にまとめる ︵*スクリーンショットはYouTubeの実例︶ CSSで上記画像の表示領域を制御し、適切にデザインしていく︵*1︶ ︵Fireworksを使うと比較的楽に実装できるらしい。未確認︶ 上記画像をpngにしている場合、透過処理を施しているとIE6でバグが発生する ︵IE6は仕様でpngの透過処理に対応していないため。そのため、この条件に当てはまる場合はハックを使う必要がある︵*2︶︶ 動作確認を行って完成 *1 CSSのbackground-positionプロパティで表示
d4-1977
2008/07/11
●CSS
●CSSスプライト
●XHTML
●
1046 users
●
www.designwalker.com
●暮らし
d4-1977
2008/07/11
●CSS
●CSSスプライト
●XHTML
●
58 users
●
coliss.com
●テクノロジー
CSS Sprite Generatorは、GoogleやYahoo!などで使用されている複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレーターです。 Yahooで使用されている画像 Googleで使用されている画像 CSS Sprite Generator 使用するには、﹁Source Files﹂に複数の画像をZipに圧縮したファイルを指定します。 オプションはいろいろありますが、﹁Create Sprite Image & CSS﹂ボタンをクリックするとスプライト画像とスタイルシートが生成されます。
d4-1977
2008/07/11
●CSS
●CSSスプライト
●XHTML
1
お知らせ
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第1週︶
ランキング
月間はてなブックマーク数ランキング︵2024年6月︶
ランキング
今週のはてなブックマーク数ランキング︵2024年6月第5週︶
もっと読む
公式Twitter
●@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
●@hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●公式アカウント
●ホットエントリー
●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しましたx
CSSスプライトについてあれこれ。
Web制作のトラブルシューティング : CSS Sprite - CSSスプライト 解説
CSS Spriteを活用しよう - DesignWalker
[CSS]複数の画像を一枚で表示できるジェネレーター -CSS Sprite Generator