CSS チュートリアル — レッスン 1 — CSS スタイルを接続する

05/12/2019, by Ivan

CSS が何のために必要かは説明しません。このチュートリアルを開いたということは、CSS を学びたいということでしょう。私からは、CSS の可能性は非常に広く、あらゆる複雑さのレイアウトを組めるとだけ言っておきます。一方、CSS を使用するということは、size、color、bgcolor、align など、CSS の「邪魔になる」さまざまなタグ属性の使用をやめる必要があるということです。

CSS を HTML ファイルに接続する方法は少なくとも 3 つあります。最も簡単な方法、次に 2 番目、そして正しい方法を見ていきましょう。

タグ内の CSS

CSS は style 属性を使って接続できます。

<div style="widht: 200px; height: 100px;">
  ブロック
</div>

このようにして、サイズ 200×100 ピクセルのブロックを指定します。CSS の書き方を見てみましょう。まず style="" 属性を書きます。そして引用符の中に CSS スタイルを書きます。

style="パラメータ:値;パラメータ:値;パラメータ:値"

スタイルはこのように書きます。まずパラメータ（widht、height など）が来て、次にコロンとパラメータの値が来ます。各パラメータをセミコロンで区切ります。

では、CSS を書く 2 番目の方法です。

HTML ドキュメントの先頭にある CSS

このためには <style></style> タグを使用し、その中に CSS コードを書きます。

<html>
 <head>
  <title>CSS チュートリアル</title>
  <style type="text/css">
  ここに css コードを書きます
  </style>
 </head>
 <body>
  <p>drupalbook.org と一緒に CSS を学ぼう</p>
 </body>
</html>

style タグは <head></head> タグの中、<title> タグの後に書きます。何か CSS コードを書いてみましょう。

<html>
 <head>
  <title>CSS チュートリアル</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* ページの背景 */     font-size: 14px;            /* フォントサイズ */
   }
   p{
     color: #ff0000; /* テキストの色 */
   }
  </style>
 </head>
 <body>
  <p>drupalbook.org と一緒に CSS を学ぼう</p>
  <p>2 行目 drupalbook.org と一緒に CSS を学ぼう</p>
 </body>
</html>

タグ用の CSS の書き方を見てみましょう。CSS にタグ名を書くと、これらすべてのタグに CSS パラメータが適用されます。例えば p を書くと、すべての段落に次のパラメータが選択されます。

CSS コードを書くとき、まず CSS スタイルを適用するタグを指定し、次に波括弧の中に CSS スタイルを書きます。CSS スタイルは style="" 属性と同じように書きます。

パラメータ:値;パラメータ:値;パラメータ:値

パラメータ、コロン、値、セミコロン、そしてまたパラメータ、コロン、値、セミコロン、そしてまた…。最後のスタイルの後にはセミコロンを置かなくても構いませんが、置く方が良いです。

2 つの方法で CSS スタイルを挿入しました。では、3 番目の方法、最も最適な方法を使ってみましょう。

別ファイルの CSS

これは最良の方法で、CSS を HTML コードから完全に分離できます。もちろん、CSS を HTML コードに直接挿入したくなることもありますが、その場合は自分の手を叩いて、CSS を別ファイルに移すべきです。なぜでしょう？

これが CSS の主なアイデアで、テキストとテキストの装飾を分離することです。HTML はテキストをマークアップするために必要で、CSS はそのテキストが調和して見えるようにするために必要です。HTML でテキストのみを出力し、CSS でサイズ、色、形、境界線、余白を出力します。

これが第一の理由です。第二に、HTML と CSS のコードが 1 つのファイルにあると、読みにくく、かさばります。第三に、CSS はブラウザに保存されるので、すべての CSS を別に移すと、CSS を 1 回だけ読み込めばよいため、ページの読み込みが速くなります。もう私が何を言いたいかおわかりでしょう？

CSS はできるだけ別ファイルに移すべきです! それが私の言いたいことです。では、別の css ファイルを作成しましょう。このためには <link> タグがあります。

<html>
 <head>
  <title>CSS チュートリアル</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>drupalbook.org と一緒に CSS を学ぼう</p>
  <p>2 行目 drupalbook.org と一緒に CSS を学ぼう</p>
 </body>
</html>

type="text/css" — これが css であることを指定します。

rel="stylesheet" — このファイルが css ファイルであることを示します。

media="all" — この css ファイルはサイトを閲覧するすべてのデバイスで表示されます。

href="styles.css" — css ファイルへのパス。この場合は相対パスです。

css ファイルの接続方法がわかったようですね。では、html ファイルと同じフォルダーにこの styles.css ファイルを作成しましょう。

では、styles.css ファイルを開いて、そこに css スタイルを挿入します。

body{
  background: #eeeeee; /* ページの背景 */
  font-size: 14px;            /* フォントサイズ */
}
p{
  color: #ff0000; /* テキストの色 */
}

このファイルを保存して、ブラウザで html ファイルを開きます。これで CSS が別ファイル経由で正しくファイルに接続されました。次のレッスンでは、別ファイルでスタイルを書く方法を詳しく見ていきます。

パレット - カラフルに🎨

CSS チュートリアル — レッスン 1 — CSS スタイルを接続する

タグ内の CSS

HTML ドキュメントの先頭にある CSS

別ファイルの CSS

Let’s talk