delaymania

ギタリストでもありWEBデザイナーでもある人が、音楽のこと、ITのことを話すブログです。Apple製品(iPhone,iPad,Macなど)やiPhoneアプリ、EvernoteなどのWEBサービスの話題が多めです。

http://delaymania.com

CSS初心者ブロガーに捧げる！超簡単なCSS書き方講座 | delaymania.com

WEBデザイナーの@ delaymania です。 ブログを始めてなににつまづくかって、「CSSってどうやって書いたらいいの？」ってとこじゃないですかね。 WordPressはもちろん、たとえばアメブロやFC2などの無料のブログサービスを使ってる人もCSSをいじることはできます。 CSSは慣れるとものすごく簡単な言語です。 決して難しくないので、初心者の方が怖がらなくてもいいように、CSSの記述のルールを解説します。 CSSの書き方のルール 「どこの」「なにを」「どうしたいか」 書き方は超簡単です。基本構造はこんな感じ。 簡単に言うと どこの { なにを: どうしたいか; } です。 たとえばこんな感じ。 記事タイトルの { 文字の色を:黒くしたい; 文字の大きさを:でかくしたい; } h1{color:#000000;font-size:150%;} サイドバーの見出しの { 背景色を:オレンジにしたい; 文字の色を:白にしたい; } .sidebar h2{background-color:#ff9900;color:#ffffff;} といった具合。 カッコやコロン、セミコロンは書き方のルールなのでマネして入れてください。 プロパティは足したいだけ足すことができます。 順序も厳密には関係ありますけど、基本的には好きな順番で大丈夫です。 見やすくするために改行や半角スペースを入れる 上記のような書き方だとちょっと見づらいですよね。 セレクタやカッコの前後に「半角スペース」「改行」「Tab」を入れてもいいので、たとえばこんな風に見やすくできます。 h1 { color: #000000; font-size: 150%; } .sidebar h2 { background-color:#ff9900; color:#ffffff; } セレクタの書き方 idセレクタ idセレクタはhtmlのファイル１ページにつき１度しか使えません。 特定の場所を指定するときに使います。 記述方法 HTML側には「id="○○"」という記述をします。 CSS側では頭に「#」をつけることでidという意味になります。 ソースの例 #content { width: 640px; padding: 10px; } classセレクタ classセレクタはidセレクタ同様場所を指定するセレクタで、１ページ中に何度でも使うことができます。 複数出てくるものに同じスタイルを適用したいときに使います。 idを使わずclassセレクタのみでやりくりすることは可能です。(見にくくなるので僕はidと使い分けてますけど) 記述方法 HTML側には「class="○○"」という記述をします。 CSS側では頭に「.」をつけることでidという意味になります。 ソースの例 .entry-content { margin: 20px 0; } 子孫セレクタ 「idの箱の中にあるリスト」とか「classの箱の中にあるリンク」といった指定方法が子孫セレクタです。 idやclassを使わなくても、「section li a」などの記述をすれば「sectionの中のリストの中のリンク」といった指定ができます。 ページ数の少ないサイトであれば細かくidやclass名つけられますが、ブログのように膨大なページ数を扱う場合などには便利です。 記述方法 HTML側では順次マークアップしていってください。 CSS側はHTML側でマークアップされた階層構造の順に左から書いて行きます。 ソースの例 記事タイトル 文章の本文がここにきます...

http://bit.ly/OyOgfu