パインワークス
つたえて つづけて つながる パインワークス

山口県山口市より
業務内容や経営戦略にあわせた
ウェブサイトづくりや情報発信、
ITC活用についてサポートします

NPO・コミュニティのIT支援CANPANマニア
CANPANマニア

CSSについて~試してみよう

HTMLとは

文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。

参考:HTMLクイックリファレンス http://www.htmq.com/htmlkihon/001.shtml

CSSとは

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

参考:HTMLクイックリファレンス http://www.htmq.com/csskihon/001.shtml

1.CSSを見てみよう

「デザイン>デザイン一覧」で表示される一覧から、「適応」にチェックがあるデザインのタイトルをクリック

開いた画面の枠内がCSS

2.CSSの書式

セレクタ{プロパティ:値;} ・・・・・ どの部分の{なにを:どうする;}

例1)

body {font-family:”MS Pゴシック”;font-size:small;}・・・・・ ページ全体{文字種類:MS Pゴシック;文字の大きさ:小さい;}

例2)

body{         ・・・・・ ページ全体{
text-align:center; ・・・・・ 行揃えの位置:中央;
padding:0; ・・・・・ 余白:0;
color:#555;     ・・・・・ 文字の色:#555;
}
※HTMLやCSS内での色の表記の参考はこちら http://www.htmq.com/color/websafe216.shtml

3.CSSさわってみよう

全体の背景色を変えてみよう

上記下線部分を追加「background-color:#E9E9E9;」を追加(全体の背景色を#E9E9E9;にするの意味)

※スペースも含めてすべて半角で記述すること

「スタイルシートを変更する」ボタンを押すとこんな感じになりました

まだ赤枠部分の背景が白なので、ここも色を#E9E9E9に変えてみる
以下のように赤枠部分もグレーになった

CANPANマニア

お気軽にお問い合わせください

カテゴリ
最近の投稿