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

    IT

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

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

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

    IT

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

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

  3. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Microsoft Ed…

    確定申告をしなければいけない方にとって、この一か月は忙しい期間…

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

    IT

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

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

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

    IT

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

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

  6. jsFiddle

    IT

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

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

コメント

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

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

      • みゆ
      • 2021年 10月 28日

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

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

おすすめ記事

  1. 瀬戸大橋記念公園
  2. タカラトミーファンズ福袋2020
  3. 小学館の図鑑NEOシリーズのクラフトぶっく
  4. ロッテとトミカキャンペーン
  5. さくらの山公園は飛行機を間近で見れる絶景スポット

最近の記事

  1. 【Youtube】江頭2:50のエガちゃんねる!視聴者の一人…
  2. 子ども用水筒はステンレス?プラスチック?直飲み・コップ・スト…
  3. 夜マック限定「ごはんバーガー」はおいしい!ぜひランチタイムに…
  4. 【小学生以下限定】2020/9/6(日)~ガンバライジング始…
  5. 【イオンキッズパブリック】Nintendo Switch抽選…
  1. 香川県牟礼の道の駅「源平の里むれ 」

    グルメ

    【子連れ必見】道の駅「源平の里むれ」でおいしいご飯と房前公園でめいっぱい遊ぼう♪…
  2. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリー…
  3. トイザらス限定仮面ライダーセイバー&仮面ライダーブレイズ 完全なりきりセット

    子育て

    トイザらス限定!仮面ライダーセイバー&仮面ライダーブレイズ完全なりきりセットが豪…
  4. エステのチラシは隅々まで読んで

    お金と仕事

    脱毛に限らずエステ系のチラシは隅々まで読んでから来店しよう!
  5. 無料クレーンゲームのあるスーパー

    お金と仕事

    無料クレーンゲームがあるスーパー発見!何度でもやりたくなっちゃう♪
PAGE TOP