CSSの基礎の基礎を学ぶ

HTMLの基礎の基礎を学んだら、次にCSSの基礎の基礎を学びましょう。

個人的に、テーブルレイアウトからCSSレイアウトへ移行する時に、結構手こずった記憶がありますが、今はテーブルレイアウトを覚える必要がありませんので、意外とわかりやすいのかもしれません。

HTMLで書かれたページを装飾したり整形するのがCSSの役目です。サイトのデザイン担当がCSSというわけです。

まずはこの3つを覚えます。私自身、誰に教えてもらったわけでもなく、本を一冊買ってきて軽く読んだ後に、後は実践で覚えていったタイプなので、どのように覚えていくのが良いのかわからないのですが、あまり深く考えずにCSSはこういうものだという覚え方で良いのかもしれません。

CSSを書く場所

CSSの書き方は3つあります。

  1. 外部ファイルに書く
  2. head内に書く
  3. body内に書く

どの方法でも良いのですが、おすすめなのは外部ファイルに書く方法です。

たとえば、「main.css」と言ったファイルを作り、そこにサイト内で使うCSSを書いていきます。そのCSSを適用するページのhead内には、以下のように記述します。

<link rel="stylesheet"href="CSSファイルのURL" type="text/css">

当サイトであれば以下のようになっています。

<link rel="stylesheet" href="http://rensabanet.com/wp-content/themes/keni/style.css" type="text/css"/>

これでstyle.cssというCSSファイルがそのページに適用されます。

»CSSの外部参照・内部参照・インラインの書き方

CSSの基本書式

CSSは「セレクタ」と「プロパティ」で構成されています。

p {
  color: #333;
  margin-bottom: 20px;
}

たとえば、ページ内のpタグに対して#333の色指定と、下マージンを20px指定するときのCSSはこのようになります。

この場合、セレクタにあたるのが「p」で、プロパティにあたるのが、「color」や「margin-bottom」です。

子孫セレクタ

#main-contents p {
  color: #333;
  margin-bottom: 20px;
}

このように書いた場合、「main-contents」というIDのDiv内のpタグに対してCSSが適用されます。

この場合、親要素にあたるのが「main-contents」で子孫要素にあたるのが「p」です。

「#main-contents .contents p」というようにどんどん子孫要素を増やすこともできます。

»CSSの親要素と子孫要素や継承について理解する

Class名とID名

Divやpタグなどの要素には、Class名やID名を振ることができます。CSSでClass名を指定する時は、名前の前に「.」を付け、IDを指定する場合は、名前の前に「#」を付けます。

<div id="main-contents">
<div class="contents">
<p>ここに文章が入ります。</p>
<p class="red">ここの文字を赤くしたい</p>
</div>
</div>

このようなHTMLがある場合に、「ここの文字を赤くしたい」という文章を赤いフォントにしたい場合は、

.red {
  color: #f00;
}

p.red {
  color: #f00;
}

.contents .red {
  color: #f00;
}

#main-contents .contents .red {
  color: #f00;
}

このように色々な書き方ができます。pタグに対して指定してしまうと全てのpタグが赤文字になってしまうので、赤くしたい文字のpタグにredというclass名を振り、そのclassに対して赤色である#fooを指定します。class名は好きな名前でOKです。

タグなどにclassやidを割り振ることで、細かい指定ができるようになります。なお、classは一つのタグに対して複数指定出来ますが、idは1つしか指定出来ません。また、idはそのページ内で同じ名前を付けることができません。

CSSで良く使うプロパティについては、挙げたらきりがないので、詳しい説明は、スタイルシートリファレンスをご覧ください。

»CSSのid名とclass名の付け方

CSSでデザインしてみる

HTMLの基礎の基礎で作ったサンプルページをCSSでデザインしてみたいと思います。

サンプルはこちら
image01

CSSのサンプルはこちら

超シンプルにデザインしていますので、HTMLとCSSを見れば初心者の方でも分かると思います。

このようにHTMLとCSSを使った簡単なデザインが出来るようになれば、あとは応用していけば良いだけです。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ