HTMLのTableをVBAで作る 4

記事「HTMLのTableをVBAで作る」では
セルの「塗りつぶし」を
記事「HTMLのTableをVBAで作る 2」では
セルの「塗りつぶし」と「大きさ」をTableにしました。
記事「HTMLのTableをVBAで作る 3」では
「文字」も反映させました。

次は、セル内の文字の色と大きさも付け加えます。

セル内の文字のプロパティを使ったことがないので
Fontに関するプロパティを
ウォッチウィンドウで調べます。

こんな風になってます。
よくわからないプロパティもありますが
よく使うと思われるのが

Bold
Color
ColorIndex
Italic
Size

と、これくらいでしょうか。
個人的にわかりやすく並べかえます。

Size
Color
ColorIndex
Bold
Italic

SizeプロパティはIntegerのようなイメージだったのですが
Double型。
思った以上に
キメ細やかな設定が可能なのでしょうか？
試してみます。

ウオッチウィンドウのSizeプロパティを変更して
18.3にしてみました。
（上の画像のSizeの値のところ）
Excelのウィンドウのフォントのサイズは
18.5になってます。

いろいろ試しましたが
0.5刻みで設定が可能のようです。
18.1なら18に、
18.6なら18.5に、
18.8なら19にまるめられます。

Colorプロパティはおなじみ、長整数型。
ColorIndexも1から56までの整数はおなじみ。
BoldとItalicはTrue or FalseのBoolean型。

まず最初に…
テキトーに文字を入れ
テキトーに色をつけた
4x4のセルを用意しました。

これをTableにします。

この例で新しく使うプロパティは

Cells( i, j ).Font.Size
Cells( i, j ).Font.Color
Cells( i, j ).Font.Bold
Cells( i, j ).Font.Italic

Sizeはそのままstyle属性に使います。
Colorは今まで通り16進数に変換して使う。
BoldとItalicはそれぞれTrueの場合に、
style属性に
font-wight:bold;とfont-style:italic;を追加する。

コードはこちらです。

Sub macro100209a()
    Dim i, j As Integer
    Dim MyHTML As String
    '生成したHTMLを入れる
   
    Dim bg_HexColor, font_HexColor As String
    '長整数型を16進数に変換した文字列を入れる
    Dim TWidth, THeight As Integer
    'Tableの幅と高さを入れる
    Dim AddTWidth, MyStyle As String
    '順にwidth属性とstyle属性の文字列
   
    MyHTML = "<TABLE><TBODY>"
    For i = 1 To 4
        'i行の始まり
        '高さ設定
        THeight = Int(Cells(i, 1).RowHeight * 100 / 75)
        MyHTML = MyHTML & "<TR height=" & THeight & ">"
        For j = 1 To 4
            'i行j列について
            MyStyle = "style=" & Chr(34)
            
            '幅設定、1行目のみ
            If i = 1 Then
                TWidth = Int(Cells(i, j).ColumnWidth * 100 / 11.8)
                AddTWidth = " width=" & TWidth
            End If
            
            'Boldの判定
            If Cells(i, j).Font.Bold Then
                MyStyle = MyStyle + "font-weight:bold;"
            End If
            
            'Italicの判定
            If Cells(i, j).Font.Italic Then
                MyStyle = MyStyle + "font-style:italic;"
            End If
            'フォントサイズを追加
            MyStyle = MyStyle + "font-size:" & Cells(i, j).Font.Size & "pt;"
            '背景色を追加
            bg_HexColor = LngtoHexColor(Cells(i, j).Interior.Color)
            MyStyle = MyStyle + "background:" & bg_HexColor & ";"
            'フォントの色を追加
            font_HexColor = LngtoHexColor(Cells(i, j).Font.Color)
            MyStyle = MyStyle + "color:" & font_HexColor & ";" & Chr(34)
            MyHTML = MyHTML & "<TD " & MyStyle & AddTWidth & ">" & _
                Cells(i, j) & "</TD>"
            AddTWidth = "" 'AddTWidthをなしにする
        Next j
        MyHTML = MyHTML & "</TR>"
    Next i
    MyHTML = MyHTML & "</TBODY></TABLE>"
   
    '生成したHTMLを適当なセルに書き出す
    Cells(6, 1) = MyHTML
End Sub

下が生成されたTableのHTMLソースです。

<TABLE><TBODY><TR height=56><TD style="font-weight:bold;font-size:36pt;background:#99CC00;color:#FF0000;" width=62>G</TD><TD style="font-style:italic;font-size:18pt;background:#FFCC00;color:#808000;" width=74>B</TD><TD style="font-size:24pt;background:#FF00FF;color:#00CCFF;" width=48>5</TD><TD style="font-size:12pt;background:#FF99CC;color:#FFFFFF;" width=129>r</TD></TR><TR height=123><TD style="font-weight:bold;font-size:60pt;background:#0000FF;color:#000080;">f</TD><TD style="font-style:italic;font-size:32pt;background:#00FFFF;color:#800080;">H</TD><TD style="font-size:28pt;background:#666699;color:#FFFF99;">W</TD><TD style="font-weight:bold;font-style:italic;font-size:100pt;background:#808080;color:#000000;">1</TD></TR><TR height=89><TD style="font-weight:bold;font-size:24pt;background:#FF0000;color:#000000;">9</TD><TD style="font-size:70pt;background:#FFFFFF;color:#808080;">P</TD><TD style="font-size:18pt;background:#0000FF;color:#00FF00;">Q</TD><TD style="font-style:italic;font-size:45pt;background:#333399;color:#FF6600;">v</TD></TR><TR height=84><TD style="font-size:55pt;background:#000000;color:#CC99FF;">L</TD><TD style="font-weight:bold;font-size:18pt;background:#333300;color:#99CC00;">k</TD><TD style="font-size:42pt;background:#FF6600;color:#00CCFF;">j</TD><TD style="font-size:28pt;background:#008000;color:#808000;">3</TD></TR></TBODY></TABLE>

これをHTMLに埋め込んだものが↓です。

G	B	5	r
f	H	W	1
9	P	Q	v
L	k	j	3

文字の位置が違うようですね。
valign = "bottom"
を加えればより忠実に再現できそうです。

追記：
上のテーブルの中の文字の1部が切れています。
管理人ローカル環境では切れていなかったので
ココログ独自のスタイルシートが原因だと考え、
いろいろ設定してみました。
しかし、うまくいきませんでした。
ですのでサンプルページを用意しました。
こっちはこっちでフォントが違ってたりします。