【HTML】構造体のメンバ表示

```html:html
<link rel="stylesheet" type="text/css" href="Untitled-1.css">

<head>
    <title>構造体</title>
</head>

<body>
    <div class="hidden_box">
        <div style="line-height: 0.5em;">
            <p>aaaa</p>
            <p>aaaa</p>
            <div style="position: relative; top: 0; left: 2em;">
                <div class="hidden_box">
                    <label for="label2">+</label>
                    <input type="checkbox" id="label2"/>
                    <div style="position: relative; top: -20px; left: 30px;" class="hidden_show">
                        <!--非表示ここから-->
                            <p>aaaa</p>
                            <p>aaaa</p>
                            <p>aaaa</p>
                            <p>aaaa</p>
                            <p>aaaa</p>
                            <p class="cs">aaaa</p>
                        <!--ここまで-->
                    </div>
                </div>
            </div>

            <div style="position: relative; top: 0; left: 4em;">
                <div class="hidden_box">
                    <label for="label3">+</label>
                    <input type="checkbox" id="label3"/>
                    <div style="position: relative; top: -20px; left: 30px;" class="hidden_show">
                        <!--非表示ここから-->     
                            <p class="cs"><img src="face.jpg"></p>
                        <!--ここまで-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
```

```css:css
/*全体*/
.hidden_box {
    margin: 20px 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: auto;
    font-weight: none;
    border: solid 1px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.0s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: auto;
    height: auto;
    opacity: 1;
}

/*改行後の余白*/
.ss {
    margin-bottom: 0;
}
```

```vb:変換
' 上書き書込みのサンプル。
' 元のファイルの内容はクリアされる。
Sub WriteTest1()
    Set ws1 = Worksheets("init1")
    Set ws2 = Worksheets("struct")

    ' エラーの場合、WriteErrorラベルに飛ばす。
    On Error GoTo WriteError
    
    ' 上書きモードでファイルをオープン
    Open ".\test.html" For Output As #1
    
    ' オープンしたファイルに文字列を出力
    '初期
    For i = 1 To 13
        Print #1, ws1.Cells(i, 1).Value
    Next
    
   
    '// ▼▼▼差し込む位置
    
    For i = 1 To 2
        Print #1, "<p class=""cs"">" & ws2.Cells(i, 1) & "</p>"
    Next
    
    
    '// ▲▲▲差し込む位置
    
    
    'エンド
    For i = 15 To 20
        Print #1, ws1.Cells(i, 1).Value
    Next
    
    ' ファイルをクローズ
    Close #1
    
    Exit Sub
WriteError:
    Close #1
    MsgBox "書込みに失敗しました。"
End Sub
```


>参考
[HTMLとCSSだけ！要素の表示・非表示を切り替える方法](https://saruwakakun.com/html-css/reference/hidden-show#section2)
[boxの配置 position/css](http://lab.agr.hokudai.ac.jp/useful/CSS/b6_position.htm)
[ホームページ作成 - 文章を下げる（インデント）](http://www.1uphp.com/con1/basic/indentall.html)
[[ HTML ] 文字間隔と行間（行の高さ）を設定する ( letter-spacing / line-height ) – 行け！偏差値40プログラマー](http://hensa40.cutegirl.jp/archives/3556)
[HTMLで改行する方法：brとpタグの使い分け方は？](https://saruwakakun.com/html-css/reference/br)
[テキストファイルに書き込む方法（Shift-JIS）[エクセルVBA] : バヤシタ](https://bayashita.com/p/entry/show/128)