CSSによるWeb訪問履歴の漏洩に具体的対策、楽天ad4Uなど無効化へ
Mozillaは、CSSを利用することで利用者の訪問履歴が漏洩する可能性のあるWebブラウザの機能を改善することを明らかにしました。これは、楽天ad4Uのような、CSSやJavaScriptを用いて利用者の履歴を取得しているインターネット広告への対策として考えられたものです。 利便性のための機能から訪問履歴が漏洩 Webブラウザ上のリンクは、訪問したことのあるリンク先に対して色や文字の大きさなどのスタイルを変更することができます。これは、Webブラウザの画面上でどのリンクが訪問済みなのかを知らせるための、ユーザーの利便性を想定して作られた機能です。 しかし一部のインターネット広告では、これを利用して広告の中に大量のリンクを埋め込み、そのリンクの中から訪問済みのスタイルになっているリンクを自動的に探しだすことでユーザーの訪問履歴を取得。履歴情報をいわゆる行動ターゲティング広告の手段としている
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集:phpspot開発日誌
Dynamic Drive CSS Library- CSS Oval buttons These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible oval shaped CSS buttons, similar to CSS Square Buttons. CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集。 次のようなボタンのＣＳＳとＨＴＭＬが公開されています。 マウスオーバーでホバーします。 マークアップは次のように、div と a , span タグを併用 <div class="buttonwrapper"> <a class="ovalbutton" hre
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
てっく煮ブログ - CSS をリニューアルするときに参考にしたいページ
css今回の CSS リニューアルでネタ出しに使ったサイトをまとめておきます。83個のきれいな Wordpress のテーマ集：83 Beautiful Wordpress Themes You (Probably) Haven’t Seen絶対見ておくべき30個の暗めのサイト：30 Dark Designs You Should've SeenCSS による最近のフッターデザイン：CSS-Based Footers: Modern SolutionsCSS による 2006 年の美しいサイト50選：50 Beautiful CSS-Based Web-Designs in 200653個の必須 CSS テクニック53選：CSS-Techniques You Couldn’t Live Withoutかっこいいデザインのサイトがサムネールつきでいっぱいなので、煮詰まったときに見るといろいろ
pruto.jp - よく使うCSSの話|基本編
2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。 どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。 はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。 色々あるからまずは基本となるところから。 仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。 自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
CSSテンプレート配布サイト色々:phpspot開発日誌
ページ作成の際に何かと役立つCSSテンプレート集。 便利なので、色々なサイトがテンプレートを配布してくれてます。 色々あるのでまとめてみました。 次は、過去に紹介したサイトの本ブログでの紹介エントリ CSSレイアウトのサンプル集 フリーのCSSデザインテンプレート集「Free Css Templates」 ValidなCSS/XHTMLテンプレート集 CSS+XHTMLのテンプレート集:css tinderbox そして、今回発見したサイト。 2カラム、3カラムレイアウトのサンプルが公開されてます。RSS配信によって新着テンプレート情報も得られます。 Dynamic Drive CSS Layouts- Tableless, CSS based templates 今後は、こういったサイトを発展させて、オンラインである程度デザインが完了してしまうようなサイトがあったら人気が出そうですね。
using CSS1 with HTML
PR:日本留學情報網 taiwan2japan 從台灣向日本 2003年3月23日 ISBN4-7741-0622-4 C3055、1980円+税、技術評論社。1998年。 拙著［スタイルシートWebデザイン］の元データ。以下の条件で利用・活用してください。 そのまえに説明がきを。 ●なぜ公開するか 出版から5年たってほとぼりが冷めたため。無事に絶版になりましたし。 ●心残りメモ 私は担当編集者に次のようにお願いを出した。 紹介するCSSデザイン例は、わたしが考えると貧困だから、 プロのブックデザイナーが起こしたものを（画像要素つきで） 私にくれないだろか。CSSへの翻訳は私が行います。 基礎部分の説明図版は、仮原案として私が描くので、 それをプロが起こしなおしてくださらないか。 結果はどちらもNGだった。 紙面には私が考えたつたないデザインサンプルが掲載され、 また私が作った図がそのまま
CSSでクールなタブUIを作成するサンプル:phpspot開発日誌
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
CSSオンリーでクールなグラフを書くサンプル集:phpspot開発日誌
Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height
Yahoo!が提供するレイアウト用CSSライブラリ:phpspot開発日誌
Yahoo! UI Library: Grids CSS Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates. Yahoo!が提供するYahoo! UI Library。 Javascriptだけのライブラリ、だと思っていたら最近になってCSSライブラリも含まれるようになりました。 このCSSライブラリを使うことで、ページの複雑なグリッドレイアウトが比較的容易に作れます。 更に、このライブラリで作ったページは大体のブラウザに対応しているというので動作確認の手間も省けそうです。 基本のHTMLを書いておけば、classの変更で簡単にレイアウト変更が可能な形に
GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
hail2u.net - Weblog - 二重枠線ボタン
どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ！」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。 doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。 僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。 borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。 フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかな
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
floatとpositionの使い分け
てんぽ: floatとpositionの使い分け CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。 条件としては以下のような感じ。 HTMLの記述順は「（ヘッダ→）記事→サイドバー（→フッタ）」を守る 記事領域とサイドバーの長さはページによって異なる（どちらが長くなるかわからない） サイドバーとフッタの文字が重なる、とかは駄目 floatとpositionの違いは、「floatは下方向に融通が利く」のに対し、「positionは上方向に融通が利く」といえます。 何のことかさっぱりわからないと思いますが、つまりこういうことです。 フロートはソース上で
CSS記述規則「プロパティ別整理法」の提案 : akiyan.com
2005-03-06 はじめに 2005-03-05 提案の目的 2005-03-07 必須ツール 2005-03-06 注意点 2005-03-11 多くのCSSは図書館方式で整理されている 2005-03-06 図書館方式の例 2005-03-07 図書館方式の利点 2005-03-11 図書館方式の欠点 2005-03-04 図書館方式の何が不満か 2005-03-06 プロパティ別整理法とは 2005-03-04 絶対規則 2005-03-04 推奨規則 2005-03-06 プロパティ別整理法の例 2005-03-11 プロパティ別整理法の利点 2005-03-04 プロパティ別整理法の欠点 2005-03-04 プロパティ別整理法に近い例 2005-03-04 機械との親和性 2005-03-04 Grep検索を活用する 2005-03-04 機械が完全に理解できる 2005-
WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン：Goodpic
This shop will be powered by Are you the store owner? Log in here
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
