ホームページの作成ー画像とその右の文字列の間に一文字分の隙間を作る
図形の右にテキストを配置する時、その間に隙間を一文字分付けたい時があります。「画像の左寄せ」だけだと、どうしても図形と文字がくっついてしまいます。
パソコン画面では文字列が一行で収まっているなら、最初の文字をスペースにすれば何とかなりますが、スマホで見た場合、下記画像のように二行になってしまうことがよくあります。そうすると、スマホ画面では二行目が図形とくっついてしまうので困ってしまうことがある。
下のスマホ画像のように、一行目も二行目も左に一文字分だけの空きを作成したい場合のやり方について書いてみました。
Hpb画面上では、以下の画面のように二つの設定をすればいい
- 画像を右クリックして、「属性の変更」画面を開きます。従来の通り、「画像の左寄せ」を選択する。（下の左画像を参照）
- 次に右下の「スタイル」をクリックして、「レイアウト」タブをクリックして、右方向のマージンに一文字分の高さを指定します。（下の右画像）
- 上記操作は、1．で align=”left” 2．で style=”margin-right:1em;” を設定していることになります。
下の左画面にある左右・上下の余白をいくら設定しても余白が出てきません。これは、vspaceやhspaceはhtml5に対応していないためだと思います。
