トップ » 参考資料・TIPS集 » TIPS » CSS講座 » CSS基礎講座　CSSで楽しよう！vol.6　各要素編（2 page）

CSS基礎講座　CSSで楽しよう！vol.6　各要素編

～いよいよ仕上げ！各プロパティの解説と注意点。

印刷用ページを表示する

関連タグ

( 2008/6/4　グリニッジ有限会社　金井佳子　)

borderプロパティ

次にtableタグのスタイルをつけていきましょう。
まずは、枠線をつけます。オレンジ色の枠線がtable全体を囲っています。

今回のCSSはこうなります。このままでは幅が狭いので、width指定もつけました。

PLAIN TEXT
CODE:
  1. /*テーブルに外枠をつけて幅も設定*/
  2. table{
  3.     border:1px #f63 solid;
  4.     width:80%;
  5. }

borderプロパティは、先ほどのbackgroundプロパティと同じく、複数指定できる枠線の指定をまとめて行う場合に使用します。指定できるのは、

「太さ、色、スタイル」です。

各々のデフォルトは「medium 、指定する要素の色、none（なし）」です。今回は、「太さ1px、オレンジ、実線」の指定です。
このborderプロパティは、上下左右、個別に指定も出来ます。実に様々なスタイルが用意されていますので、サンプルなどを参考に、自由にデザインしてみて下さい！（しかし、ブラウザ間で表示に差が出ますので、主要ブラウザでのチェックをお忘れなく。）

次にcaptionのスタイルを指定しましょう。captionタグはテーブルの見出しという意味でした。色をオレンジに、太字にして、左に寄せましょう。CSSはこうなります。

PLAIN TEXT
CODE:
  1. /*オレンジ色で、太文字にして強調、左寄せに。*/
  2. caption{
  3.     color:#f63;
  4.     font-weight:bold;
  5.     text-align:left;
  6. }

colorプロパティ

フォントの色なので、font-color:と書きたいところですが、フォント色の指定は「color:」と書きます。間違いやすいので気を付けて下さい。
colorプロパティに色を指定する代表的な方法は、「カラーネーム」と「カラーコード」があります。

  • カラーネーム：
    色の名前で指定できます。147色あり、それ以外の名前では指定できません。例）black
  • カラーコード：
    赤、緑、青の3色を16進数で表した物。16,777,216色指定できます。例）#000000

カラーコードを、「赤・緑・青」を表す数字に分け、各々が同じ場合、一つに省略できます。

#00ffffの場合、00とffとffに分解、0ffに省略出来る事になります。

ですから今回の指定は、#ff6633と同じ意味になります。

ちなみに、この省略が出来る色は、Webセーフカラーです。
現在では、Webセーフカラーにこだわる必要はないとされていますが、携帯電話用や、全ての環境で同じ色表示であって欲しい時は、ここから選ぶと安心です。

text-alignプロパティ

デフォルトの指定では、キャプションは中央ぞろえになっています。ここでは左に寄せたいので、text-alignプロパティを使いました。

text-alignプロパティは、

ブロック要素の内容(テキスト、画像などのインライン要素)

の配置を決めるプロパティです。あくまでも中身だけです。
指定できるのは、左揃え(left)、中央ぞろえ(center)、右揃え(right)です。

IEのバグに注意！

IEでは、このtext-alignプロパティを使って、ブロック要素の配置制御が出来てしまいます。そのため、他のブラウザでテストを行わなかった場合等、意図しないデザインになっている事がよくあります。
あくまでもバグですので、ブロック要素の配置を決める場合は、余白(marginプロパティ)で制御するようにして下さい。IEが次のバージョンでバグを直すと、CSSも変更しなくてはいけない事になってしまい、無駄が生じます。

さあ、あと一息です。テーブルのthに幅を指定して、読みやすい表に仕上げましょう！

PLAIN TEXT
CODE:
  1. /*各項目の幅を調整。余白や左寄せなど、読みやすく調整*/
  2. table th{
  3.     width:20%;
  4.     text-align:left;
  5.     padding:2px;
  6. }

幅を指定して、左揃え、余白も指定しました。
出来上がりです！

最終的なCSSとHTMLファイルはこうなりました。

CSS：

PLAIN TEXT
CODE:
  1. @charset "shift_jis";
  2. /* 余白を初期化 */
  3. * { margin:0;    padding:0;  }
  4. /* 基本の設定　テキストのサイズやフォントの種類を設定しておきます */ 
  5. body {
  6.     font-size:80%;
  7.     font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3" , sans-serif;
  8.     padding:20px;
  9. }      
  10. /*　全体を囲うdiv　*/
  11. #container{
  12.     width:550px;
  13. }
  14. /* 画像の部分 */
  15. #pic_area{
  16.     width:210px;
  17.     float:left;
  18. }
  19. /* 文章の部分 */
  20. #text_area{
  21.     width:330px;
  22.     padding-left:10px;
  23.     float:left; 
  24. }
  25. /*文字のサイズを文章と同じサイズに調整。
  26. 背景にアイコン画像をつけ、余白もつけます。*/
  27. h3{
  28.     font-size:100%;
  29.     background:url(ico_h3.gif) no-repeat left center;
  30.     padding:10px 0 10px 20px;
  31. }
  32. /*テーブルに外枠をつけて幅も設定*/
  33. table{
  34.     border:1px #f63 solid;
  35.     width:80%;
  36. }
  37. /*テーブルの題名は色をつけて左寄せに。太文字にして強調*/
  38. caption{
  39.     color:#f63;
  40.     text-align:left;
  41.     font-weight:bold;
  42. }
  43. /*各項目の幅を調整。余白や左寄せなど、読みやすく調整*/
  44. table th{
  45.     width:20%;
  46.     padding:2px;
  47.     text-align:left;
  48. }

HTMLファイル：

PLAIN TEXT
CODE:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
  5. <title>商品ページサンプル</title>
  6. <link rel="stylesheet" type="text/css" href="style2.css" />
  7. </head>
  8. <body>
  9. <div id="container">   
  10.     <div id="pic_area">
  11.         <img src="cup.jpg" alt="シンプルカップ" />
  12.         <img src="cup2.jpg" alt="シンプルカップ2" />
  13.     </div> 
  14.  
  15.     <div id="text_area">
  16.         <img src="h2_text.gif" alt="気が付けばいつもコレ・・なんでかな？" />
  17.    
  18.         <h3>シンプル・イズ・ザ・ベスト♪</h3>
  19.         <p>
  20.             シンプルな真っ白のコーヒーカップは、朝食の食卓にも、リビングでゆっくり
  21.             読書をする時もしっくりマッチ。
  22.             丸っこい可愛いフォルムは、見る人を癒します。
  23.         </p>
  24.        
  25.         <h3>可愛いだけじゃない、優れもの！</h3>
  26.         <p>
  27.             しかし、この形、実は「持ちやすさ」と「飲みやすさ」を考えつくしたメーカーの出した
  28.             最善の答えだったのです。
  29.             可愛いだけじゃない、この機能性。うんちく好きにもピッタリ！？
  30.         </p>
  31.        
  32.         <h3>プレゼントにも！</h3>
  33.         <p>
  34.             シンプルで飽きのこないデザインだから、プレゼントにも最適。
  35.             余計なデザインがないから、年齢問わず気に入っていただけそう♪
  36.             勿論、ご夫婦やカップルでさりげなくおそろい！なんて、いうのも可愛い！
  37.         </p>
  38.    
  39.         <table>
  40.         <caption>スペック</caption>
  41.             <tr><th>素材:</th><td>磁器</td></tr>
  42.             <tr><th>カラー:</th><td>ホワイト</td></tr>
  43.             <tr><th>直径:</th><td>10cm</td></tr>
  44.             <tr><th>高さ:</th><td>10cm</td></tr>
  45.         </table>
  46.     </div>
  47. </div>
  48.    
  49. </body>
  50. </html>

ページ: 1 2

トラックバックURL

コメントをどうぞ

※初回のみ、管理者の承認が必要となります。