Front-endTools

CSS 三角形 ジェネレーター

HTMLとCSSのみで三角形をつくるためのジェネレーターです。
CSSのborderを利用することにより図形を自動生成します。上下左右以外にも360度の方向が指定可能!
色も変更可能です。吹き出しやフローチャートなどでご活用ください。

.triangle {
  border-style: solid;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #555555;
}

スタイルエディター

その他の指定

ツールの使い方動画の紹介

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

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

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

  • フリーランスとして生きていきたい。
  • 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