WEBサイト 作り方。
CSSだけでできるよ。
こんにちは、「ふ」です。
最近のwebページなどではよく見かけるようになりました、画面をスクロールしてもヘッダ部分だけが画面に残って表示される仕組み。
これ、実はCSSだけで簡単に実装することができます。
今回は固定ヘッダーを一緒に作っていきましょう。
ヘッダーパーツを準備。
ヘッダーに載せたいロゴ画像などを準備します。
logo.png
今回はillustratorでPNG画像を作ってみました。勿論、テキストでも構いません。 ちなみにデザインされたフォントを貼りたいときには、Google Fontsからダウンロードすると便利です⬇︎。
Google Fontsを使って統一されたフォントを表示。
用意した画像やテキストを固定用の<div>〜</div>の中に貼り付けます。
HTML
CSS
CSSについてですが、responsive対応のために高さは相対値（今回はem）で指定した方がいいでしょう。でないとスマホで表示したときにバカでかいヘッダーになってしまいます。
ではプレビューしてみましょう。
ブラウザ
おや、画面上部に少し空白ができてしまっています。これだと画面をスクロールさせたとき、ヘッダーの上部からも本文が覗いてしまいます。
Chromeの開発ツールで余白の状態を確認してみましょう。
body要素自体にデフォルトでmargin-topが指定されていたみたいですね。
CSSを修正します。
CSS
ブラウザ
これでヘッダーが画面上ぴったりにくっつきました。
position:fixed。
スクロールさせるべき本文も追加しましょう。本文全体を<div>〜</div>で囲んでおきます。
見出し
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本・・・ 「「３〜以下略。」」
ブラウザ
この状態ではまだ、下へスクロールさせるとヘッダーは画面外に消えてしまいます。ヘッダーを固定させるには、positionプロパティをfixedに指定します。
CSS
ブラウザ
これでヘッダーは固定されましたが、その後ろに「本文」の上の部分が隠れてしまいました。 「本文」のpadding-topをヘッダーの高さの分だけ取りましょう。たしか「4em」に設定していましたよね。
CSS
ブラウザ
これで完成です。「本文」も全体が表示され、ヘッダー固定のままスクロールさせることができます。
もっと便利なCSSがあった。
新しく登場したpositionプロパティの値として、「sticky」というものがあるのでちょっと使ってみましょう。
CSS
ヘッダーのpositionプロパティを「sticky」に変更。その場合、bodyからの配置位置を「0」に指定してやります。
また、本文はpadding-topをとる必要がなくなるのでコメントアウトさせておきましょう。
ブラウザ
おお、これを使うと本文のpadding調整も必要なく、さらに簡単に固定ヘッダーが実装できました。
「sticky」とは「粘着」という意味だそうです。
relative（相対位置指定）やabsolute（絶対位置指定）とは別に「粘着位置指定 」というものに分類されます。
そうすると、例えば画面中央に粘着させてみるとか・・・本題から脱線しますがちょっとやってみますか。
CSS
ブラウザ
うざい。
余程デザイン性を推したい見開きページなどには使えるかもしれませんが、文章を読ませたいコンテンツではちょっと使いどころが・・
簡単でしたね。
いかがでしたか？固定ヘッダーはこのように簡単なCSSだけで実装することができます。今回はロゴ画像のみでやってみましたが、ここにメニューボタンなどを置けばユーザにとっても操作しやすくなりそうです。
ただ、画面上での固定スペースが広すぎると、特に小さい画面のスマートフォンでは本文スペースをとても圧迫してユーザをイライラさせてしまうので注意してください。
「ふ」は未だにiPone SEの４インチ画面でブラウジングしているのですが、特にサイズをpixelなどの絶対値で指定されたバナーが画面に割り込んでくると可視スペースが昔のガラケーほどになってしまうのだ・・
あ、個人的なお話になってしまいましたね。
再び脱線してしまいました。またお会いしましょう。
関連記事
Javascript：文字数を全角/半角別にカウントしてはみ出し処理。
ロリポップ！の取次店になりました。
JavaScript/CSS: 文字数オーバーしたときに「…」で表示する。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。