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. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Part1

    大きい買い物をしなければいけない日が来ました!それはデ…

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

    IT

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

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

  3. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=radioが原因?P…

    このブログもワードプレスを利用して作られていますが、カスタムフ…

  4. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりすることができる?偶然見…

    パソコンでインターネットを何気なく使っていて突然画面が変わりま…

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

    IT

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

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

  6. ワードプレスの自動入力候補(履歴)を削除する方法

    IT

    Google Chromeでワードプレスの自動入力候補(履歴)を削除する簡単な方法

    まずみなさんはパソコンのブラウザ何をお使いですか?代表…

コメント

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

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

      • みゆ
      • 2021年 10月 28日

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

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

おすすめ記事

  1. きたなだ海の駅
  2. タカラトミーファンズ福袋2020
  3. ガンバライジングカード無料配布キャンペーン
  4. 新型コロナウィルスで店頭から様々なものが品切れ状態
  5. ドコモ東京2020オリンピック「親子で応援に行こう!キャンペーン」

最近の記事

  1. Google Chromeでワードプレスの自動入力候補(履歴…
  2. 【確定申告】e-Tax利用時のブラウザはInternet E…
  3. 【当選】オリジナルトミカx3台&マイタウン「アサヒ飲料キャン…
  4. 小学館の図鑑NEOシリーズのクラフトぶっくは作るだけじゃない…
  5. 幼児38度の高熱一週間!インフルでも溶連菌でもない。正体はア…
  1. 明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレゼントキャンペーン

    グルメ

    明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレゼントキャンペーン …
  2. 大量の明星チャルメラの袋

    グルメ

    大量の明星チャルメラの外袋が届きました。明星チャルメラxトミカコラボ「くろネコカ…
  3. 瀬戸大橋記念公園

    子育て

    超穴場!無料で遊べる道の駅「瀬戸大橋記念公園」in香川県坂出市
  4. ガンバライジングカード無料配布キャンペーン2020年10月

    子育て

    2020/10/3(土)~・10/4(日)~ガンバライジング始めようセット 無料…
  5. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりする…
PAGE TOP