CSS入門まとめ

ブログが作りたい!CSS入門 > CSS入門まとめ

CSS入門まとめ

CSS入門まとめ

CSS入門(29)

CSS入門のまとめです。今までやってきたことを整理しておきます。軽くチェックして、復習してみてください。

お話は、次の順番で進みます。

▲ページの先頭に戻る

CSSの基本的なこと

1:CSSの基本文法

CSSの基本となる書き方です。「適用先」→「何を?」→「どうする?」

CSSの基本文法

自信がない人は、記事「CSSの書き方:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:複数の適用先

複数の適用先(セレクタ)を、書きたい場合は、「,(カンマ)」で区切ります。同じ指定を何度も書かなくて済みます。

複数の適用先

何のことやら忘れてしまった人は、記事「適用先の複数指定」をご覧ください。

▲ページの先頭に戻る

3:子孫セレクタ

子孫関係にある場合、したい場合に使います。適用先(セレクタ)を、半角スペースで区切ります。

複数の適用先

例えば、「A」の中の「C」という書き方をすれば、「B」の中の「C」には適用されません。グループ分けをした使い方ができます。

自信がない人は、記事「継承と子孫セレクタとは?:CSS入門」をご覧ください。

▲ページの先頭に戻る

4:idセレクタ、classセレクタ

特定のタグにCSSを適用したい場合は、idセレクタ、もしくは classセレクタを使います。

idセレクタは、次のように書きます。適用先は、「#(いげた)+idセレクタ名」です。

#idセレクタ名 { 何を?:どうする?; }

classセレクタは、次のように書きます。適用先は、「.(ピリオド)+classセレクタ名」です。

.classセレクタ名 { 何を?:どうする?; }

忘れた人は、記事「idセレクタ、classセレクタとは?:CSS入門」をご覧ください。

▲ページの先頭に戻る

5:CSSファイルの外部読み込みの方法

CSSファイルを外部から読み込んで、HTMLへ適用するための方法です。

例えば、hoge.cssを使いたいときは、次のように指定します。(CSSファイルは、http://myblog.com/style/下にあるとします)

自信がない人は、記事「CSSファイルの外部読み込み:CSS入門」をご覧ください。

▲ページの先頭に戻る

文字

1:文字色の変更【color】

文字の色を変更したいときは、「color」を使います。

例えば、<p>タグの文字の色を白色にするときは、次のように指定します。

自信がない人は、記事「文字色の変更【color】:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:フォントの変更【font-family】

フォント・タイプを変更したいときは、「font-family」を使います。

例えば、<p>タグのフォントを、「sans-self」にしたいときは、次のように指定します。

自信がない人は、記事「フォントの指定【font-family】:CSS入門」をご覧ください。

どのようなフォントが良いか分からないときは、記事「日本人が好きなフォントは?:CSS入門」をご覧ください。

▲ページの先頭に戻る

3:文字サイズの変更【font-size】

文字サイズを変更したいときは、「font-size」を使います。

(1)キーワード指定

例えば、<p>タグの文字サイズを、「small」に設定したいときは、次のように指定します。

自信がない人は、記事「文字サイズの変更【font-size】(1):CSS入門」をご覧ください。

▲ページの先頭に戻る

(2)数値指定

例えば、<p>タグの文字サイズを、「95%」に設定したいときは、次のように指定します。

自信がない人は、記事「文字サイズの変更【font-size】(2):CSS入門」をご覧ください。

▲ページの先頭に戻る

文章

1:段落のインデント【text-indent】

文章をインデント(字下げ)させたいときは、「text-indent」を使います。

例えば、<p>タグをインデントさせるときは、次のように指定します。

自信がない人は、記事「段落のインデント【text-indent】:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:行の間隔【line-height】

行の間隔を調整したいときは、「line-height」を使います。

例えば、<p>タグの行間を半文字分だけあけたいときは、次のように指定します。

自信がない人は、記事「行の間隔【line-height】:CSS入門」をご覧ください。

▲ページの先頭に戻る

3:文字の間隔【letter-spacing】

文字の間隔を調整したいときは、「letter-spacing」を使います。

例えば、<p>タグの文字の間を、1/10文字分だけあけたいときは、次のように指定します。

自信がない人は、記事「文字の間隔【letter-spacing】」をご覧ください。

▲ページの先頭に戻る

箇条書き(リスト)

1:リストマークの変更【list-style-type】

リストマークを変更したいときは、「list-style-type」を使います。

例えば、「数字」にしたいときは、次のように指定します。

自信がない人は、記事「箇条書きの装飾【list-style-type】:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:リストに画像を使う【list-style-image】

リストマークに画像を使いたいときは、「list-style-image」を使います。

例えば、画像(hoge.gif)を使いたいときは、次のように指定します。(画像は、http://myblog.com/image/下に置いてあるとします)

自信がない人は、記事「箇条書きに画像【list-style-image】:CSS入門」をご覧ください。

▲ページの先頭に戻る

背景

1:背景色の変更【background-color】

背景色を変更したいときは、「background-color」を使います。

例えば、<h1>タグの背景の色を白色にするときは、次のように指定します。

自信がない人は、記事「背景色の変更【background-color】:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:背景に画像【background-image】

背景に画像を使いたいときは、「background-image」を使います。

例えば、<body>タグの背景に画像(hoge.gif)を使いたいときは、次のように指定します。(画像は、http://myblog.com/image/下に置いてあるとします)

自信がない人は、記事「背景に画像【background-image】:CSS入門」をご覧ください。

▲ページの先頭に戻る

罫線

1:罫線を描く【border】

罫線を描くときは、「border」を使います。

例えば、<img>タグの回りを罫線で囲みたいときは、次のように指定します。(罫線は、太さ1px、実線、黒色)

自信がない人は、記事「罫線を描く【border】:CSS入門」をご覧ください。

▲ページの先頭に戻る

レイアウト

1:間隔(余白)をあける【margin、padding】

間隔(余白)をあけたいときは、「margin(罫線の外側)」か「padding(罫線の内側)」を使います。

例えば、<h1>タグの回りに間隔(余白)を入れたいときは、次のように指定します。(間隔は、全方向5px)

自信がない人は、記事「margin、paddingとは?:CSS入門」をご覧ください。

▲ページの先頭に戻る

2:文字の中央揃え【text-align】

文字を中央揃え(センタリング)したいときは、「text-align」を使います。

例えば、<h1>タグを中央揃えするときは、次のように指定します。

自信がない人は、記事「文字の左右・中央揃え【text-align】:CSS入門」をご覧ください。

▲ページの先頭に戻る

3:表(table)の中央揃え

表(table)を中央揃え(センタリング)したいときは、「margin」を使います。次のように指定します。

IEブラウザのバグ対応については、記事「表(table)の中央揃え:CSS入門」で確認してください、

自信がない人も、記事「表(table)の中央揃え:CSS入門」をご覧ください。

▲ページの先頭に戻る

4:幅と高さを決める【width、height】

幅や高さを指定したいときは、「width」、「height」を使います。

例えば、<h1>タグの幅を500px、高さを400pxに指定したいときは、次のように指定します。

自信がない人も、記事「幅と高さを決める【width、height】:CSS入門」をご覧ください。

▲ページの先頭に戻る

5:段組みレイアウト【float】

段組みレイアウト(カラム レイアウト)にしたいときは、「float」を使うと簡便です。

話がややこしいので、方法は、記事「段組みレイアウト【float】:CSS入門」をご覧ください。

▲ページの先頭に戻る

リンク

1:リンクを装飾する

リンクを装飾したいときは、適用先を「a」、「a:link」、「a:visited」、「a:hover」、「a:active」にして、それぞれ指定ます。

例えば、マウスのカーソルがリンクの上に乗ったときに、文字サイズを変更する場合は、次のように指定します。

自信がない人は、記事「CSSでリンクを装飾する:CSS入門」をご覧ください。

▲ページの先頭に戻る

次回予告

次回は、HTMLとCSSにコメントを入れる方法について書いています。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/19 更新日:2008/05/19

« 「最後にIEでチェック+CSSハック」|「HTMLとCSSにコメントを入れる方法」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

お世話になってます

クマさんこんにちわ。お久しぶりです。

CSSカスタマイズの引用タグの件では、不躾な質問に丁寧にお答えいただきありがとうございました。

常時1000人近くUUが訪れるクマさんのブログはほんとすごいっす。小生などは、やっと50いくかいかないかです(涙)

使用中のテンプレートでわからないところがあるので質問よろしいでしょうか。ほんと迷惑かけます(汗)

brepo-right-red(共有テンプレート)というテンプを使用中です。スタイルシートの「.entry」をカスタムして

{~
border-width: 1px 1px 1px 1px;
border-style: solid;}

などの枠線を引くとよくわかるのですが、記事を配置する場所と思われるスタイルシート部分が、枠線の中にまた枠線がある二重箱みたいな状態になっています。

記事本文を作成すると、この外枠線の中の内枠線(例えると箱の中の小箱)の中に本文が書きこまれるようなのです。

そして記事本文で引用タグなどHTML?を使用した以後の段落に記事を書くと、この内枠線の中に記入されていたモノが、外枠線の中に記入されるようになってしまいます。この原因がわかりません。

わかりにくすぎる説明で申し訳ありません。
クマさんのページで例えると引用タグを使用した直後の段落だと、クマさんの「補足印のアイコン」と文字が急に左寄りに位置する感じです。

私が使用中のSS作成者でないクマさんに尋ねるのはお門違いなのをお許しください。、できる範囲でお教え願います。お手数かけます。

「class="entry"」の指定

sprawlさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

そうですねー、作った人に伺った方が、
迅速で正確な回答が得られるものと思います。

ちょっと見てみましたが、分からないですね~。
どういう意図でこういう指定をしておられるのか。


まず、HTMLの方の「class="entry"」の指定が、
よく分からないです。

これ一番最初のdivに対する「class="entry"」だけで、
良くないですかね?

他に<%topentry_body>とかにも、3箇所くらいついていますが、

CSSの「.entry」の指定内容とあわせて考えると、
どういう意図なのか、よく分かりません。


起こっている現象についても、原因についても、
よく分かりませんが、

HTMLの方の「class="entry"」を、
一番最初のdivタグの分だけ残して、

あとは削除してみてはいかがでしょうか?


また、そうすると、margin-leftなどの効果は、
足りない部分が出てくるかもしれませんから、

次のような形で、書いておけば良いのではないかしら。

.entry p {
margin-left:20px;
}


追記(22:40):
それから、<%topentry_body>と、<%topentry_more>は、
pタグで囲まれているけれど、

文章の中で、blockquoteタグを使う予定があるのなら、
pタグではなく、divタグにしておく方が良いかもしれません。

pタグの中に、blockquoteタグが入ると、
文法的にちょっとおかしい感じがします。


追記(23:00):
失礼。CSSの「.entry」って、2箇所ありますね。

これまた、どういう意図なのか分からないのですが、
こういう記述の仕方であれば、とくに意味は感じられないので、

一緒にした方が、分かり良いかもしれません。
(font-sizeやmarginの指定など、整理できますね)

ちなみに、レイアウトに関するものは先に書いて、
装飾に関するものは後に書くというような書き方であれば、

別々に書く意味はあります。

ありがとうございます

クマさん、おはようございます。
解説ありがとうございます。

本当に頭が下がります。
HTMLの記述は作成者の個性がでるものなのですね。
クマさんの説明を参考に、いろいろいじくってみます。

また、お手数おかけしました。
やっぱりクマさんのコメント対応はすばらしい。

恐縮

sprawlさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

ズバッと解決する回答がしめせず、
恐縮でございます。

いじっているうちに解決すると良いですねぇ。

ありがとうございました。

若干古い記事にコメントをつけてすみません。
「CSS入門」を読んで、はじめてCSSの基本的な考え方を理解できました。

以前入門書を買ったのですが、最初の段階で挫折したまま何年も放置してました。
やっと放置したままの本を読み進めていくことができそうです。

本当に感謝いたします。

HTMLのファイルからCSSのファイルへのリンクを実際に貼って色々試せたことで、多少CSSが私の血と肉になったようです。
コピペできる手軽さ、WEBならではですね!

分かりやすい解説、ありがとうございました!

どういたしまして

Chanottiさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

多少なりともお役に立てたなら幸いでございます。

おそらく、CSSによらず、IT関係はわりと、頭で考えるより、
さわってみて、慣れるほうが上達が早いような気がいたします。

どんどん、いじって、楽しんで、
いろいろやってみてくださーい。ヾ(*´∀`*)ノ

素敵なサイトができると良いですね。

ありがとうございました

分かりやすくてすごく助かりました。
本を見ながら独学で勉強してたため辛かったんですが、
このサイトを見て分かりすぎるぐらい理解できました
このブログを作っていただき本当にありがとうございます!!!!

独学

ryuさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。


お疲れさまでした。
独学は大変ですよねー、ほんと。

当ブログがいくらかお役に立ちましたようで、
良かったです。ヾ(*´∀`*)ノわーい


コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/299-580423f0
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて