上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 ブログの記事はかけるけど…
 それ以前に、HTMLとかCSSとかの意味がわからない。
 そんな人が読んでみるところです。


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



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

斜体 太字 大きい文字


 文字のレイアウト。

右寄せ文字


 文字の回りに枠を作る。

枠線


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

見本文字
見本文字


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


背景に画像を 背景に色を



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

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



はじめに


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

ブログ記事編集画面


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

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

<b>太くなる部分</b>

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

実際に表示確認してみる(編集可)


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



どこで使うの?


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


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

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

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

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

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



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


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

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

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

<b style="color:#f00;">装飾する文字など<b>

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



HTMLの基本


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

ある晩目覚めたコルクマは、ふとあることに気づきました。どういうわけか、どうしてもどうしても<span>くるくる</span>回りたくなって仕方がなくなってきたのです。

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

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

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

実際に表示確認してみる(編集可)




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


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

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


 HTMLは、検索エンジンから見た、分かりやすいホームページ作りに、
 CSSは、人から見た、分かりやすいホームページにするための定型文ということを覚えておけば、大丈夫だと思います。


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

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


■当サイトのテンプレートをカスタマイズしようと思ったんだけど、何のことだかまったくわからなかった人は、こちらもどうぞ。
CSSが何のことだかわからない(FC2ブログ)
このエントリーをはてなブックマークに追加
Wed.04.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。