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