IT

種類いろいろ!CSSのborder(線)の使い方

種類いろいろ!CSSのborder(線)の使い方
CSSのborderにはいろいろな種類があります。
見出しに使ったり文字の強調にも使ったり、ページ全体をデザインする上でも重要なものがCSSのborderになります。

これから紹介するものは基本的なものからどの場面で使うの?と言ったものもありますが、基本さえ覚えてしまえば色や太さを自由に変えて、オリジナルのborderを作ることもできますのでぜひ挑戦してみてください!

もちろんコピペOKですよ!

見やすくするためほとんどの例にpadding(余白)を設定してあります。

borderの種類いろいろ


ボーダースタイル「solid」を使った基本となるborderです。

ボーダースタイル「solid」を使用。
全ての囲い線の色を変えたい場合は、一つ一つに太さや色を指定してあげる必要があります。

ボーダースタイル「double」を使用。

ボーダースタイル「groove」を使用。
立体的にくぼんだように表示する線です。

ボーダースタイル「ridge」を使用。
立体的に隆起したように表示する線です。

ボーダースタイル「inset」を使用。
上と左がペアになり、下と右がペアとなって違う色を表示します。

ボーダースタイル「outset」を使用。
上のinsetと逆のパターンです。

ボーダースタイル「dashed」を使用。

ボーダースタイル「dotted」を使用。

border+背景色


borderで囲んで背景に色を設定しました。文字色も「color」で変更可能です。

上下にborderを設定しています。

上下にボーダースタイル「double」を使用していますが、上下で線幅が違います。

border+背景色+影


ぼやっとした影を付けて立体感を出しました。

角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。

背景の内側にborder


borderとbox-shadowの組み合わせです。

上と同じものですが、周りをぼかしてみました。

番外編


背景と同じ色のぼかしを周り全体に行いました。

上のものに追加して、真ん中に白を指定してぼかし線のようにしました。

「box-shadow」と「border-radius」を上手に使うと、複雑な形も作れます。

右端が徐々に透明になっているデザインです。紹介してる線の色は緑色の蛍光色ですが、お好みで色を変えてもいいですね。

左のborderの半分だけに色を指定しています。

最後に

borderの組み合わせでいろいろなものができました。数字や色を変えるだけでたくさんのデザインが可能です。コピペはもちろん、自分オリジナルのものをぜひ作ってみてください。

関連記事

  1. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申請してみよう

    日本年金機構のホームページには詳しく情報が紹介されていると思い…

  2. PCビープ音4回はホコリが原因

    IT

    ビープ音4回はホコリが原因?DellデスクトップPCの異常は掃除で復活!

    電子機器は突然故障したり終わりを告げる事が多いですよね・・・。…

  3. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    IT

    CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてく…

  4. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>

    CSSだけで作れる「吹き出し」をご紹介します!会話風のものやワ…

  5. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請

    毎年5・6・7月になると固定資産税や自動車税、住民税に法人税な…

  6. 算定基礎届(総括表)だけは郵送で!

    IT

    算定基礎届(総括表)だけは郵送らしい!GビズIDで電子申請したけどこれって・・・

    行政の提出書類はとても複雑で大変だと思うのは私だけでしょうか。…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. 確定申告e-taxの推奨ブラウザはInternet Explorer
  2. マイナポイントは電子マネーWAONがおすすめ
  3. クリーミーマヨネーズ味アイス「森永乳業」
  4. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船
  5. おやつカンパニーxトミカ2

最近の記事

  1. 超穴場!無料で遊べる道の駅「瀬戸大橋記念公園」in香川県坂出…
  2. 家にいながら行政手続き!GビズIDを取得してみよう!今から始…
  3. 【子連れ必見】道の駅「源平の里むれ」でおいしいご飯と房前公園…
  4. 仮面ライダーゼロワンのまくらが気持ちいい!
  5. 「ふく」が大きい雪見だいふく無料配布イベント!「ふく」と「福…
  1. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船

    その他

    海上保安資料館横浜館にある北朝鮮工作船の展示が衝撃的すぎ!
  2. スパイシーチキンマックナゲット

    グルメ

    スパイシーチキンマックナゲット!期間限定ソース「黒麻婆ソース」「ハラペーニョチー…
  3. 新型コロナウィルスで店頭から様々なものが品切れ状態

    その他

    消えた!ティッシュペーパーや生理用品が。新型コロナ「デマ」の怖さ!一人ひとりが冷…
  4. 香川県観音寺市「銭形砂絵」

    遊び

    銭形砂絵 「寛永通宝」を見て金運アップ!香川県観音寺市
  5. 特別定額給付金の封筒が小さい

    お金と仕事

    特別定額給付金(10万円)の返信封筒が書類よりも小さい・・・
PAGE TOP