2005年 10月 19日
第2回:CSSを使ったWeb制作について
CSSで作る簡単なWebページ作成方法を取り上げます。現在では標準規格に従ったページ制作が求められています。今回はその標準規格に従い、最小限求められるCSS設定を行ったページ制作を行います。
◎ヘッターの設定・h1タグを装飾
↓このようになります
◎本文の設定
・h2を装飾
↓このようになります
・pタグを装飾
↓このようになります
・classセレクタを設定
↓このようになります
◎フッターの設定
・addressタグを装飾
↓このようになります
Copyright (C) 2005 icon. All Rights Reserved.※addressタグとは、著作権の情報や連絡先を示すために使用します。
以上、第2回はCSSを使用したページ作成方法についてでした。 今回のCSSを設定したサンプルページはこちらになります。記述等、参考にしてください。
次回は今回設定したCSSをより詳しく設定します。
お楽しみに!
◎ヘッターの設定・h1タグを装飾
h1{text-align:center;
color:#174F11;
background-color:#9AE792;
font-size:18px;
bold;
padding:20px;}
color:#174F11;
background-color:#9AE792;
font-size:18px;
bold;
padding:20px;}
※設定内容
text-align:テキストの表示位置
color:テキストの色
background:背景色
font-size:テキストの大きさ
bold:テキストを太字にする
padding:テキスト周りの余白
text-align:テキストの表示位置
color:テキストの色
background:背景色
font-size:テキストの大きさ
bold:テキストを太字にする
padding:テキスト周りの余白
↓このようになります
CSSノウハウ
◎本文の設定
・h2を装飾
h2{color:#174F11;
font-size:14px;
padding:5px;
border-left:#9AE792 solid 5px;}
font-size:14px;
padding:5px;
border-left:#9AE792 solid 5px;}
※設定内容
border-left:罫線の色、線種、太さ
(半角スペースを空けることで一度に設定できます)
border-left:罫線の色、線種、太さ
(半角スペースを空けることで一度に設定できます)
↓このようになります
CSSノウハウ
・pタグを装飾
p{font-size:12px;
line-height:180%;}
line-height:180%;}
※設定内容
line-height:行間
(%の数字を大きくすれば行間も開きます)
line-height:行間
(%の数字を大きくすれば行間も開きます)
↓このようになります
スタイルシート(以下CSS)とは、「Cascading Style Sheets」の略で通常CSSと記述されます。本来Webページのデザインを詳細に設定するための技術であり、HTMLからデザイン的な設定を分離することが目的で開発されました。
・classセレクタを設定
.textr{color:#FF0000;}
※指定したい箇所に<span class="★">〜</span>と記述
<p><span class="textr">スタイルシート(以下CSS)</span>とは・・・技術であり、<span class="textr">HTMLから・・・</span>で開発されました。</p>
<p><span class="textr">スタイルシート(以下CSS)</span>とは・・・技術であり、<span class="textr">HTMLから・・・</span>で開発されました。</p>
↓このようになります
スタイルシート(以下CSS)とは、「Cascading Style Sheets」の略で通常CSSと記述されます。本来Webページのデザインを詳細に設定するための技術であり、HTMLからデザイン的な設定を分離することが目的で開発されました。
◎フッターの設定
・addressタグを装飾
address{text-align:right;
font-size:10px;
font-style:normal;
border-top:#9AE792 solid 3px;
padding:2px;}
font-size:10px;
font-style:normal;
border-top:#9AE792 solid 3px;
padding:2px;}
※設定内容
font-style:テキストのスタイル
font-style:テキストのスタイル
↓このようになります
Copyright (C) 2005 icon. All Rights Reserved.※addressタグとは、著作権の情報や連絡先を示すために使用します。
以上、第2回はCSSを使用したページ作成方法についてでした。 今回のCSSを設定したサンプルページはこちらになります。記述等、参考にしてください。
次回は今回設定したCSSをより詳しく設定します。
お楽しみに!
デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。
by icon04
| 2005-10-19 13:39
| CSS講座