Web上で見るほとんどのページが、htmlとcssというもので作られている。 htmlはタグというコンピュータにとってわかりやすい目印のようなもので文章を構造化している。 cssはスタイルシートといって部品(タグ)をどういった形・色・大きさで表示させるかを決めている。 ここではhtml/cssの基本的な構造を説明する。
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コードを覗くことができるので参考にしても良いかもしれない。
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>表示例:
aaaaaaaaaaheadタグの中でよく使うものとしては、<title>がある。
これで囲まれた言葉が、ブラウザのウィンドウの縁またはタブ上に表示される。
拡張子が.cssのファイルをスタイルシートといって、 文字通りhtmlで書いたページのデザインを指定するためのファイルである。
タグに独自のデザインを適用したいときに使うことができる。 大まかな形式は以下のようになっている。
タグ名{
(デザイン設定)
}例えば、<p>タグ内の文字の色、大きさを設定する場合の例を下に書いた。
例：
p{
color: black;
font-size: 1.6rem;
}色については色の名前以外にも色コードが使える。 文字サイズなど、大きさに関する指定の仕方は複数ある。
スマートフォンなど、画面幅が異なる端末での表示を考えるなら、 相対的なサイズ指定のほうが良さそう。
また、同じタグでもデザインを変えたい場合の方法をまとめてみた。
一番簡単なのはclassを使う方法で、
htmlファイル側で<タグ名 class="クラス名">
として使いたいスタイルのクラスを指定する。
css側では、以下のように書く
タグ名.クラス名{
(デザイン設定)
}複数のタグで共有したい場合は以下のようにタグ名を外してもいい。
.クラス名{
(デザイン設定)
}ここで"."はクラスの親子(継承)関係を表していて、
クラス同士でも使える(その場合htmlファイル側では<タグ名 class="親クラス名 子クラス名">で指定)。
タグの親子関係等でスタイルの適応を条件づけできる。
タグa タグb(スペース): タグaの内側にタグbがある場合タグbに適応タグa>タグb: タグaのすぐ内側(他のタグも挟まずに)にタグbがある場合タグbに適応タグa,タグb: タグa, タグb両方に適応タグa:not(条件): (条件)でないときタグaに適応(条件にはここの他の項目を使える)タグa:has(タグb): タグaの内側にタグbがある場合タグaに適応