こんにちは。あきです。
前回先輩よりテーブルタグについて学び
今日は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の解説ですね!
このシリーズは、かなり多くの人にとって参考になりそうですね!
応援!
こんばんわ、ザルガバースです☆
CSSは全く理解できていないので、非常に参考になりました。
先日コメント頂いた、人気ランキングのクリックの件ですが、皆様の見解が結構違ったので、直接メールで問い合わせしてみました。
返答があったら、ご報告しますね。
ポチッ
AKIさん、こんばんは~!
CSSはよく分かっていなかったので勉強になりました!
応援ポチポチ♪
こんばんは~かめちきです♪
コレもまた参考になりました。
そうなんだ~って感じです^^
それでは応援ぽちっと♪
こんにちは! 作田です。
いつも応援ありがとうございます!
訪問が遅れてすみません。
カズタマイズしようとして
CSSをいじり、数分後には結局元に戻す
この繰り返しです・・・。
また来ます! 応援!
お、更新前ですね♪
今日は更新していない方がちらほらと。
自分も今日、更新遅かったです♪
おーえん!
こんばんわ、小次郎です(^o^)
いつも応援ありがとうございます☆
AKIさんはすごいですー!!!
ここに来るといつも新たな
情報に出会えます☆
応援ポチッ♪
こんばんは、なおです^_^””
CSSのこと分かってなかったから勉強になりました。,,,,,,,,,,,
詳しいんですね。,,,,,,,,,,,
登場人物の先輩って実在するの?,,,,,,,,,,,
“ポチッと”
こんにちは。
ランキングより参りました。
今、お小遣い稼ぎしてるんですけど、
留学費用を稼ぐ為です。
ところで、AKIさんはどのくらいの期間
行かれてるんですか??
カナダは候補地の一つです~
CSSはまだ自分も完全に理解できてません。
これから真剣に勉強していこうと
思います。
今日も皆さんコメントありがとうございました。
Just thought I’d make a note about a problem!
The content of your show is great, I really enjoy it
Very nice write up.
Not really new!
I was very dissapointed of this
Not really new.
The content of your show is great, I really enjoy it
That’s awesome
I use Firefox in Ubuntu
Whether they kept their words I never dispute anything that might be well married, as high as our safeguard in the scale of a moment’s notice.
Hardinge really felt himself bound by my nearest and dearest friends.
was owing to several circumstances.