CSS個人学習スクラップ１ - 基本知識まとめ

セレクター名 { プロパティ: 値; }
h1 { color: red; }

<!-- html抜粋 -->
<div class="continer">
        <span class="lead">ABC</span>
        <p>でも、ラーメン食べる</p>
 </div>

/* css抜粋*/
.continer .lead {
  font-style: italic;
  color: green;
  text-decoration-line: underline;
  font-weight: bold;
  font-size: 2em;
}
.continer p {
  letter-spacing: 0.5em;
  text-decoration: line-through;
}

<!-- html抜粋 -->
<div class="continer">
        <span class="lead">今日こそオムライス食べる</span>
        <p class="subject">あきらめたら、そこで試合終了。</p>
        <p>オムライスはやっぱりケチャップ。</p>
    </div>

/* CSS抜粋 */
.continer .subject {
  background-color: beige;
  border-style: solid;
  border-color: #8a8a8a;
}
.continer p {
  border: 2px dashed #999;
  padding: 10px 3px 20px 4px;
}

<!-- html抜粋 -->
<div class="lead">Pythonでニューラルネットワーク</div>
<div class="content">
            Keras（ケラス）を利用する。
            こいつはTensorFlow（テンサーフロー）を利用する。（テンソルじゃないのかな？）
            ニューラルネットワークの勉強を始めると、微分・積分を使いまくる。特に微分。
            確率的勾配降下法を理解しないと駄目なようだ。
            モンテカルロ木探索など覚えることは多いです。
            活性化関数ってなんだー。
 </div>

/* css抜粋 */
.lead {
  text-decoration: underline red;
}

/* css抜粋 */
.lead {
  border-bottom: 1px solid red;
  width: 520px;
}

<!-- html抜粋 -->
 <div class="continer">
        <div class="lead">Pythonでニューラルネットワーク</div>
        <div class="content">
            Keras（ケラス）を利用する。
            こいつはTensorFlow（テンサーフロー）を利用する。（テンソルじゃないのかな？）
            ニューラルネットワークの勉強を始めると、微分・積分を使いまくる。特に微分。
            確率的勾配降下法を理解しないと駄目なようだ。
            モンテカルロ木探索など覚えることは多いです。
            活性化関数ってなんだー。
        </div>
    </div>

/* CSS抜粋 */
body {
  border: 3px solid gray;
}

.continer {
  border: 3px dashed brown;
  margin: 40px 0 0 40px;
}

.lead {
  border-bottom: 1px solid red;
  width: 500px;
  margin-bottom: 30px;
  font-size: 2em;
}

.content {
  border: 3px dotted orange;
  margin: 0 0 0 40px;
}

<!-- html抜粋 -->
<div class="continer">
        <section id="page1">
            <div class="lead">確率的勾配降下法</div>
            <div class="content">
                勾配降下法は統計学や機械学習で多く使われています。
                特に機械学習というのは基本的に何かしらの関数を最小化（最大化）する問題を数値解析的に解くことに帰結する場合が多いです。
                なので、基本的にはひたすら微分して0となるところを探す問題です。微分して0。
                で、その微分して0となる値は何か、をプログラムで解く場合に重要になるのがこの勾配降下法です。
                幾つか勾配法にも種類がありますがここでは最急降下法、確率的勾配降下法の２つを扱います。
            </div>
        </section>
        <section id="page2">
            <div class="lead">誤差逆伝搬法</div>
            <div class="content">
                勾配降下法に基づいた各層各パラメータの更新量を、上位層側から得る値を利用した計算により得る方法である。
                従って、出力層での誤差関数等の値からパラメータの勾配降下量を計算し、入力層方向へ各層各パラメータの更新量を決める値を計算しながら逆方向へ伝搬させていく。
            </div>
        </section>
    </div>

/* CSS抜粋 */
body {
  border: 2px dotted gray;
}
.continer {
  display: flex;
  max-width: 800px;
  margin: 10px;
}
.continer #page1 {
  border: 3px solid brown;
  margin-right: 40px;
}
.continer #page2 {
  border: 3px solid orange;
}

/* CSS抜粋 */
body {
  border: 2px dotted gray;
}
.continer {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  max-width: 800px;
}
.continer #page1 {
  border: 3px solid brown;
}
.continer #page2 {
  border: 3px solid orange;
}

/* css抜粋 */
body {
  border: 2px dotted gray;
}
.continer {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  max-width: 400px;
}
.continer #page1 {
  border: 3px solid brown;
  z-index: 1;
  margin-top: 40px;
  margin-left: -80px;
}
.continer #page2 {
  border: 3px solid orange;
  z-index: 2;
}