1本だけ線を引くCSS - スタイルシートTipsふぁくとりー《2017年6月23日 16:30 公開/更新》 1本だけ線を引くCSS [ボックス,線] 文章や話題の区切りを示す目的とか、何らかのデザインなどでウェブページ内に「1本だけ線を引きたい」と思うことがあります。細い1本の横線を。CSS(スタイルシート)を使えば、太さ1ピクセルの線を1本だけ横方向に引くのも簡単です。「ボックスの枠線を活用する」方法と「hr要素を装飾する」方法がありますので、その2通りを解説。 CSS(スタイルシート)を使って1本だけ線を引く方法 方法1. ボックスの枠線として「1本線」を引くCSSの書き方 点線や破線はもっと太くすると違いが分かりやすい 直近の文字と1本線との間隔(距離)を調節したい場合 二重線を引くこともできるが、その場合は太さを「3px」以上にしないといけない 方法2. 区切りを示す目的としてhr要素を使う書き方 hr要素で引く水平線を破線にするCSSの
