- categories
- HTML / CSS
- articles-title
CSSの基本（初心者向け）
- postdate
- 2010-08-14 00:57
CSSって何？って人や、どうやって使うの？って人向け。
CSSの簡単な解説です。
HTMLしか存在しない時代には、いわゆる「テーブル組み」といったHTML内部でデザインの定義もしていたわけですが、「HTMLは文書であって、そこにデザインなんぞ入れ込んではイカン」という偉い人のご意見がありまして、「じゃあデザインは切り離して定義しましょう」ってな感じで生まれたのがCSSです。
そんなあなたもCSSを使うとこんなに便利です。
１．集約管理
文字色や線の有無、背景画像を変えたい時、例え対象のHTMLが何枚あろうとも1つのCSSを修正すれば全てに適用されます。
HTMLでのデザインだと、色を変えるにも「index.html」から「top.html」などなど全てのHTMLファイルを開いて修正する必要があります。
２．デザイン機能の拡張
例えば、今までは角丸の四角形を表示したい時に四隅に角丸の画像を表示したり、角丸の画像を背景に使用していましたが、CSS3の「border-radius」というプロパティを使えば画像も使わず一発で角丸にしてくれます。
CSS3は新しい規格なので、この記事を書いている時点で「Internet Explorer」「Opera」は角丸に対応していません。ブラウザによって同じCSSを書いても異なる表示がされる可能性があることは覚えておいてください。
やり方はとっても簡単、HTMLの<head>タグの間に以下のような1行を書くだけです。
メモ帳で作れます。
保存をする時に「すべてのファイル」を選択して、拡張子を「.txt」ではなく「.css」にすれば良いだけです。
ここまでで中身が空っぽのCSSを作ることはできますね。
CSSの簡単な解説です。
そもそもCSSとは
ググったら出てきますが、Cascading Style Sheetsを略してCSSです。HTMLしか存在しない時代には、いわゆる「テーブル組み」といったHTML内部でデザインの定義もしていたわけですが、「HTMLは文書であって、そこにデザインなんぞ入れ込んではイカン」という偉い人のご意見がありまして、「じゃあデザインは切り離して定義しましょう」ってな感じで生まれたのがCSSです。
CSSで何ができるのか
背景画像を表示したり、文字色を変えたり・・・元々はHTMLのデザイン部を切り離したものなので、ある程度HTMLを書ける人なら「その程度ならHTMLでいいじゃん」と思われるかもしれません。そんなあなたもCSSを使うとこんなに便利です。
１．集約管理
文字色や線の有無、背景画像を変えたい時、例え対象のHTMLが何枚あろうとも1つのCSSを修正すれば全てに適用されます。
HTMLでのデザインだと、色を変えるにも「index.html」から「top.html」などなど全てのHTMLファイルを開いて修正する必要があります。
２．デザイン機能の拡張
例えば、今までは角丸の四角形を表示したい時に四隅に角丸の画像を表示したり、角丸の画像を背景に使用していましたが、CSS3の「border-radius」というプロパティを使えば画像も使わず一発で角丸にしてくれます。CSS3は新しい規格なので、この記事を書いている時点で「Internet Explorer」「Opera」は角丸に対応していません。ブラウザによって同じCSSを書いても異なる表示がされる可能性があることは覚えておいてください。
どうやって使うのか
HTML内に直接CSSを記述することもできますが、基本的にはHTMLとは別のCSSファイルを読み込ませます。やり方はとっても簡単、HTMLの<head>タグの間に以下のような1行を書くだけです。
<link rel="stylesheet" type="text/css" href="cssファイルへのパス" />
CSSファイルはどうやって用意するのか
メモ帳で作れます。保存をする時に「すべてのファイル」を選択して、拡張子を「.txt」ではなく「.css」にすれば良いだけです。
ここまでで中身が空っぽのCSSを作ることはできますね。
CSSファイルに何を書けばいいのか
ここから先は初心者というよりは「初級者」のレベルであろうということで、次のエントリーで説明します。
nice!(1)
コメント(3)
トラックバック(0)
えぬ さん
-
nice! 3
記事 6
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
はじめましてm(_"_)m♪♪♪
突然の訪問で恐縮ですが、ひとつ教えて頂きたいことがあります。
ブログの記事の幅（現在650pxくらい）を現在のテンプレートの状態で広げたいのですが、ヘルプを読んでもさっぱり解りません。
重ねて恐縮ではありますが、何卒ご指導願えればと存じますm(_"_)m♪♪♪
by p-can♪ (2010-08-23 23:53)
すみません、忙しくてチェックできていませんでした・・・。
横幅の広げ方を記載したエントリーをポストしました。
http://noxir-lab.blog.so-net.ne.jp/2010-08-27#more
by えぬ (2010-08-27 17:38)
ありがとう御座います♪＼(＾▽＾o)(o＾▽＾)／♪
感謝×100♪♪♪＼(o^∇^)/*【祝】*＼(^∇^o)/♪♪♪
しばらくUPしていない間に、ガラッと変わってしまっていて、本当は別のスキンでしたが、ブロガーさんから黒にしてくれと頼まれまして......で、管理ページに入ったらw(ﾟ◇ﾟ;;)w
ですから写真を大きく貼り付けたくても、はみ出た分はカットされて......┏(x＿x;;;)┓
とにかく、本当にありがとう御座いましたm(_"_)m♪♪♪
助かりました（〃＾∇＾）o_彡☆
by p-can♪ (2010-08-28 02:25)