Zein

selector {
    property: value;
}

/* タグセレクタ: このCSSルールはHTML文書内のすべてのh1要素に適用され、これらのh1要素の文字色を青にし、フォントサイズを24ピクセルにします */
h1 {
    color: blue;
    font-size: 24px;
}

/* クラスセレクタ */
/* <div class="block1"> 赤色に変わる </div> */
.block1 {
    color: red;
}

/* IDセレクタ */
/* <p id="id1"> 赤色に変わる </p> */
#id1 {
    color: red;
}

/* ワイルドカードセレクタ: すべての要素タグの内外のマージンをクリアします */
* {
   margin: 0;
   padding: 0;
}

/* 属性セレクタ */
/* css2から */
[attribute] { property: value; } /* attribute属性を持つすべての要素に一致 */
[attribute="value"] { property: value; } /**/
[attribute^="value"] { property: value; } /* attribute属性の値が "value" で始まるすべての要素に一致 */
[attribute|="value"] { property: value; } /* attribute属性の値が "value" または "value-" で始まる要素に一致 */
/* css3 */
[attribute$="value"] { property: value; } /* attribute属性の値が "value" で終わるすべての要素に一致 */
[attribute*="value"] { property: value; } /* attribute属性の値に "value" という文字列を含むすべての要素に一致 */
[attribute~="value"] { property: value; } /* attribute属性の値に "value" という単語を含む要素に一致 */

p, b, i, span { /* すべての <p>、<b>、<i>、<span> 要素を選択し、color: red; を設定します */
    color: red;
}

div.class { /* divタグであり、かつclassクラス */
    color: red;
}

p b { /* すべての <p> 要素内の <b> 要素を選択します。<b> が <p> 内でどれだけネストされていても関係ありません */
    color: red;
}

ul > li {
    border: 1px solid red;
}

p + b { /* <p> 要素の直後の最初の <b> 要素を選択します */
    color: red;
}

p ~ b { /* <p> 要素の後にあるすべての <b> 要素を選択します。必ずしも <p> の直後である必要はなく、同じレベルのDOMツリー内にあれば選択されます */
    color: red;
}

<p>strick</p>
<input type="text" placeholder="入力してください"/>
p::first-letter {
  font-size: 200%;
}
p::first-line {
  font-weight: bold;
}
input::placeholder {
  color: red;
}
p::selection {
  color: red;
}

p::before {
  content: "I "<!-- 画像url('./smiley.gif'); -->
}
p::after {
  content: " Strick"
}

<p style="color:red;font-size:50px;">hello world</p>

<link rel="stylesheet" type="text/css" href="style.css">

@charset "utf-8";
p {
    color: green;
    font-size: 30px;
}

color: green !important;

<p style="color:red;">これは<b>HTML5</b>です</p> <!--<b>要素は<p>要素のスタイルを継承しました-->

<p>これは<b>HTML5</b>です</p>
<style type="text/css">
  p {
    border: 1px solid red; /* borderは非継承スタイル */
  }
  b {
    border: inherit;
  }
</style>

<h1>〜<h6>、<p>、<div>、<ul>、<ol>、<li>

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<img />、<input />、<td>

span { /* ブロック要素に変換 */
  display: block;
}

div { /* インライン要素に変換 */
  display: inline;
}

div { /* インライン-ブロック要素に変換 */
  display: inline-block;
}

div { display: none; /* 要素を隠し、スペースを占有しない */ }

div {
  background-color: purple;

  width: 200px; height: 200px;
  min-width: 100px;
  min-height: 100px;
  max-width: 300px;
  max-height: 300px;

  resize: both;
  overflow: auto; /* この設定でドラッグ可能なサイズの図形が表示されます */

  /*  -webkit-box-sizing: border-box; */  /* Safari と Chrome */
  /*  -moz-box-sizing: border-box;  */   /* Firefox */
  /*  -ms-box-sizing: border-box;   */   /* IE */
  box-sizing: border-box;         /* 標準 */
  padding: 10px; border: 5px solid red;
}

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

div {
  padding: 10px 10px 10px 10px;
}

div {
  padding: 10px 20px; /* 上下、左右 */
}

div {
  padding: 10px;
}

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

div {
  margin: 10px 10px 10px 10px;
}

div {
  margin: 10px 20px;
}

div {
  margin: 10px;
}

/* ボックスを中央に配置 */
div {
  margin: 0 auto;
}

/* ボックスを水平方向に中央に配置 */
div {
  margin-right: auto;
  margin-left: auto;
}

div {
  overflow: auto;
}

div { visibility: hidden; }

#a { /* 浮動要素を左に配置 */
  background: gray;
  float: left;
  clear: none;
}

#c { /* 浮動要素を右に配置 */
  background: navy;
  float: right;
  clear: both;
}

#c { /* 浮動を無効にします */
  background: navy;
  float: none;
}

header { /* 絶対位置：ウィンドウ文書の左上隅0,0を起点とします */
  position: absolute; top: 100px; left: 100px;
}

header { /* ウィンドウ参照位置：スクロールバーがスクロールするのに伴い、ウィンドウに対して静止する効果を得ます */
  position: fixed; top: 100px; left: 100px;
}

/* 特定の要素に対して位置を設定：文書の流れから外れません */
body { /* 参照点の親要素を相対に設定し、座標を設定しません */
  position: relative;
}
header { /* 親要素が参照点を設定した場合、子要素の絶対位置はそれを基準にします */
  position: absolute; top: 0px; left: 0px;
}

header {
  z-index: 100;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レイアウトテーブル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table border="0">
        <tr>
            <td colspan="2" class="header">ヘッダー</td>
        </tr>
        <tr>
            <td class="aside">サイドバー</td>
            <td class="section">セクション</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">フッター</td>
        </tr>
    </table>
</body>
</html>

/* ページの基本スタイル */
body {
    margin: 0;
}

/* 流体レイアウトのテーブルスタイル */
table {
    margin: 0 auto;
    width: 100%;  /* テーブルの幅を100%に設定し、ウィンドウの幅に適応させます */
    border-spacing: 0;
}

/* ヘッダーのスタイル */
.header {
    height: 120px;
    background-color: #2714d1;
    text-align: center;
    font-size: 24px;
}

/* サイドバーのスタイル */
.aside {
    width: 20%; /* 幅を20%に設定 */
    height: 500px;
    background-color: #2e53d0;
    padding: 10px;
    box-sizing: border-box;
}

/* メインコンテンツエリアのスタイル */
.section {
    width: 80%;  /* 幅を80%に設定 */
    height: 500px;
    background-color: #4eb776;
    padding: 10px;
    box-sizing: border-box;
}

/* フッターのスタイル */
.footer {
    height: 120px;
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮動レイアウト - 流体レイアウト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="clearfix">
  <header>ヘッダー</header>
  <aside>サイドバー</aside>
  <section>セクション</section>
  <footer>フッター</footer>
</body>
</html>

/* bodyの幅をautoに設定し、ページの幅がビューポートに自動的に調整されるようにします */
body {
    width: 100%;
    margin: 0;
    color: white;
    background-color: #333;
}

header {
    height: 120px;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 24px;
}

aside {
    width: 20%;
    height: 500px;
    float: left;
    background-color: #555;
    padding: 10px;
    box-sizing: border-box;
}

section {
    width: 80%;
    height: 500px;
    float: left;
    background-color: #666;
    padding: 10px;
    box-sizing: border-box;
}

footer {
    height: 120px;
    clear: both;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
}

.clearfix::before, /* 高さを自動調整する親ボックスにはすべてclearfixクラスを追加します */
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after { /* 親ボックス内に子ボックスを追加し、浮動をクリアする目的は、指定された高さのない親ボックスを押し上げることです */
  clear: both;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置レイアウトの例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .container {
            position: relative;
            height: 100%;
            background-color: #f0f0f0;
        }

        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /* 最初のボックスを位置設定：コンテナの左上から50px */
        .box1 {
            top: 50px;
            left: 50px;
        }

        /* 2番目のボックスを位置設定：コンテナの右下から50px */
        .box2 {
            bottom: 50px;
            right: 50px;
        }

        /* 3番目のボックスを位置設定：コンテナの中心 */
        .box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box box1">ボックス 1</div>
    <div class="box box2">ボックス 2</div>
    <div class="box box3">ボックス 3</div>
</div>

</body>
</html>

div {
  column-width: 200px;
  column-count: 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

div {
  columns: auto 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

<div class="flex-container">
    <p>最初の段落</p>
    <p>2番目の段落</p>
    <p>3番目の段落</p>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  /*align-content: ;*/
  align-itmes: center;
}

/*.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-itmes: center;
  /*align-content: ;*/
}*/

/* 合計で5つの部分を占有し、出現順序231 */
p:nth-child(1) { /* コンテナスペースの1部分を占有 */
    flex: 1; /* 主軸の幅比1:3:1 */
    order: 2;
    align-self: center; /* 最初の子ボックスを中央に配置 */
}

p:nth-child(2) {
    flex: 3;
    order: 3;
}

p:nth-child(3) {
    flex: 1;
    order: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人ホームページ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>私の個人ホームページへようこそ</h1>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">私について</a></li>
                <li><a href="#">私のプロジェクト</a></li>
                <li><a href="#">私に連絡する</a></li>
            </ul>
        </nav>
        <section class="main-content">
            <article class="bio">
                <h2>自己紹介</h2>
                <p>私はWeb開発者で、プログラミングと技術革新が大好きです。</p>
            </article>
            <article class="projects">
                <h2>私のプロジェクト</h2>
                <ul>
                    <li>プロジェクト1</li>
                    <li>プロジェクト2</li>
                    <li>プロジェクト3</li>
                </ul>
            </article>
            <article class="contact">
                <h2>連絡先</h2>
                <p>メール: [email protected]</p>
            </article>
        </section>
        <footer class="footer">
            <p>© 2024 私の個人ホームページ</p>
        </footer>
    </div>
</body>
</html>

/* ページの基本スタイルを設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* コアコンテナ、flexboxレイアウトを使用 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ヘッダー */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* ナビゲーションバー、水平に並べ、折り返し */
.navigation {
    display: flex;
    flex-flow: row wrap; /* 折り返しを許可 */
    justify-content: center; /* 中央に揃える */
    background-color: #333;
}

.navigation ul {
    list-style: none;
    display: flex;
    padding: 10px;
}

.navigation li {
    margin: 0 15px;
}

.navigation a {
    color: white;
    text-decoration: none;
}

/* メインコンテンツエリア、flexboxレイアウトを使用 */
.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 子要素を均等に配置 */
    padding: 20px;
    gap: 20px;
}

/* 自己紹介エリア */
.bio {
    flex: 1 1 300px; /* 伸縮可能なボックスを設定 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.projects {
    flex: 2 1 400px; /* 柔軟な比率を設定 */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.contact {
    flex: 1 1 300px; /* 伸縮可能なボックスを設定 */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

/* フッター */
.footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

/* レイアウトの順序を調整 */
.projects {
    order: -1; /* "私のプロジェクト"を"自己紹介"の前に配置 */
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .navigation {
        flex-direction: column;
    }
    .main-content {
        flex-direction: column;
    }
}

// デフォルトスタイルをクリア
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div span {
  vertical-align: -200px;
  box-shadow: 5px 4px 10px 2px gray; /* 影 */
  /* box-shadow: 5px 4px 10px 2px gray inset; */ /* 内部影 */
  outline: 10px double red; /* ボックスに輪郭を追加 */
  cursor: move;
}

body { font-size: 50px; } /* 親要素のフォントサイズを設定 */
@font-face { font-family: abc; src: url('BrushScriptStd.otf'); } /* サーバーが提供するabcフォントファイル */
body {
  font-style: ;
  font-weight: ;
  font-variant: ;
  font-size: smaller; /* 親要素のフォントサイズを相対的に設定 */
  font-family: 楷体, 微软雅黑, 宋体; /* 多くのブラウザシステムのフォントに互換性を持たせるために、いくつかのバックアップフォントを設定できます */
  /* font: italic bold normal smaller 楷体; /* 上記の順序で値を設定 */
  color: red;
  opacity: 0.5;
}

p {
  text-decoration: underline;
  text-transform: uppercase;
  text-shadow: 5px 5px 3px black;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 4px;
  word-spacing: 14px;
  line-height: 200%;
  word-wrap: break-word;
  text-indent: 2rem;
  vertical-align: super;
}

<div>中国人</div>
div {
  height: 40px;
  line-height: 40px;
}

div { /* 特定の辺を設定するにはプレフィックスを追加するだけで済みます */
  border-width: 2px;
  border-style: solid;
  border-color: red;

  border-radius: 10px 20px 30px 40px;

  border-image-source: url(border.png);
  border-image-slice: 27; /* ちょうど4つの画像 */
  /* border-image-slice: 0 fill; */
  border-image-width: 81px;
  border-image-outset: 20px;
  border-image-repeat: round;
}

div {
  border: 2px solid red;
  border-radius: 10px;
  /* border-top: */
  /* border-middle: */
  /* border-left: */
  /* border-right: */
  border-image: url(border.png) 27/27px round;
}

div {
  background-color: silver;
  background-image: url(loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left; /* 20px 20px; */
  background-size: auto;
  background-origin: content-box;
  background-clip: padding-box;
}

div {
  width: 400px;
  height: 300px;
  border: 10px dashed red;
  padding: 50px;
  background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
}