Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【CSS】スマホでヘッダー部分を固定させるには!?

      2015/02/19

最近は、スマホサイトやらレスポンシブやらばっかですね(笑)。とまぁそんなこんなで最近はスマホでもヘッダー部分が固定されているサイトを見かけたりします。

個人的には思ったりするんですが、検索でひっかかるとランディングページって長いページってこともあり、そーすると下までスクロールした後に別のページに移動したいときとか、わざわざ上までスクロールするのが以外に面倒だったりします。(笑)

なので、まぁヘッダーを固定させればユーザーも遷移しやすいよね~と思ったので、ヘッダーを固定させること自体はCSSで出来るので、一応メモしておこう。ただトップへ戻るボタン配置したり、もちろん手段はいろいろあるんですがそれは置いておきます。

メニューを固定させるソースコード

そんな難しいことでもないので、簡単にhtmlとCSSのソースコードを張っておきます。

htmlのソースコード

CSSのソースコード

下記のように固定させたい要素をpositionでfixedで固定することができます。

fixedを指定することでtopとleftプロパティで位置を決められるので0を指定して左上に固定します。

しかし上記のよう設定すると、その下に設定してあるコンテンツが下に隠れて重なってる状態になってしまうので、固定したヘッダー分の高さを確保してやる必要があります。

こうしておけばコンテンツが隠れないで済みます。

対応ブラウザについて

対応ブラウザはiphoneの場合はiOS4以前とAndroid2.3.x以前のブラウザには対応していないみたいですね。

 - css

     

Message

  関連記事

【CSS3】border-radiusを利用して画像を丸く表示してみる

ここ最近はブラウザのバージョンも上がってきたし、IEのシェアも減ってきたので嬉し …

【CSS】ブロック要素の右寄せ

ブロック要素のセンター揃えは、まぁ分かりますが、今更ながら右寄せってどうやるんだ …

【CSS】CSS filterプロパティによる画像エフェクトを試してみた!

先日、FIRE FOXのブラウザのBeta 35が発表されました。 CSS fi …

iphoneのUIのようなボタンをCSS3を使用して作ってみた。

CSS3なども使用して、iphoneの設定画面のようなインターフェースみたいなデ …

CSSでヘッダーを固定した場合のアンカーリンクの位置を調整する

ある案件でトップページからアンカーリンクで別ページに飛ばした時に気づいた。あれ? …

CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

【CSS】画像の横のテキストを中央に配置するには

よく画像の真横にテキストを配置するときにわざわざCSSでfloatさせて・・・な …

CSS3のセレクターで属性チェックする

css3のセレクターで気になったものをメモる。 ただ普段jqueryを使っている …

フッター要素を常に下付きにしたい

案件にて、フッター要素を下付きにしたいということで調べてみたのでメモ。 案件にも …

【CSS】横並びにしたリストをを右寄せにするには

よく横並びにしたテキストのリストになっているナビゲーションを見ますが、サイトの右 …