常連

```HTML
<div class="container">
  <div class="item">
    <p>吾輩は猫である</p>
    <p>吾輩は猫である。名前はまだない。</p>
    <p>夏目漱石</p>
  </div>
  <div class="item">
    <p>羅生門</p>
    <p>ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。</p>
    <p>芥川龍之介</p>
  </div>
  <div class="item">
    <p>記憶に残る正月の思い出</p>
    <p>六つばかりの正月（多分）丁度旅順が陥落し、若かった母が、縁側に走り出、泣きながら「万歳！」と叫んだ時...</p>
    <p>宮本百合子</p>
  </div>
</div>
```

```CSS
>.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 8px 24px;

  >.item {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}
```
上記を記述すると、各.itemの子要素の高さが揃います。subgridは親要素の行または列の構造を継承させるということは理解しています。.itemにgrid-row: span 3;のみを指定し、開発ツールを確認すると.containerは均等に3等分されています。なのでここで、.itemにgrid-template-rows: subgrid;を指定すると各.itemの子要素の高さは.containerの均等に3等分された行に配置されると思いきや、各.itemの子要素の内容量に応じて高さが揃ったので分からなくなってしまいました。subgridは純粋に親グリッドの構造を継承させるのではないということでしょうか。


cssグリッドのsubgridについて理屈が分からないです。

```HTML
<div class="sticky-container">
  <div class="sticky">
    <p>スティッキー1</p>
  </div>
  <div class="sticky">
    <p>スティッキー2</p>
  </div>
  <div class="sticky">
    <p>スティッキー3</p>
  </div>
  <div class="sticky">
    <p>スティッキー4</p>
  </div>
</div>
```

```CSS
>.sticky-container {
  >.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: 2000px;

    p {
      font-size: 18px;
    }

    &:nth-child(odd) {
      background-color: #dbdbdb;
    }

    &:nth-child(even) {
      background-color: #a9a9a9;
    }
  }
}
```

### 謎
上記は、各stickyアイテムのmargin-bottomに2000pxを指定しているのですが、なぜか3つ目のstickyアイテムでstickyの挙動が終わり、4つ目からは通常の挙動になっています。試しにstickyアイテムを一つ追加すると4つ目のstickyアイテムでstickyの挙動が終わり、5つ目からは通常の挙動になったので、最後のstickyアイテムが通常の挙動になるということが分かりました。これは仕様なのか、バグなのか、なんなのでしょうか。。



position: sticky;の不具合なのか仕様なのか

### 実現したいこと
scrollify.jsを用いて、マウスホイールを下にスクロールした時、セクションごとに横スクロールが出来るように試みています。

### 発生している問題・分からないこと
縦スクロールでの実装はできたのですが、これをそのまま横スクロールにするにはどうすればいいでしょうか？

scrollify.jsはgithubからダウンロードして使用しています。
[github](https://github.com/lukehaas/Scrollify)



### 該当のソースコード

```HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="css/destyle.css"> 
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.scrollify.js"></script>
</head>
<body>
<div class="main">
  <section class="section section-blue js-section" data-section-name="section1">
    <div class="section-content">
      <h2>section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor reprehenderit, labore nostrum hic. Natus hic corporis, delectus vero voluptatem maxime voluptate tempora expedita quo iure atque vitae deserunt culpa quibusdam!</p>
    </div>
  </section>
  <section class="section section-red js-section" data-section-name="section2">
    <div class="section-content">
      <h2>section 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae, sint dicta quod, nemo possimus! Impedit sed rerum quidem, voluptate possimus quo accusamus vitae necessitatibus incidunt ut fugit nihil voluptatem.</p>
      <h3>heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae, sint dicta quod, nemo possimus! Impedit sed rerum quidem, voluptate possimus quo accusamus vitae necessitatibus incidunt ut fugit nihil voluptatem.</p>
    </div>
  </section>
  <section class="section section-blue js-section" data-section-name="section3">
    <div class="section-content">
      <h2>section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor reprehenderit, labore nostrum hic. Natus hic corporis, delectus vero voluptatem maxime voluptate tempora expedita quo iure atque vitae deserunt culpa quibusdam!</p>
    </div>
  </section>
  <ul class="pager" id="js-pager"></ul>
</div>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
```

```CSS
@charset "utf-8";

/* ===========================
// ページャー
// ------------------------------*/
.main {
  position: relative;
}

.pager {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
}
.pager li {
  display: block;
  margin: 20px;
}
.pager li a {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}
.pager .is-current a {
  background: #232323;
}

/* ===========================
// section
// ------------------------------*/
.section {
  width: 100%;
}
.section.is-show .section-content {
  opacity: 1;
}

.section-content {
  max-width: 300px;
  margin: 0 auto;
  padding: 40px 60px;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease .75s;
}

h2 {
  color: #232323;
}
h2:first-child {
  margin-top: 0;
}

h3 {
  color: #232323;
}

p {
  color: #232323;
}

.section-red {
  background-color: #ff6363;
}

.section-blue {
  background-color: #8fbbff;
}

.section-green {
  background-color: #fff;
}

```

```JavaScript
var $section = $('.js-section'); // 各スライド
var $pager = $('#js-pager'); // ページャー枠

// scrollifyのオプション設定
var option = {
  interstitialSection : "header,footer",//除外するコンテンツ
  section : '.js-section',
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: true,
  before:function(index, section) {
    setCurrent(index); // 現在のsectionにクラスを設定
    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
  },
  afterRender:function() {
    createPager(); // ページャーの作成
    setCurrent(); // 現在のsectionにクラスを設定
  }
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});



// ==============================
// functions
// ------------------------------

// 現在のsectionにクラスを設定
function setCurrent(index = 0) {
  // 一旦、すべてのsectionのクラスをとる
  $section.removeClass('is-show');
  // 現在のsectionのみにクラスを付与
  $section.eq(index).addClass('is-show');
}

// ページャーに対応する順番にクラス名を付与
function pagerCurrent(index = 0) {
  var $li = $pager.find('li');
  $li.removeClass('is-current');
  $li.eq(index).addClass('is-current');
}

// ページャーの作成
function createPager() {
  $section.each(function(i, e){
    // ページ内リンク先の作成
    var sectionName = $(e).attr('data-section-name');
    // 最初のliにはクラスを付与
    var addClass = '';
    if (i === 0) {
        addClass = 'is-current';
    }
    // liのHTML作成
    var html = '';
    html += '<li class="' + addClass + '">';
    html += '<a href="#' + sectionName + '"></a>';
    html += '</li>';
    $pager.append(html);
  });
  
  pagerLink();
}

// ページャーでaタグをクリックされたらスクロールする
function pagerLink () {
  $pager.find('a').on('click', function() {
    $.scrollify.move($(this).attr("href"));
  });
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
scrollify.jsを用いた横スクロールの方法をいくらか調べましたが、該当するものは出てきませんでした。

### 補足
特になし

セクションごとに横スクロールするようにしたいです。

### 実現したいこと
```HTML
<ul>
  <li>
    <h2>タイトル</h2>
  </li>
  <li>
    <h2>タイトル</h2>
  </li>
  <li>
    <h2>タイトル</h2>
  </li>
</ul>
```

上記のような構成のHTMLがあり、各li要素にheight: 100vh;とposition: sticky;とtop: 0;を指定すると、各li要素が画面上端に到達すると次のli要素が昇ってくるのですが、その昇ってくるタイミングを少し遅延させたいです。欲を言えばその遅延の度合いも調整出来たらうれしいです。

### 発生している問題・分からないこと
遅延させる方法が分かりません。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ググったり、自分で実装を試みましたが実現できませんでした。

### 補足
特になし

stickyスライドアニメーションの遅延

現在ウェブデザイン勉強中の初学者なのですが、勉強の方法に悩んでいます。
udemyの講座を受けているんですが概念や書き方を学んでもすぐに忘れてしまうため、練習問題などで実践的に書いて定着させたいと考えていますが自分のレベルにあった問題が載ったサイトをなかなか見つけられません。

例えばテーブルタグの書き方を学んだらその問題を解くというようにひとつずつ学校の勉強のように基本的なことから初めて徐々にレベルを上げて進めようと考えていますが丁寧すぎだと思いますか？

無料有料問わず実践的に初人者向けの数をこなせる本やサイトはありますか？

皆さんはどのように学習しましたか？


HTML　CSSの勉強方法

### 実現したいこと
クリック1回目に要素を180度右回りに回転させて、クリック2回目は180度右回りで元の状態に戻り、これを繰り返しできるようなアニメーションを実現したいです。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-11/8df1c682-fd76-4770-8ffa-5d23d907ca2f.png)

### 発生している問題・分からないこと
1回目のクリック時に180度回転はできましたが、そこからさらにクリック2回目に180度回転させる方法が分からない状態です。



### 該当のソースコード

```html、css
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリック回転アニメーション</title>
  <link rel="stylesheet" href="styles.css">
  <style type="text/css">
    /* 回転アニメーションの定義 */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* 回転する要素のスタイル */
.rotate-box {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 50px auto;
  cursor: pointer;
}

/* チェックボックスがチェックされたときに回転アニメーションを適用 */
#rotateToggle:checked + .rotate-box {
  animation: rotateAnimation 1s ease-in-out forwards;
}
  </style>
</head>
<body>
  <div>
    
    <input type="checkbox" id="rotateToggle" hidden>
  
    
    <label for="rotateToggle" class="rotate-box">testtest</label>
  </div>
</body>
</html>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
2回目をクリックするとアニメーションなしで元の状態に戻るので、1回目の回転した角度を記憶させる？ようなコードを作るんでしょうか？

### 補足
特になし

クリック時に要素を回転させる

HTML・CSSでレスポンシブで作成する場合（今は大抵そうでしょうが）について、数値を固定することについてのデメリット等を知りたいです

HTMLを書き始める際にテンプレートとして
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
から始めることが多いと思います（細かな部分は置いておいてください）

私の場合はお客様都合で基本はPCファーストというかPCをまず一通り書いてある程度出来た時点でメディアクエリ等で調整していく形を取っております。

今回PCを全く考慮しなくてよいというページを作る必要が出たのですが考慮しなくていいと言いつつ要するにPCでも同じ表示にしてほしいというようなつもりの事をおっしゃったようです。

でそれを実現するときにいろんなやり方があるとは思いますが今回はPCでは仮想スマホとして仮に400幅前提でhtml,bodyを固定して表示することにしました（PCブラウザで400幅で表示されて左右がら空きなイメージです）

一旦それで見せた所、縦幅を固定したい箇所がいくつかあったりで見た目がずれるので、どの端末（スマホ・タブレット）端末でも見た目がほぼおなじになるようにしてほしいという事を言われてちょっと考えてしまいました。
逆にPCはブラウザ幅に余裕があるので400固定してしまえば良いのですが、スマホ端末は100%幅にならないといけない。
通常のwidth=device-widthにしていると正直画面幅がいくつになるかわからないので逆にwidth=400とかにしてやればPC上での400幅と同じことになるので良いのかな？と思ったのですが確信が持てなかったのでネットで調べてみました。

ただ思ったよりその辺に触れている記述を読むと「ビューポートを固定させるな、width=device-widthにしろ」と書いてる記事はあれど「別に固定してもいいよ」と断言しているような記事は見つからなかったと思います。

このあたりご意見というか考え方をお聞かせいただきたく思いました。
そもそも考え方が間違ってる所等ありましたらご指摘頂けるとありがたく思います。

よろしくお願いいたします。

ビューポート値を固定する事について

![イメージ説明](f2a2a88d4b57cdbeeee86acc4673ec75.jpeg)


###前提・実現したいこと
html,css初心者です。
htmlで画像の下に文字を配置して、文字を画像に対して中央揃えにしたいです。



###該当のソースコード
<div id="box1">
<img src="img/gazou.png" alt="" width="200" height="219">
<p>文字文字文字</p>
</div>

###試したこと
＃box1 {text-align: center;} で中央寄せをしてみたのですが、一応中央揃えはできるのですが、ｐｃ画面全体に対して中央になってしまいます。

画像に対しての文字のみ中央揃えにして、ｐｃ全体に対しては左揃えで配置したいです。

###補足情報
わかりにくい説明で申し訳ありませんが、ぜひ教えていただけると助かります。
よろしくお願い致します。

CSS3