1.CSSを試してみよう(カスタムデザインの場合) その前に準備
HTMLとは
文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになる。
参考:HTMLクイックリファレンス
CSSとは
CSSは、HTMLと組み合わせて使用する言語。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定。
参考:HTMLクイックリファレンス
1.CSSを見てみよう
「デザイン>デザイン一覧」で表示される一覧から、「適応」にチェックがあるデザインのタイトルをクリック
開いた画面の枠内がCSS
2.CSSの書式
セレクタ{プロパティ:値;} ・・・・・ どの部分の{なにを:どうする;}
例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さわってみよう
全体の背景色を変えてみよう
枠線部分を変更「background:#FFF」を「background:#CCC」(全体の背景色を#CCC;にするの意味)
※スペースも含めてすべて半角で記述すること
「スタイルシートを変更する」ボタンを押すとこんな感じに
変更前
変更後