Excluded Ad Placement for Responsive Design
04/09/14 · Penarth, Wales · The two most important features for selling web advertising are size and placement. Sure, there are tons of other factors, but for your everyday digital ad, “How big?” and “How high up the page?” are major selling points. Over the last few years, though, responsive design has done its best to make these agreements murky as hell for advertisers and content makers. Size a
段落内に広告を突っ込むテクニック
CSSのfloatプロパティーを使うと段落等を回り込ませることができる。これをうまく使うと段落の途中でぶった切って広告を押し付けられることをExcluded Ad Placement for Responsive Designという記事を読んで知った。よく考えればその通りなんだけど、最初どうなってるのか全然わからなかった。 広告に対して段落は回りこみをしようとするけど、広告が画面を占領しているので回り込みをするスペースがない。そこで広告の位置を広告の親要素に対し同じ方向にfloatさせた擬似要素を挿入して調節するようにし、この擬似要素に対してネガティブ・マージンを使うことで、広告の上に回りこみをするスペースを作ってやる。簡単に言うとこんな感じ。 狭い画面では広告の効果を高めるために位置を画面に対して固定することが多いけど、それだと貴重な画面を浪費し続けるので、ユーザーに強いフラストレーショ
1/5くらい欠けた円を回す
新しいApple Storeアプリで使われてるローディング・アイコンをCSSで模したもの。たまにこういうものを作ると、自分が新たなCSSテクニックを学ぶことに貪欲でないことを再認識させられる。 Demo: Apple Store App Loading Icon .loading { border: 1px solid #797673; border-radius: 51%; position: relative; width: 2rem; height: 2rem; background-color: #fff; animation-duration: 1s linear infinite spin; } .loading::before { display: block; position: absolute; width: 50%; height: 50%; content: "";
@importの文法 - Weblog - Hail2u.net
@importでは何の気なしにurl()を使わず書いていたんだけど、どんな時もそれで良いのかよく知らなかった。どうやら文字列で書くとそれをurl()で括ったように解釈してくれると仕様で決められているようだ。 ということで以下の7パターンはすべて同じように解釈される。 @import url(foo.css); @import url("foo.css"); @import url('foo.css'); @import "foo.css"; @import 'foo.css'; @import"foo.css"; @import'foo.css'; CSSWringではurl()を外して二重引用符に統一し、直後の空白を削除することにした。 @import絡みではもうひとつちょっとよくわからないところがあって、@importだけのCSSの場合に最後のセミコロンが必要なのかどうかという点。現状
CSSの簡略プロパティー - Weblog - Hail2u.net
CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCSS Shorthand Generatorの内部で使われているshrthndパッケージはまさに機械的に処理するためのもの。でも予想通り、全然ちゃんと機能するものではなかった。 例えばshrthndパッケージでは複数のfont-*プロパティーをまとめることができることになっている。 .test { font-family: serif; font-size: 1.5em; } このように書くと、以下
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
IT用語辞典バイナリ - Weblio コンピュータ
コンピュータやインターネットに関する専門用語や製品などについて解説しています。 提供 IT用語辞典バイナリ
背景画像の拡大・縮小 → background-size ! - シンプルシンプルデザイン CSS
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
[CSS]floatを利用せずにdisplay:inline-blockで要素を横並びにする方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」
<style> .navi { width:100%; margin:0 auto } .navi li { float:left; border:1px solid #ccc; padding:5px 10px; text-align:center } </style> <ul class="navi clearfix"> <li><a href="#">リスト1</a></li> <li><a href="#">リスト2</a></li> <li><a href="#">リスト3</a></li> <li><a href="#">リスト4</a></li> <li><a href="#">リスト5</a></li> <li><a href="#">リスト6</a></li> <li><a href="#">リスト7</a></li> <li><a href="#">ちょっと<br />
![[CSS]floatを利用せずにdisplay:inline-blockで要素を横並びにする方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/15d125662bc51398d6aab060f35e2d7968c6e9d0/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2019%2F05%2F4570799.jpg)
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
スタイル・リポジトリ
10年以上HTMLやCSSを書いてきた中で他の人達の書いたHTMLやCSS、そしてJavaScriptから僕が学んだものは少なくありません。というより全てをそれから学んだと言っても良いでしょう。Max CSSに書かれている意見には大いに賛成することができますし、ホワイトスペースとコメントを取り除いて圧縮されたCSSから得られるものがほとんどないことにも同意できます。 しかし、今私達に必要なのは圧縮されていないCSSのコードだけなのでしょうか？ 僕はそうは思いません。「このWebサイトのこのデザインはどう実現してるんだろう？」という疑問に対する答えは確かにCSSコードを見ればわかりますが、そのデザインに隠された制作者の意図やその歴史を知ることはできません。CSSコードは「どういう機能を持つものなのか」についてのみ語り、「どうしてこうしたのか」については解説していません。コメントで追加される情
クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ
2012 年の 4月に CR(勧告候補) になった，CSS Image Values and Replaced Content Module Level 3 とそこで規定されてる，Linear Gradients: the ‘linear-gradient()’ notation の幾つかのブラウザでの対応具合が面倒な事になってるなぁってお話． 経緯とか 最初期 もともと，グラデーションだーと提案された頃には，WebKit の独自実装としてこんな感じの書式だった．(cf. Introducing CSS Gradients) background: -webkit-gradient(linear, left top /* 始点 */, left bottom /* 終点 */, from(#000) /* 始点の色 */, to(#FFF) /* 終点の色 */); 途中にもっと色を挟むと
ルビを振るには - CSS小技集
HTML5 でマークアップされたルビを、CSS 第二水準第一改訂版(CSS 2.1)の範囲だけで実現する方法を考えてみましょう。 この記事では、最も単純なルビの振り方のみを解説しております。 HTML5 で上下に二つのルビを振ったり、一文字毎にルビを振るなどの複雑なルビを実現する方法はHTML5 でのルビのスタイルをご覧下さい。 まずはじめに。 HTML5 では、ルビを実現するため、以下のルビ関連要素を定義しております。 <ruby>要素…ルビ付きテキスト <rt>要素…ルビテキスト <rp>要素…ルビ非対応環境向けのルビを囲む括弧類 W3C が勧告している規格では、他にも幾つかの要素が定義されておりますが、最も単純なルビ付きテキストであれば、上記の三要素だけでマークアップが出来ます。 HTML5 以外でも、XHTML 1.1 にはルビモジュールが定義されており、最も単純なルビテキストであ
Firefox Nightly が position: sticky; に対応
Firefox Nightly で position: sticky; がサポートされたので紹介。指定することで特定の要素を相対位置に固定表示することが可能です。 ちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。 今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabled を true にすることで試すことができます。 h2 {position: sticky} ： Air Mozilla Sticky Positioning position: sticky; とは 簡単にいってしまえば、position プロパティの値と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2013/12/03/6983/
NameBright - Coming Soon
| こくみこのダメブロで…ざす！
Ultimate CSS Gradient Generator from ColorZilla