閉じる
閉じる

あまめも

【HTML】<hr>タグ(区切り線)を簡単にカスタム【css】

線(line)

こんにちは! あますた(@amaguristar)です。

  • 「HTMLの区切り線をカスタムしたい!」

そんな時ありますよね? 直ぐに使える様にサンプルを数種類用意しておきます。

 

サンプル一覧

破線


hr {
    border: none; /* デフォルトをキャンセル */
    border-top: 2px dashed #ff00ff; /* 太さ, スタイル, 色 */
}

点線


hr {
    border: none; /* デフォルトをキャンセル */
    border-top: 2px dotted #ff00ff; /* 太さ, スタイル, 色 */
}

区切り線にグラデーションを設定


hr { 
    border: none; /* デフォルトをキャンセル */
    height: 2px; /* 線の高さ */
    background: linear-gradient(90deg, #ff00ff, #00ff00);
}

上記、linear-gradientの引数は、(グラデーションする方向,開始色,終了色)です。

上記例では、左から右に紫→緑にグラデーションする事を表しています。

角度を指定しない(0deg)場合は下から上に向かってグラデーションします。

真ん中が一番濃くて端が薄いグラデーションの区切り線


hr { 
    border: none; /* デフォルトをキャンセル */
    height: 2px; /* 線の高さ */
    background: linear-gradient(90deg, rgba(255,0,0,0.1) 0%,  rgba(255,0,0,1) 50%, rgba(255,0,0,0.1) 100%);
}

今回のlinear-gradientの引数は、(グラデーションする方向,開始色,線の中右心の色,終了色)です。

rgbaで色を指定してます。()内はそれぞれ(赤,緑,青,アルファ値)を表し、色はそれぞれ(0~255)、アルファ値は(0.0~1.0)の範囲で指定。

rgba( 赤, 緑, 青, アルファ値)
赤: 0~255
緑: 0~255
青: 0~255
アルファ値: 0.0~1.0 (1.0が表示, 0.0は表示されない, 0.5は背景の色と設定した色がちょうど半分で透過処理される)

関連記事

  1. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  2. 09152021-thumbnail

    phpで日本語urlをエンコードorデコードする簡単な方法

  3. take067-thumbnail

    【WaznFilm更新】新感覚陣取りゲーム「Potlatch K…

  4. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  5. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

  6. take095-thumbnail

    【WaznFilm更新】FontAwesomeを通常のアプリ(W…

こんなメモもありますよ♪

  1. 珈琲館

Twitter

ページ上部へ戻る