個別記事のページです

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

スマホでヘッダーを上部に固定する

スマートフォン用のページにて、メニューに飛びやすいように
ヘッダーを上部に固定する方法をご紹介します。難しそうですが、とても簡単です。

htmlのソースコード
コード.png

CSSのコード
下記のように、固定させたい要素をpositionでfixedで固定することができます。
CSS.png
fixedを指定することでtopで位置を決められるので0を指定して左上に固定します。

また、ヘッダーの下に設定してある要素が下に隠れて重なってしまうので、
固定したヘッダー分の高さをmargin-topで確保する必要があります。(div#mainの部分)

これで完了です。スマホページ作成の際に役立つと思いますのでぜひご活用ください!
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

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