常連

```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;の不具合なのか仕様なのか

## テーマ、知りたいこと

HTMLの`<input type="radio">`について、「グループ内の連動を行う」「フォーム送信に値は載せない」「未チェックのままだと、フォーム送信時に送信を阻止して、`invalid`イベントを反応させる」の3つすべてを満たす方法は存在するのか

## 状況

フォーム内に「フォーム送信はしたくないけど必須のバリデーションは当てたいラジオボタン」が存在していたので、`<input type="radio" required>`に、`form="でたらめなID"`と足していました。ところが、いつしか別フォームを指す`<input>`要素ではフォーム送信を止められない状態となってしまっていました。

ふつうのフォーム要素なら`name`を未設定とすれば、フォーム送信に値が入らなくなるので何ら問題はありません。ところが、ラジオボタンの場合には`name`が「フォーム送信時のキー」以外に「複数のボタンを連動させるためのキー」としても使われているので、同じキーを設定せざるを得ません。

## 参考HTML

```html
<form action="#">
  <label>
    <input type="radio" name="foo" form="dummy" required>
    hoge
  </label>
  <label>
    <input type="radio" name="foo" form="dummy" required>
    piyo
  </label>
  
  <input type="submit">
</form>

<form action="" id="dummy"></form>
```

## 考えたこと

とりあえず、以下のような策は考えています。

* 適当な`name`で値が送信されてしまうのは無視する
* `name`をセットせずに、ラジオボタン同士のチェック制御もJavaScriptで行う
* `form`をセットしたままでも`:invalid`セレクタで拾うことは可能なので、フォーム送信時のエラーハンドリングを自前で行う

なお、`value`なしでは`key=on`として送信が行われるし、`value=""`と明示しても`key=`がフォーム送信の値に入ってしまうため、対策となりませんでした。

これらより簡潔、かつ値がフォーム送信されないような手段がありましたらご教示いただけましたら幸いです。

## 環境

ブラウザ運用なので、Chrome、Firefox、Safari、Edgeの各最新版で動かすことを念頭に置いています。

HTML上のラジオボタンで、値の非送信・グループ化・バリデーションについて

ページにcssとjavascriptを設定して、項目をhoverするとプルダウンでリストが出てくるようにしたいのですが、動作させてみると添付画像のように画面からはみ出してしまいます。
どこが原因でこのような現象が生じているのでしょうか。

わからなくて途方にくれていて、質問させていただきました。
何卒よろしくお願い申し上げます。

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

```html
<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"
      <title></title>
      <meta name="viewport" content="width=device-width">
      <meta name="description" content=""
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
      <link rel="stylesheet" href="F:\hp\style.css">
   </head>
   <body>
      <header>
		   <div class="con1">
			   <div class="con1-1">
		         <a href="#" rel="home"><img src="f:\hp\006.png" alt=""class="site-branding__logo" /></a>	</h1>
            </div>
		      <div class="con1-2">
               <div class="ho"><a href="javascript:;">ホーム</a></div>
               <div class="ham"><a href="javascript:;">案内</a>
                  <ul class="ham-list">
                     <li><a href="javascript:;"> 案内</a></li>
	                  <li><a href="javascript:;">aaaaaaaaaa</a></li>
                  </ul>
               </div>
               <div class="ham"><a href="javascript:;">aaaaaaaaaaa</a>
                  <ul class="ham-list">
	                  <li><a href="javascript:;">aaaaa</a></li>
                  </ul>
               </div>
               <div class="ham"><a href="javascript:;">aaaaaaaaaaaaaaa</a>
                  <ul class="ham-list">
	                  <li><a href="javascript:;">aaaaaaa</a></li>
	                  <li><a href="javascript:;">aaaaaaaaaaaaaaaaaaaaaa</a></li>
                  </ul>
               </div>
               <div class="ham"><a href="#">aaaaaaaaaaaaa</a>
                  <ul class="ham-list">
	                  <li><a href="javascript:;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
	                  <li><a href="javascript:;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
	                  <li><a href="javascript:;">aaaaaaaaaaaaaaaaaaaaaaaa</a></li>
                  </ul>
               </div>
			   </div>
		   </div>
      </header>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
      <script src="main.js"></script>
   </body>

</html>
```
```css
@charset "UTF-8"; 

body {
   font-family: 'Noto Sans JP', sans-serif;
   
}

a,a:hover {
   text-decoration: none;
   color: aliceblue;
}

*{
   margin: 0;
}

header{
   width: auto;
   height: auto;
   background-color: deepskyblue;
   position: sticky;
   top:0;
   margin: 0;

}

.con1{
   display: flex;
   margin-left: auto;
   margin-right: auto;
   padding: 20px 15px;
}

.con1-1{
   display: flex;
}

.con1-2{
   display: flex;
   column-gap: 32px;
   flex-wrap: wrap;
   margin-left: auto;
   align-items: center;
   padding-left: 32px;
}

.ham-list{
   list-style: none;
   width: max-content;
   background-color:red;
   padding: 10px;
   border-radius: 15px;
}

.ham{
   position: relative;
}

.ham-list{
  display: none;
   top: 35px;
   position: absolute;
}

.ham a {
   display:inline-block;
   transition: .5s
}

.ham:hover a {
   transform: rotateX(360deg);
}

```

```main.js
$(function(){
 $(".ham").hover(function(){
   $(this).children(".ham-list").stop().slideToggle();
  });
});

$('.heya2').slick({  
  autoplay: true,
  autoplaySpeed: 800,
  arrows: true,
  dots: true,
  fade: true,
});
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-07-12/1695b049-7da7-4fa2-a880-79ffd970055f.jpeg)


リストをプルダウンしても画面からはみ出ないようにしたい

### 実現したいこと
HTMLのbuttonをクリックしたときに、そのbuttonの傍にpopover属性を指定した要素を表示させたい。
表示/非表示はjavascriptで制御する。

[5/16 17:33 追記]
javascriptで制御したい理由は、buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいからです。

### 発生している問題・分からないこと
Javascriptを使用せずに自動的に表示させる場合には、buttonの傍に表示されます。
JavascriptのshowPopover()で表示されると離れた位置に表示されてしまいます。

popup位置の基準となる要素を何らかの方法で指定する必要があるのかがわかりません。
htmlの属性またはcssの記述が不足しているのでしょうか？



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

```html
<div style="position: relative;">

    <div id="pop1" style="margin:0; inset:0; position-area:top;" popover >
        <div>あいうえお<br />かきく</div>
    </div>

    <button id="btnOK" style="margin:100px;" popovertarget="pop1">
        <span>意図した通りの要素の上になる</span>
    </button>

    <button id="btnFail" style="margin:100px;">
        <span>画面下になってしまう</span>
    </button>

    <script>
        document.querySelector("#btnFail").addEventListener("click", (ev) => {
            document.querySelector("#pop1").hidePopover();
            document.querySelector("#pop1").showPopover();
        });
    </script>
</div>
```

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

##### 上記の詳細・結果
[Popover anchor positioning](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning)で説明されているposition-areaを使用してるがjavascriptからは効果がない。

javascriptでの場合に対象とする要素が指定できていないのではと考えていますが、開発者ツールでみても違いが見つけられません。

### 補足
chrome 136
edge 136
(firefoxではまったく位置が合わない、safariでは試せていないが、今回の質問ではchromium系のみでよい)


### 得られた回答を参考に実現できたコード
[5/16 17:53 追記]
クリックされた(スクリプト処理後の)時点での対象の`popovertarget`属性で判定されるようなので、非同期のawaitしてしまうと成功しませんでしたが、属性を書き換えてからclick()を呼び出すことで遅延させることができました。

```html
    document.querySelector("#btnFail").addEventListener("click", async (ev) => {
        
        const btn = ev.currentTarget;

        if (btn.hasAttribute("popovertarget")) {
            return;
        }

        btn.innerText = "処理中";
        const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
        btn.innerText = result ? "合格" : "不合格";
        if (result) {
            btn.setAttribute("popovertarget", "pop1");
        }
        else {
            btn.setAttribute("popovertarget", "pop2");
        }

        btn.click();
        btn.removeAttribute("popovertarget");
    });
```
### 得られた回答を参考に実現できたコード 2
[5/16 18:20 追記]
HTMLとCSSでの関連は、styleに`position-anchor`と`position-name`の値が一致する組み合わせをつければ良さそうなので、HTMLで書くと以下のように。

```html
<div id="pop1"
    style="position-anchor: --testAnchor; margin:0; inset:0; position-area:top; background-color: green; color: white;"
    popover>
    <div>合格</div>
</div>
<button id="btnFail" style="anchor-name:--testAnchor; margin:100px;">
    <span>2</span>
</button> 
```

これをjavascriptで実現すると

```javascript
document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");

    const anchorName = "--testAnchor" + Date.now().toString();
    btn.style.anchorName = anchorName;
    pop.style.positionAnchor = anchorName;
    pop.showPopover();
});
```
とすることでshowPopover()でも任意に指定したボタンの傍に表示させることができるようになりました。

### 得られた回答を参考に実現できたコード 3
[5/16 18:55 追記]
showPopoverの引数で指定できる!!!

```javascript
document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");
    pop.showPopover({ source: btn });
});
```


HTMLのpopoverの位置の指定方法

slick slideを設定した部分が中央に配置できないので、どうすればいいのか教えていただけますでしょうか。

下記2つを試しても左詰めになっていて動かずです。
1つ目
display: flex;
   justify-content: center;
   align-items: center;

2つ目
   margin: 0 auto;


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

```html
<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"
      <title></title>
      <meta name="viewport" content="width=device-width">
      <meta name="description" content="ああああああ"
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
      <link rel="stylesheet" href="F:\hp\style2.css">
   </head>
   <body>
      <header>
　　　　省略
　　</header>
<main>
<section class="dai">
            <div class="dai1">あああああああああああああ</div>
         </section>

<section class="naiyou">
            <div class="hidari">
               <div class="heya">
                  <div class="heya1">
                     あああああああああああ
                  </div>
                  <div class="heya2">
                     <figure class="fig1">
                        <img src="p.jpg" alt="">
                        <figcaption>
                           ああああああああ
                        </figcaption>
                     </figure>
                     <figure class="fig2">
                        <img src="s.png" alt="">
                        <figcaption>
                           ああああああああああああ
                        </figcaption>
                     </figure>
                     <figure class="fig3">
                        <img src="U.png" alt="">
                        <figcaption>
                           ああああああああああああああ
                        </figcaption>
                     </figure>
                  </div>
               </div>
            </div>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
      <script src="main.js"></script>
   </body>

</html>

```
```css
@charset "UTF-8"; 

body {
   font-family: 'Noto Sans JP', sans-serif;
   
}

a,a:hover {
   text-decoration: none;
   color: #fff;
}

*{
   margin: 0;
}

header{
   display: flex;
   justify-content: space-between;
   width: auto;
   height: auto;
   background-color: deepskyblue;
   position: sticky;
   top:0;
   left:0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   padding: 20px 15px;
}

.dai{
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   height: 357px;
   background-image: url("094_l-1024x410.jpg");
   background-size: cover;
}

.dai1{
   display: flex;
   font-size: 28px;
   font-weight: 500;
   color: aliceblue;
}

.heya1{
   border-bottom: 4px solid green;
   border-width: thick;
   margin: 20px;
   display: inline-block;
}

.heya2{
   margin: 0 auto;
}

.fig1 img{
  max-width: 40%;
  height: 40%;
}

.fig2 img{
  max-width: 40%;
  height: 40%;
}

.fig3 img{
  max-width: 40%;
  height: 40%;
}

```

```main.js
$('.heya2').slick({  
  autoplay: true,
  autoplaySpeed: 800,
  arrows: true,
  dots: true,
  fade: true,
});
```


slick slideを設定した部分が中央に配置できないので、どうすればいいのか教えていただけますでしょうか。

### 実現したいこと
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を用いた横スクロールの方法をいくらか調べましたが、該当するものは出てきませんでした。

### 補足
特になし

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

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

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

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

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


HTML5