Front-endTools

CSS border ジェネレーター

枠線をつけるためのCSS自動生成ツールです。
上下左右に個別に指定が出来る他、点線(dotted)・破線(dashed)・二重線(double)・立体的な線(groove / ridge / isnet / outset)なども生成することができます。プレビューのサイズ(横幅・縦幅)や角丸(border-radius)の指定も可能です!

サンプル一覧(見本)。作りたいもののイメージに一番近いものを選択して下さい。選択後に編集することが可能です。

※サンプル一覧の例を選択した際、編集中のデータがある場合上書きされますので、ご注意ください。
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
  • border
border
.original-border {
  width: 280px;
  height: 100px;
  background-color: #eeeeee;
  border: 5px solid #333333;
}

ツールを使用するにあたっての注意

  • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
  • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
  • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

その他の指定

ツールの使い方について

・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

  • フリーランスとして生きていきたい。
  • HTML / CSSの書き方が分からない・不安がある
  • きちんと会社のホームページやブログを作ってみたい!
  • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
  • 好きな時間に好きな場所で仕事出来るようになりたい!
  • しっかり技術を身につけて、収入を上げたい。
  • 簡単に効率的にホームページを作れる方法やツールが知りたい!
  • 全くの初心者なので、プロからしっかりと学んでみたい
  • 外注すると高いので、自分で身に付けたい

こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。

各CSSプロパティの説明

border

borderプロパティは要素に枠線を設定することができます。

各値(value)は、次のように指定することができます。
border: 枠線の幅枠線の種類枠線の色
記述例) border: 1px solid #333
ちなみに、値の順序は関係ありません。
borderの初期値はnoneです。

それぞれの値を個別に指定することもでき、

  • border-width
  • border-style
  • border-color
のプロパティがあります。
記述例) border-width: 10px;

border-styleにはsolid(実線)以外にも以下のような値を指定することができます。

  • double
  • groove
  • ridge
  • inset
  • outset
  • dashed
  • dotted
ただし、dottedやdashedなどはブラウザによって描画のされ方が違うことがありますので、ご注意ください。

枠線を指定する方向を定義することもできます。

  • border-top
  • border-bottom
  • border-right
  • border-left
記述例) border-left: 10px solid #333;

これらの指定を組み合わせることにより、以下のような指定をすることもできます。
記述例) border-top-color: red;
記述例) border-left-width: 20px

border-radius

border-radiusプロパティは要素の角を丸くすることができます。

値(value)は、次のように指定することができます。
記述例) border-radius: 5px;
初期値は0です

4箇所(左上、右上、右下、左下)それぞれを次のプロパティで指定することもできます。

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
記述例) border-top-left-radius: 10px;