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

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

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

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

    IT

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

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

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

    IT

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

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

  4. jsFiddle

    IT

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

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

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

    IT

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

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

  6. ボックスデザイン

    IT

    CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】

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

コメント

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

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

      • みゆ
      • 2021年 10月 28日

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

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

おすすめ記事

  1. 仮面ライダーゼロワンクリスマスケーキ
  2. 香川県三豊市「不動の滝」
  3. 「食育」保育園で人参堀
  4. CSSで作る!コピペOK<吹き出しデザイン>
  5. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット

最近の記事

  1. 「アベノマスク」を使用してみた!でも最終的にはアレに使用する…
  2. 明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレ…
  3. 【参加無料】りっくんランド自衛隊車両体験搭乗で軽装甲機動車(…
  4. ドコモキャンペーンに応募しよう!「東京2020オリンピック親…
  5. 我が家のクリスマスツリー2020
  1. 飲み口いろいろ水筒タイプ別紹介

    子育て

    子ども用水筒はステンレス?プラスチック?直飲み・コップ・ストローをタイプ別に紹介…
  2. りっくんランド再開館2020

    子育て

    予約制の再開館りっくんランドに行ってみた!さすが自衛隊コロナ禍の感染予防対策は万…
  3. リュウソウジャー最強竜装セットが2,400円だった

    お金と仕事

    今がリュウソウジャー最強竜装セットの底値?購入は放送終了1か月前がお買い得!
  4. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船

    その他

    海上保安資料館横浜館にある北朝鮮工作船の展示が衝撃的すぎ!
  5. ドコモ東京2020オリンピック「親子で応援に行こう!キャンペーン」

    お金と仕事

    ドコモキャンペーンに応募しよう!「東京2020オリンピック親子で応援に行こう」
PAGE TOP