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. 不労所得?chatGPTに負けない!2年以上ほったらかしブログが毎日お金を生んで…

関連記事

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

    IT

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

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

  2. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリーンショット)

    特別なソフトを買うことなくパソコンの画面を簡単に録画できる方法…

  3. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

    マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    windows10にして何枚かの画像を見る時にマウスホイールを…

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

    IT

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

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

  5. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

    収益1,000円達成でGoogle AdSenseからPINコードが郵送される!

    Google AdSense(以下、アドセンス)からPINコー…

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

    IT

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

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

コメント

    • はらぺこりなぺこ
    • 2021年 10月 28日

    ポートフォリオ制作をしていて、テキストの背景色をぼかしたくて検索していたところ、こちらのサイトを発見いたしました。
    無事に解決です!!
    ありがとうございます。

      • みゆ
      • 2021年 10月 28日

      はらぺこりなぺこ、コメントありがとうございます。
      お役に立てて嬉しいです!
      素敵なポートフォリオになるよいいですね!
      陰ながら応援しています♪

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

おすすめ記事

  1. エステのチラシは隅々まで読んで
  2. ドコモ東京2020オリンピック「親子で応援に行こう!キャンペーン」
  3. アサヒ飲料オリジナルトミカ&マイタウン当選
  4. 確定申告e-taxの推奨ブラウザはInternet Explorer
  5. 令和元年さいたま市総合防災訓練・防災フェア

最近の記事

  1. 目の充血・かゆみ・しこりの原因は「ものもらい(麦粒腫)」でし…
  2. 息子が作るハッピーセットが斬新すぎる!マックやさんごっこ♪
  3. 【マイニンテンドーストア】Nintendo Switch あ…
  4. 【子連れ必見】道の駅「源平の里むれ」でおいしいご飯と房前公園…
  5. アマゾンプライムデー 2020/10/13~14 今年も来た…
  1. ドコモ子育て応援プログラム

    お金と仕事

    毎年3,000Pゲット!子育てドコモユーザー必見!「ドコモ子育て応援プログラム」…
  2. 初めての投稿

    その他

    プロフィール
  3. エステのチラシは隅々まで読んで

    お金と仕事

    脱毛に限らずエステ系のチラシは隅々まで読んでから来店しよう!
  4. 横浜防災フェア2019

    遊び

    横浜防災フェア2019@赤レンガ倉庫!はしご車搭乗体験や水難救助訓練・消防艇の放…
  5. 子どもの擦り傷・切り傷にゲンタシン軟膏

    健康

    子供の擦り傷・切り傷の味方!ケガをした時はゲンタシン軟膏を塗ろう!
PAGE TOP