仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな?
という場面で好きな画像サイズを即配置できる便利サイト。

http://placehold.it/


<img src="http://placehold.it/350x150">

という感じですぐできるので便利!

AdSenseのバナーサイズ一覧

  • 300 x 250 レクタングル(中)
  • 336 x 280 レクタングル(大)
  • 728 x 90 ビッグバナー
  • 160 x 600 ワイド スカイスクレイパー
  • 468 x 60 バナー
  • 234 x 60 ハーフバナー
  • 120 x 600 スカイスクレイパー
  • 120 x 240 縦長バナー
  • 300 x 600 スカイスクレイパー(大)
  • 970 x 90 ラージ ビッグバナー
  • 250 x 250 スクエア
  • 200 x 200 スクエア(小)
  • 180 x 150 レクタングル(小)
  • 125 x 125 ボタン
  • 320 x 50 モバイル ビッグバナー

関連トピック

Lined

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

css-shadow

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

font-family

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

css

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

breakpoint

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

公開日:2013/10/30