当ページのリンクには広告が含まれている場合があります。Materialに便利なコンポーネントがあるんです!それを使えば初心者でも簡単にヘッダーを実装することができますよ。Materialでヘッダーを実装する方法についてご紹介しますね。本記事の環境は以下の通りです。Materialでヘッダーを実装する際は、mat-toolbarを使います。mat-toolbarという専用のタグを使用するのです。それでは、早速ヘッダーを追加していきましょう!app.module.tsまずは、app.module.tsに以下を追加します。}app.component.html次にHTML側に以下を追加します。表示を確認してみましょう。以下のように表示されていれば成功です。簡単でしたね!お疲れ様でした!ヘッダーの行を増やす方法さて、ヘッダーの実装方法をご紹介しましたが、実はこのヘッダーは行を増やすことができます。ヘッダーを2重、3重にすることができるのです。</mat-toolbar-row></mat-toolbar>ヘッダー2重の場合の表示確認すると、以下のように表示されます。確かに2重になっていますね!うまく使えば、メインのヘッダーとサブのヘッダーという感じに分けてデザインできそうです。Materialでヘッダーを実装する方法についてご紹介しました。Materialでヘッダーを実装する際には「mat-toolbar」を使う「mat-toolbar」は重ねることができる今回はここまでです。