株式会社スゴヨク グーグルパートナーバッジ

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS入門】cssで枠線を引くborderを解説

SUGOYOKU BLOG

【CSS入門】cssで枠線を引くborderを解説

福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。

今回は、CSSの「border」についてご紹介していきたいと思います。

borderとは

borderは、HTMLの要素に対して枠線を指定するプロパティです。borderでは、枠線の色、太さ、種類を指定することができます。



指定できる値は以下の通りです。

項目
redやblueなどの色指定、#000000のような16進数指定
太さ pxや%で指定、thin,thickなどのキーワード指定
種類 solid(1本線)、double(2本線)、dotted(点線)、dashed(破線)などで指定
HTML CSS

上記の指定をしたものが以下の画像です。




borderプロパティは上辺や左辺や下辺などの一辺だけの指定をすることもできます。
先程のhtmlとcssを使いご説明していきます。

HTML CSS

上記の指定をしたものは下の画像です。




上記では、border-bottomを指定しましたが、border-topやborder-left等の指定をすることで
任意の場所に枠線を引くことができます。

borderプロパティの枠線に色・種類・太さ

ここでは、上でご説明したborderプロパティに種類を太さの値も入れていきます。

htmlは上で使用したものと同様の物を使用します。

HTML CSS

上記のものが以下の画像です。



以上でborderプロパティはマスターできます。

これで終わりではないです。

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

border-radiusの使い方

ここでは、border-radiusについてをご説明していきます。

border-radiusは、pxや%で指定することができます。

以下でhtml・cssと画像を使い、ご説明します。

HTML CSS

上記のhtml・cssは以下の画像のようになります。



さらに、以下のような指定をしてあげることで
綺麗な丸の図形を作ることもできます。

HTML CSS

「border-radius:50%;」とは、半分ということですので
今回のケースでご説明すると、300pxの半分の150pxということにになります。

今回は、borderとborder-radiusについてご説明しました。
borderプロパティは、web制作時に使用することも度々ございますので
これを機にマスターしてみてください。

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得