個別記事のページです

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

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

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

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

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

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

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