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. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

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

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

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

    IT

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

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

  3. ボックスデザイン

    IT

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

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

  4. 自作パソコン

    IT

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

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

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

    IT

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

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

  6. 年間ビジターアンケートの落とし穴

    IT

    突然現れる「年間ビジターアンケート」は詐欺!ラッキービジターがきたら要注意!

    みなさんは画像のような画面を見たことはありますか?イン…

コメント

  1. この記事へのコメントはありません。

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

おすすめ記事

  1. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット
  2. 朝霞の森秋祭り【埼玉】
  3. さくらの山公園は飛行機を間近で見れる絶景スポット
  4. CSSで作る!コピペOK<吹き出しデザイン>
  5. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

最近の記事

  1. 【知育玩具】学研ニューブロックは末永く遊べるおもちゃ♪初めて…
  2. 川エビが突然死!鉛巻き水草「カボンバ」の残留農薬が原因?
  3. アンケートに答えてタカラトミーファンズ福袋ゲット!
  4. 夜マック限定「ごはんバーガー」はおいしい!ぜひランチタイムに…
  5. 突然耳に激痛が!夜中に4歳息子が泣き叫んだ理由は「中耳炎」で…
  1. 亀頭包皮炎(きとうほうひえん)

    子育て

    おちんちんの先が赤く腫れて痛い!小児科の診断結果は「亀頭包皮炎」!?男の子によく…
  2. アサヒ飲料キャンペーンでトミカ&リカちゃん&プラレールが当たる

    グルメ

    アサヒ飲料キャンペーンでオリジナルトミカx3台&マイタウンが当たる!その他プラレ…
  3. 香川県でネット・ゲーム依存症対策条例が可決

    その他

    平日1日60分まで?ネット・ゲーム依存症対策条例が全国初で可決、成立【香川県】
  4. 残留農薬?カボンバ入れたら川エビが死んでいく

    その他

    川エビが突然死!鉛巻き水草「カボンバ」の残留農薬が原因?
  5. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

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