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;">こんにちは世界</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;
}

/* サイドバーの幅を20%に設定し、浮動させます */
aside {
    width: 20%;
    height: 500px;
    float: left;
    background-color: #555;
    padding: 10px;
    box-sizing: border-box;
}

/* セクションの幅を80%に設定し、浮動させます */
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-items: center;
}

/*.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: 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;
}