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のセレクターで属性チェックする

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

【CSS】text-overflowで長い文章を「・・・」で省略する方法は?

ボックスからはみ出した文章が下に回りこむとボックス要素の高さが変わったりして嫌だ …

[CSS]スマホ制作で大活躍!?table-cellで要素を横並びに配置する方法

前回、要素を横並びにするのに inline-block を使ったんですが、なんと …

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

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

【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは!?

このブログでも、何回か記事にした事もあるCSS3のFlexboxについての記事で …

css3から追加された新しい単位「rem」でのフォントサイズ調整が便利

cssでフォントサイズを決めていくときよく「%」とか指定しくこともあると思うけど …

【CSS3】新しいプロパティで要素を上下中央に配置する方法!!

ここ最近は、CSS3もだいぶ使えるような環境が整ってきたのですが、少し要素を上下 …

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

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

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

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

【CSS】CSSで行ごとに背景色を交互に変更するには?

結構、新着情報などの背景色を交互に表示して行ごとに分かりやすくしているサイトを見 …