スタンダード・デザインラボ

スタイルシートで何が出来るの？

　文字を斜体や太字にする。フォントサイズを変える。



　文字のレイアウト。



　文字の回りに枠を作る。



　ボックスを作って、その中に文字や小さいボックスを入れる。



　背景に画像を入れたり、色を付けたりする。



　などなど、スタイルシートを勉強することで、少しだけレイアウトやデザインの要素を、テキストに盛り込むことができます。
　発展させると、背景画像や文字装飾を駆使して、「コルクマテンプレート２」のように、テンプレート自体を構築することも出来るようになります。

　もうちょっと詳しく知りたい人は、以下の方も目を通してみてください。

はじめに

　ブログ記事を書いていると、まず「アイコン」の存在に気づくと思います。
　文字を大きくしたり、色をつけたり…絵文字なんかも挿入したり。




　ブログを投稿して、自分のブログを確認してみると、大きくした文字は大きく、青くした文字は青字になっていると思います。
　これ、なんだかウラで凄いプログラムが動いていて、そのプログラムがあそこの文字をピンポイントで大きくしている…と言うわけではなくて、言わば「コンピュータ用の決まり文句」或いは「コンピュータ用の定型文」に従って表示されているだけなんです。

　この決まり文句が「HTMLタグ」です。
　例えば、太字のコンピュータ用語は…


　これだけなんです。「<b>」という、「<>」で囲まれた部分がコンピュータ用語で、完成した記事を表示するときには、「<b>」と言うのは消えて、その間に挟まっていたテキストが太くなって表示されるという仕組み。



　このコンピュータ用語が、「HTML」と呼ばれるものです。

どこで使うの？

　ブログやホームページなど、インターネット上の「テキストファイル」が、主に「HTML」と「スタイルシート（以下CSSと略します）」で書かれています。
　そのデータを読み込んだ、「インターネットエクスプローラー（IE）」とか「ファイアフォックス」などと言う「ブラウザ」というモノが、その「HTML」や「CSS」で書かれている決まりを守って、ブログやホームページを見栄え良く表示していると言う訳です。


　そして、最近のブログサービスでは必ずある「テンプレート」というもの。これが、予め様々なアイテムが「HTMLとCSS」でデザイン済みのデータなのです。
　ブログとは、このテンプレートデザインの上に、「皆さんが書いた記事を所定の場所にダウンロードして表示」しているという仕組み。

　ですから、もちろん、ブログ記事編集画面でも使えます。
※高性能なワープロ的テキスト編集ソフトを使っていない場合

　FC2であれば、アイコンをクリックし、任意の文字を大きくしたり、色をつけたりすると、その前後に出てきますよね。あれが「HTML」という代物と言うわけです。


※ハイライトされているような、太字や文字サイズを変えたときにテキスト中に現れる変なヤツ。

　あれ、海外で出来た「定型文」だから、なんとも馴染みのない変な英語みたいなものになっているというわけなのです。

タグだけじゃ物足りなくなった

　しかし、インターネットが進化してくると、「HTMLタグ」だけでは、表現に限界があることが分かってきました。パソコンの性能も上がり、もっといろんなデザインができるのに、タグだけでは追いつかない。
　そこで登場したのが「スタイルシート（CSS）」と言うヤツです。

　これが、HTMLで表現していた太字や色付文字など、デザイン部分はすべてを担当させ、さらにデザインの幅を広げた「定型文2号」なのです。

　定型文2号は、タグに「寄生」する形で書く決まりができました。


　こんな感じで、半角スペースで開けて、タグの中に寄生します。
　そうして、次第に「HTML」は、テキストに意味をもたせる機能、「CSS」は、テキストのデザインの機能、と言う形で役割分担をするようになっていきます。

HTMLの基本

　こちらのサイトは、デザインがテーマなので詳しくは説明しませんが…HTMLの基本の形だけはこちらでおさえておきます。


　例えば、こんな文章があり、その一文の「くるくる」というテキストを装飾したい場合は、くるくるの前に「<〇〇>」、くるくるの後に「</〇〇>」と言う書き方をします。

　〇〇のタグの範囲は、ここからここまでですよ、という指定です。範囲の最後に「</〇〇>」の赤字の「/」を書くことが大事な決まりです。これを忘れると、指定した位置以下の文字は、すべて装飾が施されてしまいます。

　もうひとつ大事な決まりがあり、「HTMLタグ」はすべて半角英数字・記号で記述すると言う決まりごとです。
　全角文字が混ざると、コンピューターは「コンピュータ用の定型文」とは思わずに、普通のテキストだと思って、記事が完成して表示したときに、そのままタグ部分も表示し、装飾もされないという結果に終わってしまいます。

タグがなんとなく分かったら、CSSを勉強しよう

　初心者にとって重要なタグは「div」「span」という意味を持たないタグ。
　他のタグには「これは引用文です」とか、「これは重要箇所です」とか、様々な検索エンジン向けの意味が含まれているので、使う場合には、予め意味を把握して使う必要があります。

　しかし、「div」と「span」さえ使えれば、後はそのタグにCSSを書き加えることで、ほぼすべての装飾をカバーできますので、初心者には…いえ、HTMLでは非常に重要なタグなのです。




　とりあえず、ブログ記事の見栄えを良くしてみようかな？と言う方は、コチラからどうぞ。
スタイルシートで遊ぶ part.1（<span>タグ編）

■CSSメインメニュー
実用的スタイルシート入門


■当サイトのテンプレートをカスタマイズしようと思ったんだけど、何のことだかまったくわからなかった人は、こちらもどうぞ。
CSSが何のことだかわからない（FC2ブログ）