× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】CSS入門 (全20回)

最新版のレッスンはこちらから » 【最新版】CSS入門 (全23回)

ウェブサイトの見た目を制御するための言語の基礎を学びます。文字の色や背景色、画像の配置などを自在にデザインすることができます。

#01 CSSとは何か?
1390日前
大文字小文字をどう使い分けるべきか、字下げはどうすべきか、といったCSSのコーディング規約については以下のサイトでGoogleがまとめています。学習を終えた後にざっと眺めておくと良いかと思います。
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
1584日前
Google Chrome のインストールはこちらから。
http://www.google.co.jp/chrome/
#02 CSSはどこに書くか?
1362日前
外部スタイルシートを更新しても、ブラウザにキャッシュが残っていて、うまく反映されないことがあります。

そういう場合には href に指定するファイル名に適当なパラメータをつけておき、スタイルシートを更新したらそのパラメータを別の値に変更するという方法がよくとられます。

<link rel="stylesheet" href="mystyle.css?147392849823">

<link rel="stylesheet" href="mystyle.css?v=148391846376">

こうすることでブラウザ側のキャッシュが無効になり、きちんとサーバーのスタイルシートを読み込んでくれます。
1400日前
スタイルシートは上記以外の方法にも@importで読み込む方法があります。具体的には次のように書きます。
@import url('mycss.css');
これはstyleタグの中に書いてもいいですし、あるスタイルシートから他のスタイルシートを呼び出すときにも使えます。
たとえばmycss.cssの中で次のように書くことができます。
/* mycss.css内でcommon.cssを呼び出す場合 */
@import url('common.css');
長くなりがちなスタイルシートを分割して管理する際にも便利なので覚えておきましょう。
1443日前
<style>タグについて

HTML4.01で書かれたHTMLソースには、<style>タグに「type="text/css"」という属性がついていると思います。

<style type="text/css">
  h1 {
    color: red;
  }
</style>

しかしドットインストールのレッスンでも採用している最新のHTML5では、<style>タグにtype="text/css"という属性を指定する必要はありません。

これは、HTML5において「<style>タグのtype属性の初期値はtext/cssである」と決められているためです。
1609日前
HTMLファイルの1つ上のディレクトリに置いているスタイルシートを読み込む際には「../」をつけます。

<link rel="stylesheet" href="../mystyle.css">

2つ上の場合は「../../」のように「../」を2個つけます。
このように「../」の数だけディレクトリをさかのぼることができます。

また、「/」で始めればURLのドメイン直下からのパスとして扱われるため、HTMLファイルとCSSファイルとの相対的な場所の違いを意識する必要がありません。

(例) http://www.example.com/css/mystyle.css の場合
<link rel="stylesheet" href="/css/mystyle.css">
#03 CSSの書き方の基本
1584日前
CSSでは半角スペースが必ず必要な箇所と、そうでない箇所があります。
たとえば { } の前後や : ; の前後には必ずしも半角スペースは必要ではないので、以下のようにも書けます。
h1{color:red;}
ただこれだと読みづらいため、レッスンにあるような書き方をよくします。

なお、値を複数並べる必要がある書き方をする場合には、複数の値を識別できるように半角スペースが必要です。(以下の「1px solid #fff」の部分)
h1 {
    border: 1px solid #fff;
}
#05 テキストのスタイル
1408日前
redやgreenといった、CSSで定義されている色は以下でも確認することができます。全部で147色あるようです。
http://www.147colors.com/
1418日前
text-alignの値には left(左寄せ)、right(右寄せ)、center(中央揃え)の他、justify(両端揃え)というものもあるので覚えておきましょう。
1605日前
色をあらわす16進数の表記は、先頭から2桁ずつ赤、緑、青の色の強さをあらわします。
#ffff00 だったら 赤=ff / 緑=ff / 青=00 となります。
「色 16進数」や「カラーコード」といったキーワードで調べてみましょう。
#06 もっとテキストのスタイル
1605日前
text-decoration: underline; の下線スタイルは実線のみですが、破線(点線)の下線をつけたいということもあるでしょう。
その場合は text-decoration の代わりに、ボックス下部の境界線を指定する border-bottom を下線代わりに利用するというテクニックが使えます。

border-bottom: dotted 1px #000;

この場合、ボックスの幅をきちんと調整するなどの工夫も必要です。

#09 境界線のスタイル | CSSの基礎
http://dotinstall.com/lessons/basic_css/109
#07 背景のスタイル
1605日前
background-image の url に指定する画像ファイルのパスを相対パスで指定する場合は、CSSファイルからの相対パスで記述するということに注意しましょう。
#10 余白のスタイル
1434日前
現在適用されている余白の幅などを確認するにはChrome Developer ToolsのElementsパネルが便利です。詳しい使い方は以下からどうぞ。
http://dotinstall.com/lessons/basic_chrome_dev/7104
1605日前
余白はサイトの見やすさを決める重要な要素ですので、marginとpaddingの使い方はしっかりとマスターするようにしましょう。
#12 レイアウトを作る
1605日前
ここではもっともシンプルなレイアウトを紹介しましたが、CSSを使ってより複雑なレイアウトを組むことができます。ただ、最初から自分で作るのが面倒な人のためにCSSフレームワークというものがあります。
これはよくあるレイアウトを簡単に作れるようにあらかじめ用意されたCSSになります。代表的なものはツイッター社が提供しているTwitter Bootstrapがあります。
ドットインストールでも紹介していますので是非ご覧ください。
http://dotinstall.com/lessons/basic_twitter_bootstrap
#13 リストのスタイル
1605日前
リストの ul li タグは、list-style: none; と float: left; を利用して、HTML上に「タブメニュー」を実装する際にもよく利用されます。

タブはHTMLの表示上は箇条書きではありませんが、「意味的に」リストを表すということでよく使われます。

このドットインストールのサイトで使われているタブメニューにも ul li タグが使われているので確認してみてください。
#14 表示のスタイル
1306日前
display のプロパティには inline-block というものもあります。

これを使うと、インライン要素に幅(width)や高さ(height)を持たせることができて便利です。

span.list {
  display: inline-block;
  width: 100px;
  height: 20px;
}
#15 カーソルのスタイル
1605日前
カーソルには以下のような種類があります。

pointer: リンク用の手のアイコン
move: 移動するためのカーソル
help: はてなカーソル
text: テキスト編集中のようなカーソル
crosshair: 十字のカーソル
wait: 時計のカーソル(処理中)
n-resize: ↑カーソル
s-resize: ↓カーソル
w-resize: ←カーソル
e-resize: →カーソル

他にもありますので、「css cursor」などで検索してみると良いでしょう。
#16 セレクタの高度な指定方法
1267日前
セレクタの指定方法には「+」もあります。これは「隣接セレクタ」もしくは「兄弟セレクタ」と呼ばれます。

例えば次のようなコードがあったとします。
<h1>heading 1</h1>
<h2>heading 2-1</h2>
<p>paragraph</p>
<h2>heading 2-2</h2>
このときに次のようにCSSで指定してみます。
h1 + h2 {
    color: red;
}
これは「h1の次に現れるh2」を表すので「heading 2-1」のみが赤字になります(「heading 2-2」はこのセレクタでは該当しない)。

個人的によく使うのは次のような指定方法です。
td + td {
    border-left: 1px solid #ccc;
}
これでtd要素が複数並んでいれば、最初のセルを除く2番目以降のセルで左側に枠線が引かれるので、テーブル内の罫線のスタイルを指定するときに便利です。
#17 擬似クラスについて
1222日前
CSSには擬似クラスのほかに擬似要素というものもあります。

擬似要素の種類には「:after」「:before」「::first-letter」「::first-line」「::selection」があります。

:after と :before はその要素の前後に要素を生成してくれます。以下のように書くと ul 要素の直後に「こんにちは!」という文字が挿入されます。

ul:after {
    content: 'こんにちは!';
}

そのほか、「::first-letter」はその要素内の最初の文字、「::first-line」は最初の行、「::selection」はその要素をマウスなどで選択状態にした時のスタイルを指定することができます。

/* li要素を選択したときの背景色が赤色になる */
li::selection {
    background-color:#f00;
}

疑似要素 (Pseudo-elements) - CSS | MDN
https://developer.mozilla.org/ja/docs/CSS/Pseudo-elements
#18 セレクタの優先順位
1427日前
このほか HTML タグに直接 style 属性で CSS を書くこともあります。

http://dotinstall.com/lessons/basic_html/321

<p style="color:blue;">こんにちは!</p>

基本的に style 属性は外部スタイルシートや style タグ内の記述より優先されますが、!important よりは優先されないことに注意しましょう。

しかし、もし style 属性にも !important が指定されているなら、style 属性が優先されます。