40代高卒者がIT転職に成功するためのデザインスキル【border2】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、borderの使い方その2って事で書いて行きたいと思います。

borderは色々な場面で使われる要素です。

是非使い方を覚えておきましょう。

前回の記事はこちらです。

borderの使い方その2

まずはHTMLとCSSの例を見ていきましょう

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- 1. テーブルデザイン -->
  <table>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
    </tr>
  </table>

  <!-- 2. カードデザイン -->
  <div class="card">
    <h3>カードタイトル</h3>
    <p>カードの内容がここに入ります。</p>
  </div>

  <!-- 3. アコーディオンメニュー -->
  <div class="accordion-panel">
    <h3>パネル1</h3>
    <p>パネル1の内容がここに入ります。</p>
  </div>
  <div class="accordion-panel">
    <h3>パネル2</h3>
    <p>パネル2の内容がここに入ります。</p>
  </div>

  <!-- 4. ボタンデザイン -->
  <button class="button">クリックしてください</button>

  <!-- 5. 入力フォームのスタイル -->
  <form>
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password">
    <label for="message">メッセージ:</label>
    <textarea id="message" name="message"></textarea>
    <button class="button" type="submit">送信</button>
  </form>

</body>
</html>

CSS

/* 1. テーブルデザイン */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #cccccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

/* 2. カードデザイン */
.card {
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  width: 300px;
  margin: 16px;
}

/* 3. アコーディオンメニュー */
.accordion-panel {
  border-top: 1px solid #cccccc;
  padding: 16px;
}

.accordion-panel:last-child {
  border-bottom: 1px solid #cccccc;
}

/* 4. ボタンデザイン */
.button {
  border: 2px solid #007bff;
  border-radius: 5px;
  color: #007bff;
  background-color: transparent;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #007bff;
  color: #ffffff;
}

/* 5. 入力フォームのスタイル */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #007bff;
}

これらの例は、

borderプロパティを使用して、

様々なWEBデザイン要素を表現する方法を示しています。

borderプロパティは、HTML要素の外観を変更し、見た目を整えたり、

利用者にとって分かりやすいインターフェースを作成するのに役立ちます。

枠線のスタイル、太さ、色を変更することで、

デザインのバリエーションを増やすことができます。

また、border-radiusプロパティを組み合わせることで、角丸デザインも可能になります。

これらのプロパティを活用して、機能的で魅力的なWEBデザインを実現しましょう。

まとめ

以上がborder要素を使った簡単な例になります。

borderは本当に色々と使うので、是非使い方を覚えておきましょう。

レッツチャレンジ！