CSSの実例とソースコード

1. ボタンのスタイリング:

   <style>
   .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
   }
   </style>
   <button class="button">Click me!</button>

2. ナビゲーションメニューの作成:

   <style>
   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
   }
   .navbar li {
    float: left;
   }
   .navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
   }
   .navbar li a:hover {
    background-color: #111;
   }
   </style>
   <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
   </ul>

3. レスポンシブデザインの実装:

   <style>
   .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
   }
   .box {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
   }
   </style>
   <div class="container">
    <div class="box">Content 1</div>
    <div class="box">Content 2</div>
    <div class="box">Content 3</div>
   </div>

これらはいくつかの基本的なCSSの実例ですが、さまざまな要素やスタイルに適用できます。ウェブデザインの学習や独自のプロジェクトに応用してみてください。