• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

PATE NOTE

ゆるく生きる思考と技術

  • note profile
  • note magazine
  • Contact Us
  • privacy policy

スタイルシート(CSS)で直線や点線・破線を表示する方法

2009-03-12 by PATE

以前は、線などもgif画像で用意するのが一般的でしたが、ここ数年は、スタイルシート(CSS)も急激に普及してきて、デザインのほとんどをスタイルシートで作成しているサイトが多くなっています。

[html]<HR>[/html]

これだけでも線は簡単に引けますが、今回はCSSでやってみましょう。

直線や、点線・破線の表示方法

↓ 直線
[css]border: 1px solid #ccc;[/css]

↓ 点線
[css]border: 1px dotted #ccc;[/css]

↓ 破線
[css]border: 1px dashed #ccc;[/css]

線の太さを指定する場合、1pxのところの数値を変えれば、線の太さが変わります。

色を変えたい場合は、#cccのところを任意の色に変えてください。

CSSで直線や点線・破線を表示する方法の応用

1方向のみに線を表示させたい場合は、borderの後ろに、-top等の方向を指定。

↓ 直線を上に表示
[css]border-top: 1px solid #ccc;[/css]

↓ 直線を下に表示
[css]border-bottom: 1px solid #ccc;[/css]

↓ 直線を右に表示
[css]border-right: 1px solid #ccc;[/css]

↓ 直線を左に表示
[css]border-left: 1px solid #ccc;[/css]

こんな感じでCSSに記述すると、線の太さ、色の指定や、線の種類、線を引く場所を簡単に指定して、色々な線を引くことができます。

Webサイトを作っていると、線を引く場面がよくあるので、こういうのを知っていると便利ですよ^^

Filed Under: ブログ運営

最初のサイドバー

かれこれ10年以上ネットで稼ぎながらゆるく生きています。Twitterフォロワー1万人越えインフルエンサーの中の人。こうしてゆるーく生きていくための思考と技術をnoteに書いてます。1000円/月だけどランチ1回我慢する程度で社畜の人生とおさらばできると思えば安いもんです。こう見えて意外と人気なんですよ。

note はこちら

人気の投稿

  • Apple WatchのDigital Crownは左側にしておくといいよ
    Apple WatchのDigital Crownは左側にしておくといいよ
  • 知っておくべき集中力と時間帯との関係
    知っておくべき集中力と時間帯との関係
  • 「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】
    「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】

Twitter

ツイート

Instagram

Instagram でフォロー

Footer

Category

Archive

© 2025 PATE NOTE