ホーム > 記事一覧 > 【中級者向け】CSS中級レベルを徹底解説｜Flexbox・Grid・疑似クラス応用

【中級者向け】CSS中級レベルを徹底解説｜Flexbox・Grid・疑似クラス応用

投稿日：2025/3/21

最終更新日：2025/3/21

CSSの基本的な書き方やプロパティを一通り学び、レイアウトや装飾ができるようになったものの、「思い通りに配置できない」「コードが複雑になってしまう。シンプルにしたい」と思ったことがあると思います。

CSSを中級レベルへとステップアップするためには、単にスタイルを指定するだけでなく、レイアウトの仕組みや再利用性、保守性を意識した書き方を理解することが重要です。

今回の記事では、CSS中級者の方に向けて、Flexboxを使ったレイアウト手法、疑似クラスを活用したインタラクション表現など、（←後ほどこれらの言葉の意味を説明していきます。）実践的なテクニックを中心に解説します。

実際のWeb制作現場でもよく使われる知識を身につけることで、より柔軟で洗練されたデザインを実現できるようになります。

そんなCSS中級の書き方を1から解説していきます。

今回の記事では以下の項目について解説します。

Flexboxの扱い方と書き方
擬似クラス・擬似要素について
アニメーションやトランジション

Flexboxを用いたWebページ制作

Yama

今回は早速Webページを作っていきます。

そもそもflexboxとは要素の配置を考える上で必要となってくるツールです。この技術を手に入れることができると要素を綺麗に並べることができるので完成度が高いものを作るのに非常に助かります。

今回は実際のWebページを作っていきます。以下の画像がイメージ図です。

イメージ図

始める前にHTMLのファイルとCSSのファイルとこれらをまとめるフォルダを作成する必要があります。HTML初級で作った「テスト」フォルダがある場合はそれを使って頂いても可能です。

使うという場合、現在の「テスト」フォルダはこのようになっています。

必要なのはHTMLファイルとCSSファイルです。それ以外のファイルが入っていても問題はありません。

しかしHTMLやCSSファイルが複数あるという場合はHTMLとCSSを接続する際に間違わないように注意してください。

では実際のコードを用いて説明していきます。まずはHTMLファイルを作成していきましょう。

HTMLファイル


        <!DOCTYPE html>
        <html lang="ja">

        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Yamadaの自己紹介</title>
          <link rel="stylesheet" href="/template/style.css">
        </head>

        <body>
          <header>
            <h1>Yamadaの自己紹介</h1>
          </header>
          <main>
            <div class="introduction">
              <div class="myImage">

              ↓ここの画像は好きな画像か自身の画像を入れてみてください。
                <img src="./HTML5_Logo_256.png" alt="プロフィール画像">

                ↓ここには自身の名前を記述してください
                <h2>Yamada</h2>
              </div>
              <div class="description">
                <p>Yamadaと申します。中学までは剣道をしていて、高校からは卓球を始めました。</p>
              </div>
            </div>
            <div class="message">
              <h2>Yamadaの自己紹介をご覧いただきありがとうございます。</h2>
            </div>
          </main>
        </body>
        </html>

現在CSSはなしの状態です。よってLive Serverを起動させるとこうなります。

この後に解説でわかりやすくするために「border」をすべての要素に適応させます。 CSSのコードは以下のようになります。


      body{
        border: 1px black solid;
      }

      header{
        border: 1px black solid;
      } 

      main{
        border: 1px black solid;
      }

      .introduction{
        border: 1px black solid;
      }

      .myImage{
        border: 1px black solid;
      }

      .description{
        border: 1px black solid;
      }

      .message{
        border: 1px black solid;
      }

「border」適用後のWebページの様子がこちらです

では早速ここからWebページを完成させてきます。よーーく見たら外側に隙間があるのがわかります。

まずはこれを修正していきます。これは1番外側に配置されている要素が原因です。つまり今回の場合はbodyタグに変更を加える必要があります。 CSSファイルのbodyに以下のように変更を加えます。

                
        body{
          border: 1px black solid;
          margin: 0px;
        }

すると隙間が消えました！

Yama

細かいところを気にすることは開発において重要です

次は「header」部分に変更を加えていきます。「Yamadaの自己紹介」の部分を真ん中に持っていきましょう。 CSSファイルの「header」に以下の変更を加えます。

                
        header{
          border: 1px black solid;
          text-align: center;
        }

現状は以下のようになっているはずです。

では次に「自分の画像」と「自己紹介文」の部分に手を加えていきます。ここでFlexboxの出番です。まずFlexboxはどんなものであるかを触れていきましょう。 CSSファイルの「.introduction」に変更を加えていきます。

                
        .introduction{
          border: 1px black solid;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
        }

↑このコードの説明

「display」,「flex-direction」,「justify-content」と全てが繋がっている関係です。

「display」に「flex」を適用することで、「flex-direction」を設定することができます。

次に「flex-direction」では「縦に並べるか」または「横に並べるか」を決めることができます。今回はイメージ図のようにしたいので、横を意味する「row」を設定しました。

そして最後に「justify-content」は要素を横並びにした場合にどのような配置にしたいかを決めることができます。

Yama

イメージ図通りになってきました！

現状は以下のようになっているはずです。

だいぶイメージ図と近い配置になっています。より近づけるために、以下の変更を加えます。

対象は「.introduction」と「.myImage」と「.description」で、それぞれにwidthを設定します。

「.myImage」と「.description」をまとめている要素である「.introduction」に「width:100%;」を設定することで

「.myImage」と「.description」に「.introduction」に応じたwidthの%(パーセンテージ)を設定することができます。

それぞれを40%に変更しました。

                
        .introduction{
          border: 1px black solid;

          width: 100%;

          display: flex;
          flex-direction: row;
          justify-content: space-around;
        }

        .myImage{
          border: 1px black solid;

          width: 40%;
        }

        .description{
          border: 1px black solid;

          width: 40%;
        }

変更後のWebページがこちらです。配置がイメージ図と全く同じになりました。

次は「myImage」と「description」の部分にてを加えていきます。
両方に「text-align」を設定してあげるだけです。

                
        .myImage{
          border: 1px black solid;
          width: 40%;
          
          text-align: center;
        }


        .description{
          border: 1px black solid;
          width: 40%;

          text-align: center;
        }

現状がこちらです。

Yama

あと少しで完成です！！

次は「message」に変更を加えていきます。
これもまた「text-align」を設定するだけです。

                
        .message{
          border: 1px black solid;
          
          text-align: center;
        }

次に「header」の下の部分と「message」の上の部分にあるスペースを作っていきます。
それぞれのコードは以下のように変更します。

                
        header{
          border: 1px black solid;
          text-align: center;
          
          margin-bottom: 40px;
        } 
        .message{
          border: 1px black solid;
          
          text-align: center;
          margin-top: 40px;
        }

これでイメージ図とほぼ同じになりました。

自己紹介文が少なすぎるので増やすことと「自己紹介文」という言葉を足してみます。その結果、HTMLファイルの「description」は以下のようになります。その結果がこれです。

これで完成です。以上は超簡易Webページですので、デザインの面、つまり色合いなどで改善点があります。「background-color」を用いることで背景色を変えることができるので是非好きな色に変えてみてください。

Yama

完成です！！！おめでとうございます。
是非色んなことを試してみてください。

疑似クラス・疑似要素

CSSの疑似クラスと疑似要素は、HTMLに直接手を加えずに装飾や状態変化を表現できる強力なツールです。

例えば、リストの偶数・奇数行に異なる背景色をつけたり、リンクにホバー時のアニメーションを追加したりすることで、UIの表現力を格段に高められます。

また、疑似クラスを組み合わせることで、フォームの入力状態やチェックボックスの状態に応じたスタイル変更も可能です。これにより、JavaScriptを使わずともインタラクティブなデザインが実現でき、コードの軽量化や保守性向上につながります。これらの疑似機能を組み合わせて、効率的で柔軟なUI表現を設計できることが理想です。

先ほどのWebページに「hover」を用いて、どのようなことが起こるのかを見てみましょう。

hoverとは

「hover」とはカーソルを合わせることで要素に変化を起こすことを可能にします。

「header」の背景色を変化後、黄色に変えます。

CSSファイルに以下の変更を加えます。
注意していただきたいのが、もともと作っていたheaderとは別に「header:hover」を作っていただきたいことです。

                  
          header{
            border: 1px black solid;
            text-align: center;
            margin-bottom: 40px;
          } 

          header:hover{
            border: 1px black solid;
            background-color: yellow;
          }

実際に触れてみると以下のような変化が起こりました。

アニメーション・トランジション応用

CSSのアニメーションとトランジションは、ユーザー体験を向上させるための重要な表現手段です。単純な色や位置の変化だけでなく、疑似クラスや複数要素との組み合わせによる応用がポイントです。

例えば、hoverやfocus疑似クラスと組み合わせてボタンやリンクに滑らかな動きを加えたり、@keyframesを使った繰り返しアニメーションでローディングやカルーセルの演出を実装したりできます。

また、transition-delayやtransition-timing-functionを調整することで、より自然で洗練された動きを表現可能です。

これらを使って視覚的なアクセントを付けつつ、過剰な動きでUXを損なわないバランスを意識することが重要です。アニメーションを適切に設計することで、Webサイト全体の印象や操作感を大幅に向上させることができます。

では「自己紹介文」にカーソルを合わせたら浮き上がるようなデザインを作ってみましょう。

CSSファイルの「.description」に以下の変更を加えます。「.description:hover」を加えただけです。

                  
          .description{
            border: 1px black solid;
            width: 40%;

            text-align: center;
          }

          .description:hover{
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 16px;
            transition: 0.5s;
          }

↑このコードの説明

「box-shadow」とは要素に影をつける時に利用されます。「rgba」は色を設定することができます。

「0px」の部分は影を横方向にどれだけずらすかの値、「3px」は縦方向に影をどれだけずらすかの値(正の数であれば下に移動。負の数なら上に移動)。最後の「16px」の部分は影をどれくらいぼかしたいかの値です。

カーソルを「自己紹介文」に合わせるとその要素の周りに影ができて、少し浮いているように見えます。

Yama

このような動作はボタンによく使われます。
ボタンを使用するときは是非使ってみてください。

まとめ

今回は非常にシンプルなものを作ってみました。プログラミングの学習において以上のように頭の中でイメージ付けたものを再現できる能力は重要です。

是非自分でも今回の知識を活かしてWebページを作ってみてください。

今回の記事について、もしわからないということがあればお問い合わせにてご質問を承っております。いつでもご連絡ください。お待ちしております。