企業名

ホーム

企業のホームページへようこそ。

会社情報

会社の歴史やミッションについて紹介します。

サービス

提供しているサービスについて説明します。

お問い合わせ

お問い合わせ方法についての情報を提供します。

meta タグの役割
meta name="viewport"タグを使用して、ページがモバイルデバイスで正しく表示されるようにしています。
@media (min-width:600px)を使用して、600px以上の画面幅ではナビゲーションメニューが横並びになるようにしています。
header, nav, main, section, footerの要素を使用して、ページの基本的な構造を作成しています。
flex-directionを使用して、ナビゲーションメニューのレイアウトを変更しています。
position:fixedを使用して、フッターが常に画面下部に固定されるようにしています。
この例では、CSSメディアクエリを使用して、画面幅に応じてナビゲーションメニューのレイアウトを変更しています。スマートフォンなどの小さい画面では、ナビゲーションメニューは縦に表示され、タブレットやデスクトップなどの大きい画面では横に表示されるようになっています。これにより、モバイルフレンドリーな1カラムレイアウトが実現されます。