PR
Keyword Search
▼キーワード検索
ぐっちぃ117
皆さんもご存知のCSS。 リファレンスサイトはよくあるけど・・・・ こちらでは、実際どのように、デザインに利用していくかを 解説するページです。 楽天広場で利用できるテンプレートも作れたらいいなと、 考えてます。
Freepage List
Comments
2005.02.04
テーマ： スタイルシート（CSS)(12)
カテゴリ： CSS
本題に入る前に・・・
昨日、新テーマを作成した、ぐっちぃ１１７（私）だが、
いきなり、とんでもないミスを犯してしまう結果になってしまった（汗。
テーマの説明文を見ていただきたい。
”楽天広場で使える、小技的なも等”と書いてあるのですが・・・。
ん？ ”小技的なも等”って何でしょうね？（笑。
・・・。（赤面
すいませんでした。正しくは ”小技的なもの等”
申し訳ありませんでした。今後、このようなミスがないように、気をつけようと思います。
今回は、CSSを利用し、サブタイトルをデザインしてみましょう！
日記内では、CSSが使えないので、サンプルを、トップページ
においておきます。そちらとあわせご覧ください。
さて、サブタイトルと聞いて、まず思いつくタグは、<h1>などの、見出しに利用するタグではないでしょうか。
上の見出しも、<h1>を使用しています。
本来ならば、このタグを利用し見出しをデザインするのが理想なのだが、楽天広場では、唯一のCSS利用法の、
STYLE属性が、<h1>系の見出しタグには、使用許可されてません（汗。
まぁ、CSSを利用するだけなら、タグで囲まれてりゃいいわけで、何使ったって良い
って、こんなにいい加減じゃいけませんね（笑。
しかし、適当なタグがないため、今回は、段落を表すタグ、<p>を利用してみます。
＊サンプル１（トップページ）
ん～イマイチ（笑
背景色をかえてみましょうか。
＊サンプル2（トップページ）
だんだんそれっぽくなってきましたね！
解説をすると,
style="は、ここからスタイルシートですよってしるし。CSSを利用する際は必ず記述します。
width: 100%;は、横幅の指定。width(横幅)が、100％、つまり、両端まで全部ってことです。
height: 20px;は、高さの指定。height(高さ)が、20px、pxはピクセル。つまり高さ20ピクセル。
border-style: solid;は、border(枠)のstyle(スタイル？）が、solid(直線)ってこと。
border-width: 1px;は、border(枠)のwidth(横幅）が、1px。まぁ、枠の太さです。
border-color: #000;は、枠のcolor(色)が、#000（黒)ってこと。色の指定については、6桁の16進数でも、色名でも可。
margin: 0; padding: 0;については、ちょっと詳しく説明したいので、今度ということで。とりあえず、0にしておいてください。
background-color: red;は、backgroud(背景)の色が、red（赤）だよってこと。色の指定は、6桁の16進数でも、色名でも可。
こんな感じになっています。よく考えていただければ簡単に、枠の太さなんかを変えられるはずです。
文字の大きさを変えたい場合は、<font>タグではなく、 font-size: 15px;などを同様にstyle属性に足せば完了です。
簡単ですね。CSSなんていっても、これくらいが解れば十分デザインしていけます。
今回、皆さんができるようになるはずなのは、
です。次回は、 borderに的を絞り、さらに凝った、サブタイトルデザインをしていきましょう！
日記ではCSSを使用できなさそうです！
今、ダッシュでフリースペース（日記の上）に、サンプルと解説をつくりますので、少々お待ちを。（汗
昨日、新テーマを作成した、ぐっちぃ１１７（私）だが、
いきなり、とんでもないミスを犯してしまう結果になってしまった（汗。
テーマの説明文を見ていただきたい。
”楽天広場で使える、小技的なも等”と書いてあるのですが・・・。
ん？ ”小技的なも等”って何でしょうね？（笑。
・・・。（赤面
すいませんでした。正しくは ”小技的なもの等”
申し訳ありませんでした。今後、このようなミスがないように、気をつけようと思います。
サブタイトルデザイン（見出し）その1
今回は、CSSを利用し、サブタイトルをデザインしてみましょう！
日記内では、CSSが使えないので、サンプルを、トップページ
においておきます。そちらとあわせご覧ください。
さて、サブタイトルと聞いて、まず思いつくタグは、<h1>などの、見出しに利用するタグではないでしょうか。
上の見出しも、<h1>を使用しています。
本来ならば、このタグを利用し見出しをデザインするのが理想なのだが、楽天広場では、唯一のCSS利用法の、
STYLE属性が、<h1>系の見出しタグには、使用許可されてません（汗。
まぁ、CSSを利用するだけなら、タグで囲まれてりゃいいわけで、
って、こんなにいい加減じゃいけませんね（笑。
しかし、適当なタグがないため、今回は、段落を表すタグ、<p>を利用してみます。
デザインを考える
＊サンプル１（トップページ）
ん～イマイチ（笑
背景色をかえてみましょうか。
＊サンプル2（トップページ）
だんだんそれっぽくなってきましたね！
width: 100%;
height: 20px;
border-style: solid;
border-width: 1px;
border-color: #000;
margin: 0;
padding: 0;
background-color: red;
">
■こんなんなりましたけど
</p>
解説をすると,
style="は、ここからスタイルシートですよってしるし。CSSを利用する際は必ず記述します。
width: 100%;は、横幅の指定。width(横幅)が、100％、つまり、両端まで全部ってことです。
height: 20px;は、高さの指定。height(高さ)が、20px、pxはピクセル。つまり高さ20ピクセル。
border-style: solid;は、border(枠)のstyle(スタイル？）が、solid(直線)ってこと。
border-width: 1px;は、border(枠)のwidth(横幅）が、1px。まぁ、枠の太さです。
border-color: #000;は、枠のcolor(色)が、#000（黒)ってこと。色の指定については、6桁の16進数でも、色名でも可。
margin: 0; padding: 0;については、ちょっと詳しく説明したいので、今度ということで。とりあえず、0にしておいてください。
background-color: red;は、backgroud(背景)の色が、red（赤）だよってこと。色の指定は、6桁の16進数でも、色名でも可。
こんな感じになっています。よく考えていただければ簡単に、枠の太さなんかを変えられるはずです。
文字の大きさを変えたい場合は、<font>タグではなく、 font-size: 15px;などを同様にstyle属性に足せば完了です。
簡単ですね。CSSなんていっても、これくらいが解れば十分デザインしていけます。
今回、皆さんができるようになるはずなのは、
- CSSの記載方法（広場に使える）
- 横幅の指定
- 高さの指定
- 枠線のスタイルの指定
- 枠線の幅の指定
- 枠線の色の指定
- 背景の指定
- 文字サイズの指定
です。次回は、 borderに的を絞り、さらに凝った、サブタイトルデザインをしていきましょう！
今、ダッシュでフリースペース（日記の上）に、サンプルと解説をつくりますので、少々お待ちを。（汗
お気に入りの記事を「いいね！」で応援しよう
[CSS] カテゴリの最新記事
-
CSS!目次デザイン その6 2005.02.23
-
CSS!目次デザイン その５ 2005.02.22
-
CSS!目次デザイン その４ 2005.02.21
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
