電脳ニッポン

何日も気づかずにいましたが、先ほどクリックしたURLがVisit色のままなのでおかしいなと思いCSSを見直してみました。せっかくGoogle等と同じような色合いにしたつもりが、逆だったとは・・・

でも3色ですからねぇ。入れ替わったらわからないものですね。

いや、お恥ずかしい次第。笑

メニュー(お役立ち)などのページを直そうと思ったのに、その前にエラーに気づいてしまいました。

でも、誰かに指摘されるよりは良しとします。

[ウィンク/]

スタイルシートの便利ツールたち。

HPや講座の移設でしばらくCSSの更新をサボってました。(--)

今回は、無料あるいはシェアウエアで、私お勧めの気軽に使えるCSSのツールを紹介します。

CSSは自分で書いて実験していくのがなんだかんだ言っても一番の速習法だとおもいますが、それでも学習補助になにかツールがほしいところです。MacromediaのDreamWeaverなどがあればかなり便利ですけど、個人ではなかなか簡単に手が出せないですよね。

そこで、CSSに特化したできるだけ、Visualなツールで、CSSがHTMLの表示上どのように作用するかを見れるツールを紹介しましょう。詳細は、作者のHPへいってよく読み気に入ったら試行してみましょう。

最初はCSSのビジュアルツールというよりCSS専用のエディタですね。プロの方でも愛用すると聞いています。私にはちょっと良すぎなツールですが。

StyleNoteです。作者はrikiさん

でいいのかな。

HPのURLは、http://www.wht.mmtr.or.jp/~riki/style/　です。

次は、EasyCSSですね。作者は優秀なフリー・シェアソフトを出されているKobyさんです。EasyCSSは、フリーですが、HTMLエディタなどでは、Free版とシェア版を作成されています。Freeで入門して、気に入ったらシェア版をどうぞという、親切な方です。ソフトウエア作家はこうあるべきという方ですね。

HPのURLは、http://www.pololon.com/koby/　です。

次は海外製の製品のLite版(無償)です。TopStyleですね。有名です。

HPのURLは、http://www.bradsoft.com/download/index.asp　でここからダウンロードして、日本語化のデータ(パッチという)が出ていますのでこれもダウンロードして、日本語化して試用してみてください。

最後に一番のお気に入りですが、カエルましんさんのLunarです。

カエルましんさんは、ほのぼの系のソフトウエア作成をしているような感じですけど、侮ってはいけません。HTMLHelpを作りたい方は、ここのヘルプましんを使って見てください。市販品と比べてもとても便利な秀逸ソフトであることがわかるはずですよ。

LunarはCSSのツールだとそのネーミングで気づかないのですが、使って見るとかなり便利です。先の、TopStyleと比べても遜色のないくらいですね。

HPのURLは、http://homepage3.nifty.com/KaeruMachine/index.html　です。

各ページとも、直リンクにならないようにできるだけTOPページのURLを見えるようにあげさせていただきました。

AmazonBooks：CSS関連書籍

CSS＋もう一歩進んだ方法は

そうなんです、さらに便利にかつHPを管理しやすくする方法があるんですね。

１．CMS(コンテンツマネージメントシステム)を導入する。

　この、http://i2lab.net/xp/ はCMSで運営しています。xoopsというCMSでオープンソース(無償で利用できソースも公開されている)です。

利点は、

・まったくHTMLのタグなど書く必要がない。

・見栄えはスキンという形でかなりフリーなものがある。

・コンテンツの構成と情報の更新に集中できる。

・ゲストとユーザを分けれるので、コミュニティを構成しやすい。

・ユーザの立候補者がいれば、コンテンツの部分的管理を委託できる。

欠点は

・PHP等の最新のスクリプト言語と、データベースが使えるプロバイダや、レンタルサーバーが必要。

・PHPのプログラミングや、スタイル変更ならやっぱりCSSの知識がかなり必要

２．perlやPHPを使ってHPを構成する

　これの利点は、HTMLやCSSだけでは表現・管理不可能なことがプログラムだとできることでしょう。

　たとえば、HPのすべてのページにメニューのブロックを表示するとします。でHTMLだけで記述すれば、このメニューの部分は各面ごとに同じ記述を繰り返すことになりますよね。

ですが、PHP等の言語だとメニュー部分だけを記述しておいて、そのプログラムの塊を、各面の必要な場所へ読み込む指定ができるんです。そのときそれは大抵の場合１行で済むんです。

３．同じパターンの大量のデータはデータベースで

　たとえば、住所録やらスケジュール管理やらは当然データベースがあるとかなり便利になるんですね。

以上が、HTMLとCSS ＋スクリプト言語の実態です。学習我必要ですが、わかるときっと便利この上ないわけですね。

そもそもスタイルシートってなんぞや

スタイルシート(CSS)は、WEBページの情報で「見え方」のみを定義するためにW3Cで定義された技術ですね。

ホームページ(HP)を記述するHTML文書（HTML4.0以降）では、文章の構造はHTML。「見栄え」は CSS と役割分担させていますね。

以上が、標準的な概念でしょう。で、結局なによ・・というわけですけども・・

最初にホームページの表示面：デザインをきめてしまい、次にホームページのコンテンツ内容を見え方を気にせずに書きましょうというわけですね。

これがなぜいいかなんですが、見え方と、コンテンツ内容を分離すると、HPのデザインを統一することが簡単にできるからですね。

で、ほんの少し変えたい場合にはその部分だけスタイルを変更というわけです

CSSを覚えよう。(講座記事というよりは、一緒にやりましょう・・笑)

CSSとは、CascadingStyleSheetの頭文字をとったものですが、HPの主に表示面(ビジュアル面)をHTMLの記述とは分離したものです。CSSを使うとHTMLだけでは困難だったきめ細かな表示が出来るようになるのです。(と既に使っている人たちは言っています)

確かに、HTMLを記述するときに、同時にそれがどう表示されるかを考えるよりも、HTMLは文章的データとして記述しておいて、どう表示するかは、後からでもCSSで細かに指定するほうが便利といえば便利かもしれませんよねぇ。

しかしながら、どう表示するかを別に考えられるようになったということはですよ・・・うーん、デザインをキチンと考える必要があるというわけですよね。色とか、レイアウトなど、印刷物のような感覚をいかに持つかが重要になってくるわけです。事実最近の個人のHPでもデザイン的に格段に進歩していますし、人気のあるHPなどは、きれい、見やすい、軽い、使いやすい、内容が良いなど、いわゆるCOOLなものが多いのもうなずけますね。

CSSはHTMLとは別のテキストのファイルとして記述しプロバイダの方にFTPソフトで送る必要があります。

(HTMLの中に埋め込む方法もあるようですね。のちのちやってみましょうね！)