html/cssの基本

On this page

htmlの雛形

htmlは<>で囲まれたタグというものを使ってページを作っていく。 タグは例外を除いて<タグの名前>で始まり</タグの名前>で終わる。 <!--と-->で囲むとコメントになりhtmlファイルをブラウザ(ChromeとかSafariとか)で表示する際は無視される。 実際はもっと、中に色々書くことになると思うが、大筋は以下のようになる。

<!DOCTYPE html>
<html xml:lang="ja" lang="ja"> <!--日本語ページの場合-->
<head>
  <!--ページの説明(titleなど)-->
</head>
<body>
  <!--ページの内容-->
</body>
</html>

これを見ても分かる通り、タグの中にはタグの名前以外にも、"属性"(この例では2行目のxml:lang="ja"とlang="ja")を指定できる。

因みにChromeはmacだとoption+command+I、 WindowsだとShift+Ctrl+Iで表示しているページのhtmlコードを覗くことができるので参考にしても良いかもしれない。

▲ ページトップに戻る

htmlのタグ

bodyタグの中でよく使うものとしては上記以外では、hとpがある。 hは見出しのためのタグで、h1 ~ h6まであり数字が小さいほど大きな見出しになる。

例:

<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>

表示例:

見出し

見出し

見出し

見出し

見出し
見出し

次にpは段落(文章)のためのタグで<p>で囲まれた文は一つの段落になる。
</タグの名前>が必要ないタグとして、 <br>と<hr>がある、これらはそれぞれ改行、区切り線を意味している。

例:

aaaaaaaaaa<br>bbbbbbbbbb
<hr>

表示例:

aaaaaaaaaa
bbbbbbbbbb

headタグの中でよく使うものとしては、<title>がある。
これで囲まれた言葉が、ブラウザのウィンドウの縁またはタブ上に表示される。

▲ ページトップに戻る

cssの書き方

拡張子が.cssのファイルをスタイルシートといって、 文字通りhtmlで書いたページのデザインを指定するためのファイルである。

タグに独自のデザインを適用したいときに使うことができる。 大まかな形式は以下のようになっている。

タグ名{
  (デザイン設定)
}

例えば、<p>タグ内の文字の色、大きさを設定する場合の例を下に書いた。

例：

p{
  color: black;
  font-size: 1.6rem;
}

色については色の名前以外にも色コードが使える。 文字サイズなど、大きさに関する指定の仕方は複数ある。

  • px: よく使われる単位
  • %: 親要素(外側にあるタグ)の大きさを100%とした場合の相対値
  • em: 親要素の文字サイズからの相対値
  • rem: ルート要素(一番外側の要素→普通はhtmlタグ)の文字サイズからの相対値

スマートフォンなど、画面幅が異なる端末での表示を考えるなら、 相対的なサイズ指定のほうが良さそう。

また、同じタグでもデザインを変えたい場合の方法をまとめてみた。

classを使う場合

一番簡単なのはclassを使う方法で、 htmlファイル側で<タグ名 class="クラス名"> として使いたいスタイルのクラスを指定する。

css側では、以下のように書く

タグ名.クラス名{
  (デザイン設定)
}

複数のタグで共有したい場合は以下のようにタグ名を外してもいい。

.クラス名{
  (デザイン設定)
}

ここで"."はクラスの親子(継承)関係を表していて、 クラス同士でも使える(その場合htmlファイル側では<タグ名 class="親クラス名 子クラス名">で指定)。

条件指定

タグの親子関係等でスタイルの適応を条件づけできる。

  1. タグa タグb(スペース): タグaの内側にタグbがある場合タグbに適応
  2. タグa>タグb: タグaのすぐ内側(他のタグも挟まずに)にタグbがある場合タグbに適応
  3. タグa,タグb: タグa, タグb両方に適応
  4. タグa:not(条件): (条件)でないときタグaに適応(条件にはここの他の項目を使える)
  5. タグa:has(タグb): タグaの内側にタグbがある場合タグaに適応
▲ ページトップに戻る