【初心者・未経験向け】ITエンジニアのポートフォリオを作ってみよう-CSS編　innerとレスポンシブデザイン-

前回までに構築したITエンジニアのポートフォリオのHTMLを活かしてreset .cssを実装していきました。今回の記事では、ウェブデザインにおける「inner」の役割と、それがレスポンシブデザインの実装にどのように役立つかを解説します。

innerの役割

HTML構造の中で「inner」とは、特定のコンテンツブロックやデザイン要素を囲むために使用されるwrapper（包み込む要素）です。例えば、あなたの自己紹介セクションやプロジェクト一覧がこれに該当します。これらのセクションを明確に区分することで、サイトの構造が整理され、見た目が向上します。

<section id="about" class="inner">
  <!-- 自己紹介の内容 -->
</section>

この例では、<section> タグを使って自己紹介セクションを作成し、class="inner" を指定しています。これにより、CSSで特定のスタイリングを適用できるようになります。

CSSでinnerをスタイリングする

CSSでは、.inner クラスに対して以下のようなスタイルを適用できます。

.inner { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9fa; }

コードをコピーする

これにより、innerクラスが適用されたセクションは中央に配置され、最大幅が800pxに設定されます。paddingと背景色も追加され、コンテンツがより際立ちます。

レスポンシブデザインとの結びつき

レスポンシブデザインは、デバイスの画面サイズに応じてサイトのレイアウトが変化するデザイン手法です。innerクラスを使うことで、異なるデバイスでの表示調整が容易になります。例えば、以下のメディアクエリを使うことで、画面の幅が小さいデバイスに対応することができます。

@media (max-width: 600px) { .inner { padding: 10px; max-width: 100%; } }

このコードは、画面の幅が600px以下の場合に、innerクラスのpaddingを減らし、最大幅を100%に設定します。これにより、小さな画面でもコンテンツが適切に表示され、ユーザー体験が向上します。

まとめ

innerクラスの活用とレスポンシブデザインの組み合わせを解説しました！これにより、あらゆるデバイスで美しく機能的なポートフォリオサイトを設計することが可能になります。実際にコードを書きながら、試してみてください！

次回も、さらに役立つ情報を提供することを楽しみにしています！