CSS

こんにちは。あきです。


前回先輩よりテーブルタグについて学び
今日はCSS(スタイルシート)について学びます。



アキヒロ:
「先輩。今日はスタイルシートです。
      お願いします。」


先輩:
「また来たのか。たまには休ませてくれよ。」


アキヒロ:
「いいじゃないですか。どうせ暇なんだから。」


先輩:
「うるさい。仕方がない。それでは教えてやろう。」


アキヒロ:
「お願いします。」


先輩:
「まずCSSとはCascading Style Sheetsの略だ。」


アキヒロ:
「で、直訳すると?」


先輩:
「知らん。英語は嫌いだ。お前英語勉強してるんだろ。訳してみろよ。」


アキヒロ:
「うーん。分かりません。」


先輩:
「なんだ。お前。何年勉強してるんだ?」


アキヒロ:
「むっ!おそらくですな。


   作業を段階的に行う見栄えの紙だから…。


   『見栄えを段階的に設定するファイル


   じゃないっすかね。」


先輩:
「これはWebページのレイアウトを定義する為の規格です。」


アキヒロ:
「ちっ。知ってるなら言わせるなよ。」


先輩:
「なんか言ってかね?」


アキヒロ:
「いえ。続けてください。」


先輩:
「HTMLのタグにフォントサイズや色をいちいち設定するのは面倒だろ。」


アキヒロ:
「確かに記事の文章や見出しなんかのスタイルは一括で管理して指定したいですね。」


先輩:
「このCSSを使うと複数のHTMLのデザインをまとめて調整する事が可能になるのだ。どうだすごいだろ。」


アキヒロ:
「これは使えますね。先輩は別にすごくないけど


先輩:
「いつもそれだな。一言多いんだよな。お前は。まあそれでだ。スタイルシートの指定方法には3種類ある。」


アキヒロ:
「3種類?」


先輩:
「そうだ。


   ・インラインスタイルシート ・埋め込みスタイルシート  ・外部スタイルシート


   の3つだ。ほとんどのブログで使われてるのは外部スタイルシートだな。」


アキヒロ:
「詳しく教えてください。」


先輩:
「まずインラインスタイルシートだがこれは各タグに style=”” と属性を設定する事でフォントサイズなどを指定できる。」


アキヒロ:
「はあ。」


先輩:
「ブログのタイトルに使われる見出しタグ<h1>を例にすると」

<h1 style=”font-size:80px;”>こんにちは</H1>

先輩:
「と設定するとこんな感じで特大のこんにちはが表示できる。」


 


 


こんにちは


 


 



アキヒロ:
「うわっ!うっとうしい。でもこれタグ毎に設定するんですよね。」



先輩:
「まあな。これじゃあ一括設定できるCSSの良さが活かされないな。次は結構使えるぞ。」


アキヒロ:
埋め込みスタイルシートですか。」


先輩:
「これは各HTMLの<head>~</head> 内に
      記述するんだ。」

<HEAD>         
<STYLE type=”text/css”>
<!–            
h2{             
font-size : 12px;               
}                                     
–>                                 
</STYLE>                     
</HEAD>                      


先輩:
「この様に記述する事でこのHTMLで<h2>タグを使用した文字列は全てフォントサイズが12pxになる。」


アキヒロ:
「なるほど。これを指定したHTMLファイル内でのみ有効なんですね。」


先輩:
「そういうことだ。そして最後が外部スタイルシート。」


アキヒロ:
「はい。」


先輩:
「これは完全に独立したスタイルシートファイルを作るのだ。こうする事で複数のHTMLのスタイル情報を一括で管理できる。」


アキヒロ:
「これが通常使われている方法か。」


先輩:
「ただのテキストファイルにスタイルを設定し拡張子を.cssにすれば作成できる。」


アキヒロ:
「ずいぶん簡単ですね。」


先輩:
「うむ。そしてそのスタイルを適用したいHTMLにスタイルシートを読み込みますよ。と以下の様に設定する事でHTMLとCSSが関連付けられるのだ。」

<head>


<link href=「スタイルシートのファイル名」

rel=”stylesheet” type=”text/css” />


</head>


アキヒロ:
「なるほど。なるほど。良くわかりました。で今日の小技は。」


先輩:
「結局それが目的かよ。しょうがない。それじゃリンク文字にマウスを置くと色が変わる方法を教えよう。」

a:hover { color:#FF0000; }
a:hover { background:#FF0000; }


先輩:
「上が単純にリンク文字の色下は背景式の色が変わる。スタイルシートにこれらを設定するとリンク文字全てに適用される。」


アキヒロ:
「おお。面白い。今日も色々ありがとうございました。」

CSS」への22件のフィードバック

  1. Hayato

    はやとです。
    お、すげ~。CSSの解説ですね!
    このシリーズは、かなり多くの人にとって参考になりそうですね!
    応援!

    返信
  2. アフィリDr.ザルガバース

    こんばんわ、ザルガバースです☆
    CSSは全く理解できていないので、非常に参考になりました。
    先日コメント頂いた、人気ランキングのクリックの件ですが、皆様の見解が結構違ったので、直接メールで問い合わせしてみました。
    返答があったら、ご報告しますね。
    ポチッ

    返信
  3. Hayato

    お、更新前ですね♪
    今日は更新していない方がちらほらと。
    自分も今日、更新遅かったです♪
    おーえん!

    返信
  4. はじめまして。

    こんにちは。
    ランキングより参りました。
    今、お小遣い稼ぎしてるんですけど、
    留学費用を稼ぐ為です。
    ところで、AKIさんはどのくらいの期間
    行かれてるんですか??
    カナダは候補地の一つです~

    返信
  5. AKI

    CSSはまだ自分も完全に理解できてません。
    これから真剣に勉強していこうと
    思います。
    今日も皆さんコメントありがとうございました。

    返信

Quicktime Movie Player にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>