個別記事のページです

2015年9月 9日(水)
このエントリーをはてなブックマークに追加

トップページ冒頭にボタンを追加するときの注意点

トップページの冒頭には、ユーザーの関心を掴むイメージが配置されます。
ただし、ここはページの他の部分と異なり、「ある程度ブラウザ幅の変化に対応できる」必要があります。

そこにボタンを配置する場合、可変する部分・しない部分を把握してコーディングしなければなりません。
このような部分を頻繁に使う可能性が高いのでまとめました。

イメージはこのような感じになります。
divbg03.jpg
簡略図はこのような感じになります。
divbg01.png
基本的に背景に使用するのは一枚の画像で、リピートする必要のないものを想定しています。

コーディングのときはdivが重要になるので、位置関係と最低限必要な設定をまとめました。

divbg02.png
ポイントは必ず「ボタン用画像」と同じサイズのdivを用意し、その中にボタン画像を配置することです。
paddingによる位置関係は、全てdivに対して設定します。
aタグにpaddingで位置関係を指定すると、paddingの余白もボタンとして認識されてしまい、
見た目は空白の位置でボタンがクリックできることになってしまいます。

divでひと手間かける方法が、結果として効率的なパターンです。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ