【STUDIO】固定ヘッダーを作る方法

こんにちは。認定クリエイターの martina. です！
さて、今回はスクロールしてもついてくる固定ヘッダーを解説します。
面倒くさい人向けに 5 秒で作るやり方があるので、そちらもぜひ使ってください！

ヘッダー部分を作ろう！

この項目の全体像は以下の通りです。

では順番に解説します！

1. ヘッダーの表示範囲を決める

まずはヘッダー部分になるボックスを配置しましょう。最上部にボックスを配置して、ボックスの横幅は 100 %にします。縦幅はご自由にどうぞ。

2. ヘッダーの表示を固定する

まずはヘッダー部分になるボックスを配置しましょう。最上部にボックスを配置して、ボックスの横幅は 100 %にします。縦幅はご自由にどうぞ。

2. ヘッダーの表示を固定する

そして、ボックスの両サイドを 30 くらい、パディングします。すると、パディングがされている範囲が緑色になります。

POINT

このパディング（緑）というのはボックスの中にスペースをつくるもので、これによってボックスの両端にスペースが生まれて、窮屈な印象がなくなります。

対して、マージン（オレンジ）というのは、ボックスの外側にスペースをつくるものです。

今はヘッダーを作っているので、横幅いっぱいにボックスがあります。そのため、パディングを取るのが適切となります。

ヘッダーの中身を作ろう！

今回は左端にロゴなどの画像、右端にテキストを作る形にしたいと思います。

このような流れで解説していきます！

1. 画像とテキストを配置

まずは、画像とボックスを置きましょう。縦幅は 100 %、横幅はいつでも変えられるので好きなサイズにしましょう。

2. 配置を調整

そうしたら、配置の向き（矢印）を右向き、置き方を両端に置くように設定します。
これで左の画像の方にアイコンなどを設定し、右のボックスの中にメニュー項目を加えていくことになります。

ヘッダーの項目を作ろう！

最後にヘッダーの項目を設定しましょう。

上記の流れで解説します。

1. テキストをマージンを取って配置

では、右側のヘッダーの項目にテキストを入れていきましょう。

上の GIF のようにそのままテキストをいれると、少し窮屈な印象がありますよね。
そこで、テキストボックスにマージンを使います。

テキストのボックスのマージンを両サイドに 10 ほど取り、コピーアンドペーストすることで、すこしゆとりのある印象になりました。

2. テキストを編集

あとは、テキストの親ボックスを透過させたり、ヘッダー部分の親ボックスの透過具合を調整したり、テキストのフォントや色や大きさなど自分の気に入るデザインにしてみてください。
テキストや画像の編集については過去の投稿で解説しているので、そちらも参考にしてみてください。

面倒くさい人向け

前回のカードタイプ同様、アドパネルの Header の中にテンプレートがあるので、気に入ったものをクリックすることでヘッダーがすぐに作れます！一瞬です！！

まとめ

今回は、パディングやマージンなど新しい操作を覚えながら、固定ヘッダーを作ってみました。

またヘッダーのボックスを作って、右側のボックスにテキストをまとめているなど、ボックスのレイヤー構造にも慣れてきましたね。

こうした基本を覚えれば、自分だけの web サイトがサクサク作れるようになるので、ぜひみなさんも素敵な web サイトを作ってみてください！

最速で学びたい方：キカガクの長期コースがおすすめ

キカガクの長期コースはプログラミング経験ゼロの初学者が最先端技術を使いこなすAIエンジニアになるためのサポート体制が整っています！

実際に未経験からの転職・キャリアアップに続々と成功中です

まずは無料説明会で、キカガクのサポート体制を確認しにきてください！

話を聞いてみる

説明会ではこんなことをお話します！

• 国も企業も育成に力を入れている先端 IT 人材とは
• キカガクの研修実績
• 長期コースでの学び方、できるようになること
• 料金・給付金について
• 質疑応答

まずは無料で学びたい方： Python&機械学習入門コースがおすすめこちら

AI・機械学習を学び始めるならまずはここから！経産省の Web サイトでも紹介されているわかりやすいと評判の Python&機械学習入門コースが無料で受けられます！
さらにステップアップした脱ブラックボックスコースや、IT パスポートをはじめとした資格取得を目指すコースもなんと無料です！

無料で学ぶ