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

  関連記事

【CSS】nth-childとnth-of-typeとfirst-childとfirst-of-typeの違い

いや~なまじjqueryをいじりまくっていたんで勘違いしてました。 nth-ch …

CSSで写真をテープで止めた様な装飾をしてみた

たまに見る、写真をセロテープで止めた感じの画像の見せ方。以前は画像でしたが、CS …

CSS3で写真風に装飾をするには!?

最近は、各ブラウザもCSS3に対応してきてるので割と装飾もCSS3でやってしまお …

【html5】videoタグで背景に動画を再生させる方法とは!?

動画を背景で再生させるとサイトがダイナミックになりますよね♪ 例えば下記のような …

CSS3で作る可変タイプのナビゲーション

さてさて、そろそろCSS3が普通に利用されてきてますね。なんてったてスマートフォ …

CSS3 Transitionでアニメーションさせてみる。

ここ最近CSS3だけでの表現力もすごくなってきたので、そろそろ見ておこうと思って …

【CSS】レスポンシブルで可変+固定レイアウトで組む

最近は、レスポンスWebが流行りそうというか話題になってるけど、デバイスが多すぎ …

CSS3のbox-ordinal-groupで順番を入れ替える

前回は主にフレックスボックスについてメモしたけども、基本的にはフレックスボックス …

【CSS】チェックボックスとテキストを水平にしたい

皆さん、フォームをマークアップするときにこんな経験ありませんか? フォームのラジ …

【CSS】画像をスマホ対応!!ウィンドウに合わせて自動で拡大・縮小させるには?!

ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも …