:visitedと一緒にbackground-imageとかは使えないようになってるよ。プライバシー保護が理由。（CSS おれおれ Advent Calendar 2012 – 15日目） | Ginpen.com
訪問済みリンクを示すセレクターです。なお未訪問のリンクは:linkで得られます。 いずれもリンクを前提としているので、要素aの指定は省略して問題ないでしょう。 背景画像を指定するプロパティです。読み込みに時間がかかる場合もあるので、background-colorも一緒に指定しておきましょう。（してないとこ多いんですよね……。） background-positionを使ったCSSスプライトという技術も有名ですね。 プライバシー情報漏洩の仕組み さて閑話休題。この二つを組み合わせて悪用すると、「（他サイトへの）訪問履歴」を得る事が出来てしまいます。 background-imageが:visitedと一緒に使える場合を考えます。 この時に問題になるのが、「画像を読み込む」つまり「画像をウェブサーバーへ要求する」という当たり前の行為です。 要求を受け取ったウェブサーバーは、要求している画像の
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」:phpspot開発日誌
SpriteMachine - Create css sprite images easily! CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」。 簡単な設定の後、ZIPファイルをブラウザにドラッグ＆ドロップすればスプライトファイルがダウンロードできるというもの。 お手軽で便利ですね。 ただ、個人的には、毎回全部アップロードするのは面倒だと感じるので、画像を新しく追加したい場合に、それまでの画像はそのまま使えて新しい物のみのCSSを表示してくれるなんていうツールがあったらよく使いそうだなと思いました。 関連エントリ CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」 BackgroundImageでスプライトアニメーションさせるjQueryプ
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
2冊目の著書 – やさしくはじめる WebデザイナーのためのjQueryの学校 – あとがき
この度、マイナビさんから、私にとって2冊目の著書 「やさしくはじめる WebデザイナーのためのjQuery学校」が発売になりました！ この本は「HTML + CSS は分かるけど、jQuery ってよく分からない …」という人に読んでいただけたら … と思って書きました。jQuery って何？というところから始まって、基本的な使い方、コードの書き方など、基本的なことはもちろん、初心者の頃につまづきそうなポイントに重点を置きました。 1. 監修：西畑一馬さん、イラスト：狭間句美さん 今回 jQuery の本を執筆するにあたって、Web制作の現場で使う jQueryデザイン入門 の著者でもある、to-R の西畑一馬さんに監修していただきました。 私からしてみたら、西畑さんは jQuery の神様みたいな存在 … そんな人に監修していただけて、私自身もとても勉強になりましたし、読者の皆さんにお届
JavaScriptから見たCSS。CSSを学ぶという事。（CSS おれおれ Advent Calendar 2012 – 24日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に！ JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！ というお話です。 なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！） あ、あとSVGやらも範囲外です。 断定的に申していても、常々例外はあるものです。 JavaScriptで出来る事、出来ない事 JavaScriptそれ自体が出来る事は、あ
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper - かちびと.net
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライドさせる、など色々と応用が利きます。 時間が無いので使い方は割愛。元サイトに詳しく書かれているので問題ないかと思います。以下よりどうぞ。 Swiper
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine - かちびと.net
CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。 CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。 ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。 img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; } img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.pn
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネント
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
jQueryで使えるけどCSSでは使えないセレクター。（CSS おれおれ Advent Calendar 2012 – 13日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 13日目 今日はちょいと視点を変えて見ました。 jQueryの特徴的な機能として「CSSのセレクターを使って要素を検索できる」というのがあります。 ただしjQueryでは独自に拡張してCSS本来のセレクターよりも強力だったりします。逆にjQueryを普段から使っていてたまにCSSを書こうとすると迷う場面もありそうです。 というわけで、jQueryが独自に拡張しているセレクター一覧です。（属性非同値セレクター以外は全部疑似セレクターですね。） 全般 [name!="value"] Attribute Not Equal Selector [name!=”value”] – jQuery API 属性が指定の値でないものを検索します。 .not('[name="value"]')の方が高速です。 意外とこれCSSにないんですよね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
成長を続けるTwitter Bootstrapのエコシステム
これぞ巧みの技！画像を一切使わずCSSだけで描いたアイコン集
GitHub's CSS Performance
http://www.css3generator.in/