b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

ホームページで点線や実線を表示させる

2015-01-09

HTMLでは、

<hr>と記述するだけで水平線を表示させることができます。
この<hr>のスタイルを点線にしたり、太線にしたり、色を変えたり、変更することができます。
やり方ですが、スタイルシートで<hr>要素にデザインを記述します。


 
↑↑上記のような線にする場合

cssは、下記のように記述しますが、
サイト内すべてのwebページがこのスタイルになります。

hr{ border:none; /*水平線の境界線を消す*/
    border-top-style:solid; /*線の種類*/
    border-top-width:1px; /*線の太さ*/  
    border-top-color:#996666; /*線の色*/ }

スタイルはまとめて記述することができます。

hr{ border:none;
    border-top: 1px solid #996666;
    }

スタイルに長さを指定することができます。
何も指定しない場合は、長さは100パーセントで表示されます。

hr{ border:none;
    border-top: 1px solid #996666;
    width: 70%;
    }

スポンサーリンク

<hr>で指定できる主なスタイル

点線(dotted)は、ブラウザによって見え方が微妙に違ってきます。

32

点線にしたり、色を変えたり、ページやサイト内で違ったデザインの線を表示したい場合は、個々にクラス名を付けて割り当てます。

点線

33
html: <hr class=”line1″>
css

hr.line1{
  border: none;
  border-top: 1px dotted #999;
}

破線

34
html: <hr class=”line2″>
css

hr.line2{
  border: none;
  border-top: 1px dotted #999;
}

二重線

35
html: <hr class=”line3″>
css

hr.line3{
  border:none;
  border-top: double 3px #999;
}

立体的な線

36
html: <hr class=”line4″>
css

hr.line4{
  border:none;
  border-top:1px solid #ccc;
  border-bottom:1px solid #fff;
}

影付きの線(ドロップシャドウ)

37
html: <hr class=”line5″>
css

hr.line5{
  border:none;
  height:30px;
  box-shadow:0 30px 30px -30px #ccc inset;
}

スポンサーリンク


 

-css・html

関連記事

htmlとは?

htmlは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。 このhtmlは、ウェブページ www(ワールド・ワイド・ウェブ)を作成するための言語 …

htmlで特定ページへ自動ジャンプさせる

html 特定ページへ自動ジャンプさせる <meta>タグを使って現在のhtmlページを特定のページへ自動ジャンプさせることができます。 サイト移転の時などに使いますね。××秒後にページを …

ホームページで文字の背景に色をつける

背景色を指定するプロパティです。 background-color: 文字を強調したい場合や、単調な黒文字の文章にアクセントをつけたい場合など、文字の背景に色をつけるとサイトが見栄えよくなります。 サ …

表(テーブル)をcssで作る

ホームページ作成時に、テーブルを作る場合も多くあると思いますが、htmlに実装するよりもスタイルシートで簡単にテーブル(表)をデザインすることができます。cssでデザインするので、htmlもスッキリし …

画像を表示させるタグ

基本-画像を表示させるタグ <img src=”画像のアドレス”> 上記は画像を表示させる基本的なタグです。何も設定していない状態では、画像は左寄せに表示されます。 …

スポンサーリンク

スポンサーリンク