【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

/*全体*/
.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;
}

変換

' 上書き書込みのサンプル。
' 元のファイルの内容はクリアされる。
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だけ！要素の表示・非表示を切り替える方法
 boxの配置 position/css
ホームページ作成 - 文章を下げる（インデント）
[ HTML ] 文字間隔と行間（行の高さ）を設定する ( letter-spacing / line-height ) – 行け！偏差値40プログラマー
 HTMLで改行する方法：brとpタグの使い分け方は？
テキストファイルに書き込む方法（Shift-JIS）[エクセルVBA] : バヤシタ