HaramizuTwitter@haramizu作成をしたヘッダーに対して、スタイルシートで見た目をもう少し整えていきたいと思います。レイアウトの表示するコンポーネントは画面で設計する際に利用し、スタイルシートを変更してみための調整ができる、というのを今回は紹介します。メニューの見た目を変更するまず最初にメニューは標準の機能で提供しているコンポーネントで配置しているため、ドロップダウンボックスが提供されているだけ、という形になっています。スタイルシートをこのコンポーネントに対して適用します。チェックしてください。適用をするとメニューが少し上にずれて表示されてしまいます。定義が追加されている形です。この中で、以下のコードが記載されています。なっているため上にずれて表示されていることになります。変更をすると以下の様に画面がすぐに切り替わります。スタイルを制御したいと思います。トップレベルのメニューの英語に関しては全て大文字での表示にする定義を追加します。対して、大文字にするコードを追加します。}}モバイル向けのナビゲーションを追加する上記のスタイルを変更しておくことで、簡単にバーガーメニューを実装することができます。目のコンテナの一番右の部分をにナビゲーションを追加する形となります。手順としては、以下の通りです。:コンテナを一度表示するナビゲーションコンポーネントを配置するスタイルを設定するコンテナを表示しない形に戻すこれでモバイル向けのメニューも追加することができました。実際にウインドウのサイズを変更している際の動きは以下の様になります。まとめ最後に少しだけスタイルシートを操作しました。スタイルシートに関しては慣れればここを変えれば変更できる、というのがわかる様になります。慣れていれば簡単に変更できる仕組みです。