blog - みきまるしぇ

　ウェブサイトのアプリケーションで広く使われています「データベース」というもの。これはどういうときに必要かといいますと…

　大きなソフトウェア（たとえばこのbaserCMSや、NetCommonsなど、CMSと呼ばれるソフト、あるいは有名なWordPressなどブログに使われているもの）には、役割分担が必要となってきます。

　この役割を洋服の箪笥（以下:タンス）に例えますと、HTMLの文法で書かれたファイルがタンス全体の枠、CSSが「引き出しの何段目は小さめでほかの段は大きめ」となど引き出しの役割を決め、データベースは「小さめのハンカチが来たら小さな引き出しにしまう、敷布が来たら大きな引き出しにしまう」と、整理して収納する係です。ブロガーやサイト運営者が何か書きつづると、データベースががんばって収納して、訪れた人に見やすく表示してくれるのです。

　データベースの種類にはいくつかあるのですが、多くのレンタルサーバで提供しているのはMySQLというものです。これが利用できるソフトも多く、わからないことは検索すればネット上に情報も豊富で、専門的に調べたい人には書籍も数多く出てきます。

　とても便利でよいものですが、ただ、とても大切なものですので、準備段階を終えて運営サイトが大きくなるころには、バックアップをとる方法、それを復元する方法だけは、調べておいたほうがいいと思います。

　CSSは、カスケーディング スタイルシート(Cascading Style Sheets) の略です。すでに書きましたHTMLというファイルが文章の本体など内容に大きく関係するもので、CSSは、そこでよく使われるデザインを決めておくファイルとして、HTMLとセットで用意されていることが多いです。

　ただ、サイト内で使用したいHTMLが何百ページあろうとも、CSSはデザインの約束を決めておいてHTMLの表示を助けるファイルですので、数は少なくて済みます。記載内容が長くなってよければ、1ファイルで足りることもあるかもしれません。

　どんなことが書かれているものかといいますと、たとえば「画面上に横ラインを引きたい」というとき、HTMLでは HR というタグを使いますが、CSSでは「HTMLファイルで hr というタグを使うと書かれたら、どのくらいの幅で見た目はどんなラインにするか、このファイルで指定してある通りに」とデザインを受け持ちます。どのCSSファイルを見にいくかは、通常ならHTMLファイルの冒頭で宣言されています。

　大昔は、ひとつひとつのHTMLファイルの内部で「このラインは表示○○%」など、デザインそのものをHTMLで書いてしまっていることも多かったです。HTMLにも文法があり、古い文法で解説しているサイトでは、いまもそう書かれていますし、実際問題としてCSSファイルを分けていなくて、HTMLの内部にすべてデザインが書かれていた場合でも、ほとんどのブラウザでそれは普通に表示されます。

　ですがそれをやってしまうと、ひとつのHTMLファイルの内容が（見た目は同じでも中身としては）膨大な内容に膨らんでしまい、読むのに時間がかかったり、通信データ量も増えてしまい、よいことがあまりありません。

　古くからたくさんのページを作成していていまさら書き直すのはたいへんだという場合を除き、新しめの文法で、CSSファイルを分けて書いておいたほうが無難です。最近は何のソフトでも、HTMLやCSSがわからなくても勝手に補ってくれることが増えてきていますので、何もかもわかろうとしなくてよいのです。ただ理屈がわかっていれば人様が作ってくれたものを見ながら編集できますので、仕組みと最低限の理屈をわかっておくのは、先を考えると便利です。　

　まずは、HTML の話からはじめましょう。(文法の話として人前で使う場合はHTMLという大文字が一般的ですが、htmlと小文字で書いてはいけないということはなく、実質的にたいした違いはありません）

　これは Hyper Text Markup Language (ハイパー テキスト マークアップ ランゲージ) の略です。文字や文章の前後を約束に沿ったカギ括弧付きの文字（htmlタグ）で挟んで記述していきます。こう書いても意味はわかりづらいと思いますので、例を述べますと…

<b>今日はとても暑いです</b>
この場合の<b>と</b>が、タグです。
bは太い文字にするという意味、うしろの/bは、それを解除するという意味です。

これがHTMLとして認識されると
 今日はとても暑いです
という具合に、太い文字に見えます。

　htmlで書かれたページでは、ほとんどのタグが、挟む単語または文章の前後に対となって（終わるほうには / をつけて）使用されます。

　最後に、画像を呼び出すタグを、画像を使って説明します。
　ここに出ている画像は、以下のようなタグを書くことで、表示されています。

<a href="(場所名)" title="htmlタグの説明画像"><img align="right" alt="htmlタグの説明画像" height="180" src="/files/uploads/html_tag_180802a.jpg" width="240" /></a>

　なお、img と a href を合わせて使って、画像を押すとリンク先に飛ぶような書き方をすることもできて重宝します。