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. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

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

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

  2. 自作パソコン

    IT

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

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

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

    IT

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

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

  4. jsFiddle

    IT

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

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

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

    IT

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

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

  6. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    IT

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

    CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてく…

コメント

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

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

おすすめ記事

  1. 算定基礎届と賞与支払届をGビズIDを使って電子申請
  2. 横浜防災フェア2019
  3. ワードプレスの自動入力候補(履歴)を削除する方法
  4. ガンバライジングカード無料配布キャンペーン
  5. 雪見だいふくイベント

最近の記事

  1. 【トミカ博 in YOKOHAMA 2019】初日激混み体験…
  2. GWの激混み「ふなばしアンデルセン公園」レポ!駐車場・アスレ…
  3. 【Youtube】江頭2:50のエガちゃんねる!視聴者の一人…
  4. 香川県三豊市「不動の滝」
  5. 明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレ…
  1. 特別定額給付金の封筒が小さい

    お金と仕事

    特別定額給付金(10万円)の返信封筒が書類よりも小さい・・・
  2. ボックスデザイン

    IT

    CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】
  3. 息子が作るハッピーセットが斬新すぎる

    子育て

    息子が作るハッピーセットが斬新すぎる!マックやさんごっこ♪
  4. 子どもの擦り傷・切り傷にゲンタシン軟膏

    健康

    子供の擦り傷・切り傷の味方!ケガをした時はゲンタシン軟膏を塗ろう!
  5. 陸上自衛隊広報センター「りっくんランド」メールによる事前予約ひな形!コピペして使って下さい

    子育て

    陸上自衛隊広報センター「りっくんランド」メールによる事前予約ひな形!コピペして使…
PAGE TOP