CSSを使いこなそう

日常写生派

CSSを使おう!!


ダイアリーでCSSを使っているユーザーは
そういないのでは無いだろうか!?!?
CSSを使うことにより大分ページの見た目が変わります!!

HTMLとCSSの関係

HTMLはテキストの調子を整え
CSSはHTMLのテキストをデザインする物
JavaScriptは今まで通り動作を加える物(直接ダイアリーに使えない,一部可)


恐らく、HTMLは自然とはてなの支援を使っていたり
独学で知っている人もいる事でしょう、そのため省く

CSSを使う

1 ダイアリーのTOP画面から「管理」をクリック
2 開いたらデザインの部分をクリック
3 上ら辺にある詳細に切り替える
4 その下にヘッダ、フッタ、スタイルシートが見える
5 スタイルシート(CSS)のとこに書きこんでいく

スタイルシート例



body{

 background: url();

    }
この場合、url()の()の中に背景にしたい画像を選ぶと
ダイアリーの背景を変更する事が出来る
a{

color: orange;

 } 
a:hover{

color: red;

}
これをそのままスタイルシートに貼ってみましょう
「a」と言うのはhtmlで言うリンク先を示す<a href="#">のaです
a{〜〜}はマウスがリンク先にのる前の色の表示
a:hover{〜〜}はマウスがリンク先にのったときの色を表す

編集画面から直接変える


スタイルシートから変えるのめんどいと言う人のために
無属性のタグからスタイルシートを編集します
<span style="">ここに編集したい文字</span>
<div style="">ここに編集したい文字</div>

スタイルシートは style=""の""の中で編集します
スタイルシート例
⇧の表示も同じようにしてやります



<span style="background-color: gainsboro; color: black;">スタイルシート例</span>
この場合style=""の中身は




background-color: gainsboro; color: black;
見やすくして


background-color: gainsboro;

color: black;


background-color: gainsboro;はその文字列の背景をgainsboroという色の名前に変更するもの
color: black;は文字そのものの色をblackという色にする事を表します

最後に何か作る



<fieldset>タグの背景をCSSで指定する



fieldset

{

background: url(http://giggurat.vivian.jp/sp_1/bg/sp_bg_012.jpg);

}

またHTMLやCSSにJavaScriptを加えると
様々なパターンを演出出来るようになります


また同じCSSの指定が重なった時などは表示が正しく
いかなくなります