Google検索エンジン

トップページ » スタイルシート入門講座 » CSSでテーブルやブロック要素の枠線(ボーダー)を設定する方法


CSSでテーブルやブロック要素の枠線(ボーダー)を設定する方法

  • 枠線(ボーダー)に関するCSSプロパティ

    CSSプロパティ 意味
    border:下記参照 ボーダーのスタイル・太さ・色を指定
    border-colorcolor ボーダーの色を指定
    border-stylestyle ボーダーのスタイルを指定
    border-widthn ボーダーの幅(太さ)を指定
    border-topborder 上ボーダーのスタイル・太さ・色を指定
    border-top-colorcolor 上ボーダーの色を指定
    border-top-stylestyle 上ボーダーのスタイルを指定
    border-top-widthn 上ボーダーの幅(太さ)を指定
    border-bottomborder 下ボーダーのスタイル・太さ・色を指定
    border-bottom-colorcolor 下ボーダーの色を指定
    border-bottom-stylestyle 下ボーダーのスタイルを指定
    border-bottom-widthn 下ボーダーの幅(太さ)を指定
    border-leftborder 左ボーダーのスタイル・太さ・色を指定
    border-left-colorcolor 左ボーダーの色を指定
    border-left-stylestyle 左ボーダーのスタイルを指定
    border-left-widthn 左ボーダーの幅(太さ)を指定
    border-rightborder 右ボーダーのスタイル・太さ・色を指定
    border-right-colorcolor 右ボーダーの色を指定
    border-right-stylestyle 右ボーダーのスタイルを指定
    border-right-widthn 右ボーダーの幅(太さ)を指定

    ボーダーのスタイル・太さ・色を指定

    borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。

    CSSファイル記述例
    div#test-border{
    	border:dashed 5px #ff0066;
    }
    
    HTMLファイル記述例
    <div id="test-border">ボーダーのスタイル・太さ・色を指定</div>
    Webページの表示
    ボーダーのスタイル・太さ・色を指定

    ボーダーの色を指定

    border-colorプロパティは、ボーダーの色を指定する際に使用します。 #ffffffなどRGB値で指定する方法とblueなどカラーネームで指定する方法があります。 上下左右で異なった色のボーダーを表示したい場合は、スペースで区切って複数の値を指定します。 値を4つ指定した場合は、上から時計回りの順に色を指定したことになります。

    値を1つ指定した場合: [上下左右]がその色になります。
    値を2つ指定した場合: 記述した順に[上下][左右]の色になります。
    値を3つ指定した場合: 記述した順に[上][左右][下]の色になります。
    値を4つ指定した場合: 記述した順に[上][右][下][左]の色になります。

    ボーダーは太さや色だけを指定しても表示されないので注意してください。 これは、border-styleプロパティの初期値がnoneとなっているためです。 ボーダーを表示するには、太さや色だけでなくボーダーの種類も同時に指定する必要があります。

    border-colorプロパティの指定値
    transparent ボーダーの色を透明にします。これが初期値です。
    RGB値で指定 #000000〜#ffffff
    カラーネームで指定 black、white、red、yellow、blue、greenなど
    CSSファイル記述例
    div#test-border-color{
    	border-color:red yellow blue green;
    	border-width:10px;
    	border-style:solid;
    }
    
    HTMLファイル記述例
    <div id="test-border-color">ボーダーの色を指定</div>
    Webページの表示
    ボーダーの色を指定

    ボーダーのスタイルを指定

    border-styleプロパティは、ボーダーのスタイルを指定する際に使用します。 上下左右で異なったスタイルのボーダーを表示したい場合は、スペースで区切って複数の値を指定します。 値を4つ指定した場合は、上から時計回りの順にスタイルを指定したことになります。

    値を1つ指定した場合: [上下左右]がそのスタイルになります。
    値を2つ指定した場合: 記述した順に[上下][左右]のスタイルになります。
    値を3つ指定した場合: 記述した順に[上][左右][下]のスタイルになります。
    値を4つ指定した場合: 記述した順に[上][右][下][左]のスタイルになります。

    上下左右に異なった値(insetやoutsetなど)を指定すると、想定どおりに表示されない場合があります。 また、同じスタイルを指定していても、ブラウザの種類により異なった表示になることがあります。

    border-styleプロパティの指定値
    none 枠線を非表示にします。これが初期値です。
    hidden 枠線を非表示にします。
    solid 1本線の枠線を表示します。
    double 2本線の枠線を表示します。
    dashed 破線の枠線を表示します。
    dotted 点線の枠線を表示します。
    groove 立体的に窪んだ枠線を表示します。
    ridge 立体的に盛り上がった枠線を表示します。
    inset 上と左が暗く、下と右が明るい枠線を表示します。
    outset 上と左が明るく、下と右が暗い枠線を表示します。
    CSSファイル記述例
    div#test-border-style{
    	border-style:dashed double dotted none;
    	border-color:#ff0066;
    	border-width:5px;
    }
    
    HTMLファイル記述例
    <div id="test-border-style">ボーダーのスタイルを指定</div>
    Webページの表示
    ボーダーのスタイルを指定

    ボーダーの幅(太さ)を指定

    border-widthプロパティは、ボーダーの幅(太さ)を指定する際に使用します。 上下左右で異なったスタイルのボーダーを表示したい場合は、スペースで区切って複数の値を指定します。 値を4つ指定した場合は、上から時計回りの順に太さを指定したことになります。

    値を1つ指定した場合: [上下左右]がその太さになります。
    値を2つ指定した場合: 記述した順に[上下][左右]の太さになります。
    値を3つ指定した場合: 記述した順に[上][左右][下]の太さになります。
    値を4つ指定した場合: 記述した順に[上][右][下][左]の太さになります。

    border-widthプロパティの指定値
    数値で指定 数値にpxやemやexなどの単位をつけて指定します。尚、pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。
    キーワードで指定 thin(細い)、medium(普通)、thick(太い)のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。
    CSSファイル記述例
    div#test-border-width{
    	border-width:10px 8px 1px 3px;
    	border-style:solid;
    	border-color:#ff0066;
    }
    
    HTMLファイル記述例
    <div id="test-border-width">ボーダーの幅(太さ)を指定</div>
    Webページの表示
    ボーダーの幅(太さ)を指定

スタイルシート入門講座
it-manual.comのウェブサイト
書籍の紹介
  • 全部無料でつくるはじめてのホームページ & HTML for Windows 7/Vista/XP
    全部無料でつくるはじめてのホームページ & HTML
    発売:2010/07/30
    定価:1,869円
    著者:浅岡 省一
    出版:翔泳社
    内容:ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。
  • フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
    フェイスブック 若き天才の野望
    発売:2011/01/13
    定価:1,890円
    著者:デビッド・カークパトリック
    出版:日経BP社
    内容:ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
  • Twitter×アメブロでビジネスを加速する方法
    Twitter×アメブロでビジネスを加速する方法
    発売:2010/12/09
    定価:1,554円
    著者:青山 華子
    出版:ソーテック社
    内容:ブランディングと人脈を構築する86の法則。twitterやFacebookなど、ソーシャルメディアの時間短縮と有効活用方法を徹底解説。
  • 起業のファイナンス ベンチャーにとって一番大切なこと
    起業のファイナンス ベンチャーにとって一番大切なこと
    発売:2010/09/30
    定価:2,310円
    著者:磯崎 哲也
    出版:日本実業出版社
    内容:人気ブログ「isologue」の磯崎哲也が教える、成功する会社の作り方。
  • できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
    できるホームページ HTML&CSS入門
    発売:2010/12/24
    定価:1,659円
    著者:佐藤 和人
    出版:インプレスジャパン
    内容:オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
  • ネットではじめる! 輸出ビジネス
    ネットではじめる!輸出ビジネス
    発売:2010/08/21
    定価:1,575円
    著者:陳 立浩
    出版:すばる舎
    内容:売れる商材の特徴、言葉の壁の乗り越え方、ネット輸出会社の作り方、効果抜群の広告宣伝のコツやクレームへの対処法まで、この1冊で新たなビジネスモデルが見えてきます。
  • Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
    発売:2010/06/05
    定価:1,575円
    著者:服部 洋二
    出版:ソーテック社
    内容:初心者向けの書籍です。中小企業のWebサイトに携わる方向けの書籍ですので、個人のウェブサイトにも適用しやすい内容となっています。
  • Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
    Webデザインの基本ルール
    発売:2009/03/27
    定価:1,890円
    著者:デザインラボ編集部
    出版:ソフトバンククリエイティブ
    内容:色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
  • HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
    HTML/XHTML&スタイルシートレッスンブック
    発売:2007/06/20
    定価:2,604円
    著者:エビスコム
    出版:ソシム
    内容:初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。
ホームページ作成支援
    Wacom ペンタブレット Mサイズ デジ絵作成入門機 コミスタMini付属 Bambooコミック CTH-661/S1
    発売日:2010/01/15
    参考価格:13,300円
    分類:ペンタブレット
    ブランド:ワコム
    マンガ製作からお絵描き、イラストや写真加工などが楽しめます。タッチ入力機能で直感的なPC操作を実現、便利なアプリケーションソフトも付属してます。
  • Wacom ペンタブレット Sサイズ シンプルタブレット 描き心地にこだわった筆圧1024レベル Wacom Bamboo Pen CTL-460/K0
    発売日:2010/09/30
    参考価格:6,000円
    分類:ペンタブレット
    ブランド:ワコム
    パソコンで、手書き文字やイラストを描くことを可能にするペンタブレットです。ドキュメントにコメントやイラストを書き込んだり、お絵描き掲示板に投稿したり、もちろんマウス代わりにも使えます。
  • IllustStudio パッケージ版
    発売日:2009/05/29
    参考価格:7,980円
    分類:画像編集ソフト
    ブランド:セルシス
    快適に絵を描くことにこだわった基本性能、表現の幅を広げる多彩なツール、「作業」を減らす効率的な機能、イラストを描くユーザー全てのニーズにこたえるペイントツールです。
独自ドメイン取得サービス
  • 「ムームードメイン」は「ロリポップ!レンタルサーバー」を運営するpaperboy&co.の低価格ドメイン取得サービスです。2004年のサービス開始以来、初心者でも簡単にドメイン設定ができる機能と、580円/年〜の手軽な価格帯で、個人を中心に多くの人が利用してます。「ロリポップ!レンタルサーバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • ネットオウル株式会社のスタードメインなら、.comドメインが年額950円で取得できます。スタードメインを利用すると「ネットオウルポイント」が進呈されますので、ネットオウル株式会社のレンタルサーバー「ミニバード」「ファイアバード」「クローバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
  • 「お名前.com プレミアムドメイン」では、世界中で取引されるプレミアムドメインを提供してます。プレミアムドメインとは「英単語を含む」「短く覚えやすい」「ドメインの種類が.com」など、稀少なドメイン名を指してます。個人名や会社名など特定のドメイン名を取得したい方に、おすすめのサービスです。
おすすめレンタルサーバー
  • 「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • 月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。