CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで実現するレスポンシブグリッドビューの作り方【サンプルコード付き】

レスポンシブグリッドビューとは、デバイスの画面サイズに応じてレイアウトが自動的に調整されるグリッド構造のことです。CSSの「box-sizing」や「float」といったプロパティを組み合わせることで、デスクトップからスマートフォンまで、さまざまな環境で見やすいページを手軽に構築できます。

レスポンシブグリッドビューの実装例

以下のコードを実行すると、ヘッダー・左側メニュー・メインコンテンツで構成されたレスポンシブなグリッドビューが表示されます。左メニューは幅30%、コンテンツは幅70%に設定し、floatによって横並びに配置しているのが特徴です。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <style>
         * {
            box-sizing: border-box;
         }
         .header {
            border: 1px solid black;
            padding: 10px;
         }
         .leftmenu {
            width: 30%;
            float: left;
            padding: 10px;
            border: 1px solid black;
         }
         .content {
            width: 70%;
            float: left;
            padding: 10px;
            border: 2px dotted black;
         }
      </style>
   </head>
   <body>
      <div class = "header">
         <h1>Header</h1>
      </div>
      <div class = "leftmenu">
         <ul>
            <li>Menu One</li>
            <li>Menu Two</li>
            <li>Menu Three</li>
            <li>Menu Four</li>
            <li>Menu Five</li>
            <li>Menu Six</li>
            <li>Menu Seven</li>
            <li>Menu Eight</li>
            <li>Menu Nine</li>
            <li>Menu Ten</li>
         </ul>
      </div>
      <div class = "content">
         <h1>Demo</h1>
         <p>This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text.
         </p>
      </div>
   </body>
</html>

コードのポイント解説

  • viewportメタタグの設定： スマートフォンやタブレットで適切な幅・倍率で表示させるために必須の設定です。
  • box-sizing: border-box： パディングやボーダーを含めて要素の幅を計算するため、カラム落ちなどのレイアウト崩れを防げます。
  • floatによる2カラムレイアウト： 幅30%のメニューと幅70%のコンテンツを左右に並べる、シンプルで定番的な手法です。

この基本形をベースに、メディアクエリを追加すれば、画面幅に応じてメニューを縦積みに切り替えるなど、より柔軟なレスポンシブ対応も可能になります。

  1. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負

  2. CSSでレスポンシブなノックアウトテキスト（切り抜き文字）を作成する方法

    CSSを使えば、背景画像の上に文字が「切り抜かれた」ように見えるノックアウトテキスト（カットアウトテキスト）を簡単に実装できます。この記事では、mix-blend-modeプロパティを活用したレスポンシブ対応のノックアウトテキストの作成方法を、実際のコード例とともに解説します。ノックアウトテキストとは？ノックアウトテキストとは、背景画像の一部が文字の形に透けて見えるデザイン手法のことです。大きなタイポグラフィと写真を組み合わせることで、視覚的にインパクトのある演出が可能になります。CSSのmix-blend-modeを使うことで、JavaScriptや画像編集ソフトに頼らず、HTMLとCSSだ