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

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

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

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

    IT

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

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

  3. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう

    私はよくイオンへお買い物に行って、電子マネーWAON払いもしく…

  4. jsFiddle

    IT

    「jsFiddle」は登録なし!コード動作確認が簡単!埋め込みも可

    自分のサイトを持っていて、いろいろいじっているうちにだんだん既…

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

    IT

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

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

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

    IT

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

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

コメント

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

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

      • みゆ
      • 2021年 10月 28日

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

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

おすすめ記事

  1. ドコモ東京2020オリンピック「親子で応援に行こう!キャンペーン」
  2. 虫よけ効果大の製品はどれ?
  3. お年玉付き年賀はがきの切手シートが当たりました
  4. 香川県牟礼の道の駅「源平の里むれ 」
  5. イオンキッズパブリック限定Nintendo Switch抽選販売

最近の記事

  1. 【Youtube】江頭2:50のエガちゃんねる!視聴者の一人…
  2. 突然現れる「年間ビジターアンケート」は詐欺!ラッキービジター…
  3. 平日1日60分まで?ネット・ゲーム依存症対策条例が全国初で可…
  4. 【食育】保育園で人参掘り!人参チップスは難しい・・・
  5. 陸上自衛隊広報センター「りっくんランド」メールによる事前予約…
  1. 特別定額給付金の封筒が小さい

    お金と仕事

    特別定額給付金(10万円)の返信封筒が書類よりも小さい・・・
  2. ロッテとトミカキャンペーン

    グルメ

    チョコパイとトミカがコラボ!チョコパイトミカが当たるキャンペーン!トミカ50周年…
  3. 長岡まつり大花火大会

    遊び

    子連れ長岡花火!暑さ対策&渋滞対策万全で楽しもう!当日無料席確保レポあり!
  4. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Pa…
  5. りっくんらんど軽装甲機動車体験搭乗

    子育て

    【参加無料】りっくんランド自衛隊車両体験搭乗で軽装甲機動車(LAV)体験
PAGE TOP