So-net無料ブログ作成
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。

CSSを記述してみよう

kyara1.png:「Q太郎さん、まずブログタイトルの文字を
変えたいんですけど、その時は#banner h1{ }ってところに
font-size:★;やfont-family:★って記述すればいいんだよね」

kyara2.png:「ああ、そうだ」

kyara1.png:「もし、#banner{ }に記述すると、ブログタイトルとサブタイトルの
両方が変わってしまうの?」

kyara2.png:「#banner h1と#leadに何も触れていなければ変わらない。
前回の優先順位の法則だ」

kyara1.png:「そっか、全体よりも部分が優先されるんだよね。
じゃあ、ちょっと記述してみるよ。
えーっと、文字の大きさが20pxで、色は青、フォントは富士ポップに
してみようかなと。
#banner h1{
margin:0;
padding:80px 0 0 14px;
font-size:20px;
font-family: '富士ポップ';
color:blue

}
これでいいのかな。よしプレビューで確認してみよう~」

なじむ 実に! なじむぞ
過程や・・・! 方法なぞ・・・! どうでもよいのだァーッ


kyara1.png:「Q太郎さん、文字の色も、大きさも、フォントも変わってますよ」

kyara2.png:「べいすた成長したな。このCSSを指定したのは
まぎれもなくべいすた、お前だ」

kyara1.png:「今度はサブタイトルもいじってみようかな。
サブタイトルは#leadだったよね。
うーん、斜体にボーダーなんてどうかな。

#lead{
padding:0 14px;
color: #ad0f00;
font-style:italic;
border-bottom:black dotted 7px;

}

なじむ 実に! なじむぞ
過程や・・・! 方法なぞ・・・! どうでもよいのだァーッ


kyara1.png:「Q太郎さん、出来ているよ~。
もうCSS怖くないぞ!!」

kyara2.png:「やれやれだぜ」

to be continued



この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。