XDでスクロールに固定できるヘッダーの作成方法を紹介します。づみやり方はすんごい簡単なので、ササッと解説していきますね。【まとめ】XDでヘッダーを固定するにはチェックボックスをONにするだけXDでスクロール中も追従するヘッダーを作成する早速下記の手順に沿ってやっていきましょう。事前に任意のXDファイルを用意しておいてください。固定したいヘッダーを作成まずは固定したいヘッダーを作成しましょう。ヘッダーを作成できたら、全てまとめてグループ化しておきます。ヘッダーは最前面にしておく固定ヘッダーは最前面に設定しておきましょう。ないとスクロール時に他要素の下に回ります。「スクロール時に位置を固定」のチェックボックスにチェックヘッダーを選択状態にして、画面右サイドバーにある「スクロール時に位置を固定」のチェックボックスにチェックを入れます。これだけ!!ヘッダーはわかりやすくするため赤色に変更しました。プレビューで確認してみるとこんな感じでヘッダーが固定されているのがわかるかと思います。応用編:ファーストビューとスクロール中のヘッダーを置き換えたい場合たまに↑のようなでっかいヘッダーってあると思うんですが、これを固定で動かすとでかすぎるので、もう1個スクロール用のヘッダーを用意することがあります。それすらもXDで再現してしまおうということで、やっていきましょうっ!固定用のヘッダーとファーストビュー表示用のヘッダーを作成というわけで、ヘッダーを2つ用意します。ひとつは固定用、もう一つは最初だけ表示する用、ですね。作ったら、例に習ってどちらもグループ化しておきましょう。ポイントはレイヤーの重ね順です。ファーストビュー表示用のヘッダーを最前面、固定ヘッダーはその下になるようにしましょう。固定ヘッダーコンテンツこの並び順です。固定ヘッダーだけチェックボックスを追加あとは先程と同じように固定ヘッダーだけチェックボックスを入れて完成です。イメージはこんな感じ。【まとめ】XDでヘッダーを固定するにはチェックボックスをONにするだけというわけで、XDで固定ヘッダーを作成する方法をご紹介しました。XDでWebにほぼ近いデザインを再現できればクライアントも幸せ、自分もハッピーです。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【サクッと実践】gulp-ejsを使ってEJSをコンパイルする...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。