• 受付
  • すぐに回答を!

テキストをHTML、CSSに変換しています。

  • 質問No.9766481
  • 閲覧数80
  • ありがとう数0
  • 回答数1

お礼率 14% (7/47)

添付画像の[CONTENTS]、目次ページをHTMLとCSSで作成しなくてはならなくなりました。

文字の大きさ、色の調整、’line-height’、’marigin'などを使い凡そのレイアウトはうまくいきました。

(質問1)
わからなかったのが、CONTENTSの右横にある赤の点線です。
これは<hr>を使って'dashed'などをかけてみたのですがうまくいきませんでした。
文字の横ではなく、文字の下側のラインに点線が出来てしまいます。
これは第1章の各項目でも同じことが言えます。文字の右横。文字の高さの中心と同じ高さに点線が作れません。

「 01 エクセルを起動・終了する ---------------------------------- 010」

うまく行く方法をご存知の方いらっしゃいましたら教えてください。

(質問2)
リストの左揃えはタグ<dd>に’margin-left’をかけて揃えています。
リストのページ(数字)を右端で揃えるには同様に'margin-right'でうまくいきますか?点線の長さや、リストの文字数を勘案しても添付画像のようにキレイに右端で揃えるにはどうやったらよろしいでしょうか?

慣れないHTML、CSSで苦労しています。
ご教授お願い致します。




*ちなみにこのリストは<dl><dt><dd>で作成しています。


**************************************************

CONTENST ---------------------------------------------------------------------
目次

【第一章】 これだけは知っておこう

01 エクセルを起動・終了する ---------------------------------- 010
02 ウィンドウの構成を知る ------------------------------------ 012
03 ワークシートの構成を知る ---------------------------------- 014
04 ファイル(ブック)を保存する -------------------------------- 016
05 保存した(ブック)を開く ------------------------------------- 018
06 Column 他のバージョンで開くには?------------------------- 020

******************************************************

回答 (全1件)

  • 回答No.1

ベストアンサー率 50% (4/8)

いくつかやり方はありますが、ひとつの例として。
新しいファイルにそのままコピれば見られると思います。
数値を変えたりプロパティを消してみたりしてどうなるか実験してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>sample</title>
<style>
dd {
overflow: hidden; /* ddからはみ出た罫線を見えなくする */
}
dd span {
position: relative; /* afterの基準とする要素はこれですよ */
display: inline-block;
padding-right: 5px; /* 文字と罫線の間隔 */
}
dd span::after {
content: '';
position: absolute;
top: 50%; /* 縦中央に */
left: 100%; /* spanの右端(左から言えば左に100%ずらした位置)からスタート */
width: 10000px;
border-top: 1px dashed #f00;
}
</style>
</head>

<body>
<dd><span>01 エクセルを起動・終了する</span></dd>
</body>

</html>
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ