CSS は難しくありません (これらの基本が欠けているだけです) - 基礎をマスターする (パート 2)

前回の記事にコメントをくださった皆さん、ありがとうございました。本当に意味のあるものでした。この記事から 1 つか 2 つのことを学んでいただければ幸いです。

この記事では、CSS の 2 つの基本的な概念、配置とレイアウトについて説明します。配置とレイアウトは、視覚的に魅力的で機能的な Web ページを作成するための中心です。これらの概念をマスターすると、ユーザー エクスペリエンスを向上させるレスポンシブ デザインを作成できるようになります。最後には、これらのテクニックを使用してプロのように Web ページを構成する方法がわかるでしょう。

- 配置とレイアウト

CSS 配置は、Web ページ上で要素を配置または配置する方法を制御します。位置決めは、該当する場合、オフセット値 Top、Bottom、Left、および Right の影響を受けます。主な CSS Position 値は 5 つあります。

1.静的: すべての HTML 要素はデフォルトで静的に配置されます。これは単に、要素が変化せず、移動せず、オフセット値 Top、Bottom、Left、Right の影響を受けないことを意味します。

2.相対: 要素は通常の位置を基準にして配置されます。

3.絶対: 要素は、最も近い祖先 (親) またはビューポートを基準にして配置されます。

4.固定: 要素はビューポートを基準にして配置され、スクロール中も固定されたままになります。

5.スティッキー: スティッキー配置を使用すると、スクロール位置とオフセット値の上、下、左、右に基づいて要素を相対位置と固定位置の間で切り替えることができます。

以下は CSS の配置を説明する図です。

これは、イラストに命を吹き込むのに役立つコードです。ご自由にコピーしてご自身で変更してください。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

—一時停止して深呼吸して、次に進みます!!—
- CSS レイアウト

1. Flexbox: これは、項目を 1 つの軸 (水平方向と垂直方向) にレイアウトするために使用される 1 次元のレイアウト方法です。

フレックスボックスの機能

• display: flex - コンテナーのフレックスボックスを作成します。
• align-items: center - コンテナの垂直方向の配置を制御します。
• justify-content: space-between - コンテナの水平方向の配置を制御します。
• ギャップ: マージンを必要とせずにフレックス項目間にスペースを追加します。

シンプルなナビゲーション バーの前後を示します

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

結果:

2.グリッド: これは、行と列の作成に使用される 2 次元のレイアウト方法です。

特徴

• 表示: グリッド - コンテナーのグリッドを作成します。
• Grid-template-columns/grid-template-rows - コンテナーの行または列を定義します。
• repeat(2, 1fr) - これにより、2 つの等しい幅の列が作成されます。
• ギャップ: 10px - グリッド項目間にスペースを追加します。

これは、Unsplash で見つけた猫の写真のビフォーとアフターです。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

結果:

比較表

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

配置とレイアウトは CSS の基礎です。いつどのように使用するかを理解すると、スタイリング体験が簡単になるだけでなく、より楽しく効率的になります。この記事では Flexbox と Grid を使い始めるためのガイドを提供しますが、それらの高度な機能、ヒント、テクニックを探求するより詳細なガイドを間もなく公開する予定です。乞うご期待!

これで CSS の基本をマスターする! のまとめです。私が楽しく書いたのと同じように、皆さんもこの記事を読んで楽しんでいただければ幸いです。でも、お別れする前にぜひご意見をいただきたいです:

あなたのプロジェクトでは、Flexbox と Grid のどちらの CSS レイアウト方法を好みますか?そしてなぜ?

以下のコメント欄でお気軽にご意見をお聞かせください。

とりあえずバイバイ!!!!