全体表示

[ リスト ]

 「フリーのHTML5エディタBlueGriffonの使い方」、今回は、CSSについて。CSSは、CSS3に対応したものが作れるんだけど、その前に、IDとかを振っておいたほうがいい。まずは、その辺から説明。
 



●まずは、IDをふる。
 BlueGriffonを立ち上げて、「FILE」→「New」で、新しいファイルにしたら、適当に文字を入れる。

イメージ 1
 
そうしたら、IDをつけたいところを選択して、図のように、Body Textをドロップダウンして、divタグをふる。
イメージ 2
全てにDIVタグを降ったら、もう一度、IDを降りたいところを選択。NoIDのところをクリックすると、IDが入れられるようになるので、そこに、IDを入れる(図ではTEXT1としている)
 
イメージ 7
こうやると、IDが触れるのだが、IDを降ったら、sourceボタンをクリックして、中身を確認したほうがいい。
IDがうまくふれないときがあるので。
イメージ 8
まあ、この画面から直接入力してもいいけど。
wysiwygボタンをクリックすると、元に戻る。
これで、IDがふれた。
 

 
●CSSを設定
 
設定したいところをドラッグする。うまく選択できていれば、下に、IDがでるはず。
そうしたら、四角形がだんだんになっているアイコンをクリック(昨日のお花鉛筆のとなり)
イメージ 9
 
そうすると、下のように、スタイルを指定できるダイアログが出てくる
イメージ 10
 
あとは、適当にスタイルをクリック。適当に値を入れて、適当にリターンすると、適当に変わる
(変わらなかったら、ちゃんと設定されていない)
 
たとえば、Borderをクリックすると、いろいろ出てくるから
イメージ 11
まず、色を設定するため、◎のところをクリックする。すると、色のダイアログが出てくるので、
色を適当に選択、OKを押すと、◎のところに色が付く。
となりの、太さと、線種を指定すると、ボーダーラインが引かれる。
イメージ 12
 
このようなかんじで、全部の装飾を行う。例ではTEXT2は、影をつけている、
イメージ 13
適当なところで、「File」→「Save」で保存する(タイトルをきいてくるので、タイトルをいれて、保存する)
 

 
●一部修正
 
上記のように保存し、拡張子を.xhtmlから.htmlに直して、Chromeで見ると、以下のように
イメージ 3
はじめに設定したものが表示されません。これを、全部設定したものは表示されるように修正します。
ソースをエディタで開くと、
イメージ 4
なふうにstyleタグのあとに、CDATAの指定があると思います。これを、ふつうのstyleの指定
イメージ 5
に直すと、
イメージ 6
のように、両方の指定が効くようになります。
 
 

この記事に

開く トラックバック(0)


.


みんなの更新記事