今回は、KompoZerのCSS機能を 使ってみる事にします。 前回に比較して、外部リンクも少なくなるので、読む量も少なく済みます。 しかもCSSという事に特化しての説明なので、比較的容易にCSSを 使いこなせるようになるのではないでしょうか。兎に角、案ずるより 産むが易しの精神で、KompoZerで遊んでみましょう。
手順前後になりますが、今回は以下の如き順番で、話を進めていきます。
まづ、CSSのインポート(輸入)、次にCSSのエキスポート(輸出)、
最後がCSSの作成です。どうしてこの順番かといいますと、
もし、読者の皆さんが、過去に自分で作ったCSSを使いたいとか、
お気に入りのウェブサイトのCSSを拝借したい場合、それらのCSSファイルを
輸入するだけで利用可能になるからです。本当はこれを書いている
時、前編でつくったCSSを流用したかっただけ。
そして、輸出方法を知っていれば
一回作ったCSSを流用できる事につながります。でも、そのCSSを少し
改造したいとか、新たに作る場合もあるので、新規作成の手順も最後には
なりますが解説したいと思った訳です。
正直言いますと、これを書いている時点で「今自分が手元に持っている
CSSファイルを流用する方法」を発見していません。いろいろ試したのですが、
GUIを使う方法では駄目でした。ただし、「ソース」を編集すれば一発です。
(バグの可能性あり。CSSエディタのImportでOKのはず。)
((一過性のバグであった事を確認しました。
CSS-editorの『新しいリンク要素』にてメディア一覧=all,タイトル=whateverで可でした。勿論ここで示したソース編集も有効です。
))
<link rel="stylesheet" href="styles/old_style.css"
type="text/css">
というラインを<HEAD>部分に挿入するだけです。
勿論styles/old_style.css
の部分は皆さん自身の持っているcssファイルを指定して下さい。
私の場合、このHTMLファイルがあるdirectoryの中に
stylesとうsub-directoryがあり、その中に全てのcssを置いています。
ですので比較位置(relative path)である"styles/"を接頭語として付けた
ファイルold_style.cssを指定すれば完了です。
参考までに、私のdirectoryの情報です:
次に、どうやってcssファイルを輸出するか説明します。その前に、
輸出とは何か？KompoZerで普通にHTMLを作成すると、cssの部分は
ヘッダー<HEAD>の部分に書かれます。この
部分だけを別のファイル(cssという拡張子を持つファイル)に移すという
事をexportと言います。次回、新しいウェブページを作成する際、
このcssファイルを取り込め(輸入すれ)ば、同じスタイルのウェブページが
出来るという訳です。
この絵はKompoZerにおける
CSSのインターフェースを赤字のアルファベット
で示してあります。まづ、CSSを編集する為には、
D
のソースではなく、
C
のデザインが選択されている必要があります。
B
はcssの内容が表示される場所です。そして、現在のCSSを編集したり、
輸出するのは、
A
をクリックします。すると以下のパネルが現れます。このパネルの
右中央部分に
スタイルシートを外部に出力し、そちらへ切り替えると
表示されたボタンがあるので、それをクリックします。後はファイル名を
記入しOKボタンを押せば完了です。
私の場合、ファイル名をold_style.cssとし、それを
sub-directoryであるstyles以下に保存しました。
ですのでこのcssファイルを参照する時は./syles/old_style.css
とする訳です。下図は輸出した後のCSSエディタの様子です。
A
と
B
における、相関関係に注目して下さい。
輸出されたファイルが参照され、それが左側のスタイラスシートのパネルに
表示されている訳です。そしてold_style.cssには、
二つの規則が定義されており、それが
C
の部分です。このcssに新たな規則を加えようとしても、そのままでは
上手く行きません。（私がこれを書いている時点2009/12で、外部の
cssファイルを直接編集する事は出来ないようになっている見たいです）。
新しい規則の登録の前に、
D
から新しいスタイルを登録し、その後、その新しいスタイルに、
新規の規則を登録する事になります。その詳細は次章にて。
まずは新しいスタイルの登録が必要になります。まずはCSSエディタを 開きます。そして下図のA-B-C-D-Eと順番に処理していきます。
C
は空白でも構いませんが、allとしておけば間違い無いです。
D
は任意の名前ですが、Ascii plain textが望ましいです。
多分「半角英数」もしくは「直接入力」としておけばplain textになると
思われます。この辺はOSによって違うので、個々で調べて下さい。
今回、私の場合は、元々あったold_styleにプラスαと
言うことで、old_style_plusとしました。
E
のスタイルシートの作成をクリックします。
そしてふたたびCSSエディタを起動すると、下図のように表示されます。
A
で新たに内部スタイルシートが定義されている事を確認。
B
のチェックボックスにチェックが入っていない事を確認。
C
のプルダウンメニューから、「スタイル規則を新規作成」を選び、
一番上の指定された種類の・・・を選択して、
記入欄にはdelと入力します。もちろんdel
は、お好きなタグを指定して構いませんが、今回の例ではdelを使います。
そして、その下の「スタイル規則の作成」をクリックすればdelが左の
カスケードに追加されます（下図参照）。そして、下図
A
テキストを選び、様々な性質を定義します。今回は色のみを変更するので、
B
をクリックします。すると色パレットが出てきます。今回は灰色を選択。
OKをクリックすれば完了です。
色々な意見があるとは思いますが、例えば
<span style="color: rgb(153, 153,
153);">本当は・・・</span>
もCSSに置き換えれば
<del>本当は・・・</del>
というふうに、すっきりまとまる訳です。
他にも様々な性質を設定できるので、いろいろ実験してみて下さい。
また、複数のCSSファイルを準備して、その呼び込み順番を入れ替えたら
どうなるのか・・・？等、遊べる要素は豊富です。（実際は、w3c.orgの
CSSについての文献を読めば実験の必要はありません）。
もう一度くどいですが、普段は「ソース」でHTMLファイルを編集 しましょう。KompoZerのWYSIWYG機能（デザイン）を使うのは、 絵やリンクを挿入する場合や、CSS編集の画面を立ち上げる時だけにして、 普段は「ソース」を編集しましょう。仕上がりを確認する時は、「デザイン」 でも良いのですが、FireFoxやOpera等、一般のウェブブラウザを使用する 方が間違いありません。KompoZerの一番の魅力は強力なCSS編集機能 なので、この部分はKompoZerに頼るとしても、ある程度の形が出来たら、 EmacsやBluefishを 使用する方が良いかもしれません。臨機応変に、 適材適所に、賢く道具を使いこなしていきましょう。
今回、この記事を書くにあたって、色々調べていると、参考になる
ウェブサイトが幾つか見つかりました。まずは
しらぎくのウェブサイト作成入門。これは久々に感動しました。
ここからHTML
入門とCSS
入門が閲覧できます。ここの製作者は、とても
学があるようなのですが、生活が苦しそうなので、不憫でなりません。
今の日本に生まれて来た事が残念です。
とほほのスタイルシート入門の
リンクから、トップへ行けば、WWW
一般についての情報が満載。ソースを編集している時に便利そうです。
最後に
Nvu/KompoZer
で始めるHTMLスタイルシート
なんですが、私の記事と違い、とても時間をかけて作られた事が
一目瞭然です。そこには、技術的情報だけでなく、なぜKompoZerを使用
するのか、その長所・短所は、その他優良な情報が満載です。すぐに読める
量ではないので、暇な時、少しづつ読んでみてはどうでしょう。
この人曰く、普通の人がHTMLを正しく編集する事は、
いくらWYSIWYGのKompoZerでも難しいそうです。正直、わたしは
HTMLには興味がないので、突っ込んだ意見は言えませんが、その出自を
考えると、もともと不完全だが柔軟な言語である訳だから、きっちりとした
寸法なしでは成り立たないデザインという部分は、どうしても犠牲に
ならざるをえないと思う。
英語だけど、こんなのも
あります。フィリピンなのかな？
さらにオマケのオマケなんですが、やはりWebデザインには
お絵描き道具が必要。まずはInkscape。
無料のベクターお絵描き道具です。
アドビ・イラストレータの代わりに使えます。次が、the Gimp。
アドビ・フォトショップの代わりです。やはり無料。こんなに素晴らしい
ソフトウェアが無料でいいのか？と思わせるような出来の良さ。無料だから
売国奴政府に税金も払わなくて良いしお財布にもやさしい。
しかもオープンソースだから安全で安心。どこかの国の政府もお題目だけ
「安全/安心」ではなく、いろんな事をオープンにして、
どこが『安全/安心』なのか確認さして欲しいです。
この項に貼り付けてある絵も、全てギンプで作りました。