• もっと見る

2012年12月07日

CSSについて(カスタムデザインの場合)~試してみよう

以下をまだ見ていない方はチェックしてね
1.CSSを試してみよう(カスタムデザインの場合) その前に準備

HTMLとは


文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになる。
参考:HTMLクイックリファレンス

CSSとは


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

1.CSSを見てみよう


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

開いた画面の枠内がCSS
57_8.jpg


2.CSSの書式


57_4.jpg

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

例1)
* { font-family:'MS Pゴシック','ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif; }・・・・・ 全体{文字種類:,'ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif;}
※1番目のフォントがパソコンになかったら、2番目のフォントを表示。2番目もなかったら3番目を表示・・・の意味

例2)
body {
margin:10px 0 0 0;
padding:0px;
text-align:center;
font-size:12px; ・・・文字の大きさ 12px
color:#333; ・・・文字の色 #333(グレー)
border:none; ・・・枠線 なし
background:#FFF; ・・・背景色 #FFF(白)
}
HTMLやCSS内での色の表記の参考はこちら 

3.CSSさわってみよう


57_5.jpg

全体の背景色を変えてみよう
枠線部分を変更「background:#FFF」を「background:#CCC」(全体の背景色を#CCC;にするの意味)
※スペースも含めてすべて半角で記述すること

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


変更前
57_2.jpg
変更後
57_6.jpg


この記事へのコメント
コメントを書く
この記事へのトラックバックURL
トラックバックの受付は終了しました
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック