htmlとCSSについて

投稿テストついでに軽く復習を。

htmlとは「HyperText Markup Language」の略で、私の感覚的に言うと「ワープロ」の文章を分解してみた感じ。※ワープロがわからない人はお父さんやお母さんに聞いてみてね!

基本の形式は下記の通り。
これは20年前も今もまったく変わってないよ!

<html>
<head>
<title>上のタブ(バー)に表示されるページのタイトル</title>
</head>
<body>
ページの本文。ここがブラウザに表示されるよ!
</body>
</html>

表示する文章がどこに入っているかを明確にして、文章に当てはまる意味や装飾を「きまり」に則ってどんどん「タグ」で囲んでいく。つまりマークアップしていくだけ。

文章は「見出し<h1>~<h6>」と「文章<p>」があるので階層の違いを意識するとわかりやすい。
例えば、本を買うと、表示に本のタイトルが書いてあって、中を開くと内容のタイトルが書いてあって、大きく8つくらいの項目に分かれていて、その中に更に見出しがあって、その中で段落に分かれてる。

例えばたまたま手元にあった小学館の生活攻略本の中身をよりぬくと下記のようになる。

<h1>必ず身につく学習法</h1>
 <h2>第1章 できる子の1日、できない子の1日</h2>
  <p>それぞれの1日をくらべてみよう</p>
  <h3>朝の違い</h3>
   <p>
    できる子は自分ですっきり起きる。<br>
    できない子は起こされてもなかなか布団から出てこない。
   </p>
  <h3>昼の違い</h3>
   <p>
    学校での生活が書いてある
   </p>
  <h3>学校から帰ってきたら・・・</h3>
   <p>
    放課後のことが書いてある
   </p>
 <h2>第2章 できる子になってみたら・・・?!</h2>
 ・
 ・
 ・

よく<h1>は各ページに1つずつ、だが必ず1つは入れると書いてあるのを見る。
マークアップの基本が上記のようになっているから、h1というツリーの天辺がないと文章が広がっていかないのだ。

html5には<article>(記事)というタグが増えたので、ページの中に複数の記事がある場合、記事ごとに大見出し<h1>をつけても良いのでは、という方向に話が向かっているが、やはりページ単位でものを考える意識が強く残っているからなのか「h1はページ内にひとつ」という鉄則はまだまだ強いらしい。

意味だけを記述していくhtmlだけでは人間の視覚的に非常にわかりづらい、文章の中身が伝わってきにくいので、それを補完する役目を持つのがCSS。

htmlだけでページを作っていた昔はテキスト自身をフォント指定タグなどで囲って色や大きさを指定していたが、CSSが発展してより細かく、わかりやすくページをデザインしていくことが可能になった。

テキストの赤い部分赤くて太い部分
とhtmlで記述するとそれぞれ下記のようになる。

htmlのみ
テキストの<font color="red">赤い部分</font>、<font color="red"><b>赤くて太い部分</b></font>
html+CSS
CSS
.red{
 color: red;
}
.bold-red{
 color: red;
 font-weight: bold;
}
html
テキストの<span class="red">赤い部分</span>、<span class="bold-red">赤くて太い部分</span>

これによって、見出しだから太字、とか大見出しだから大きい文字、とかそういったことにとらわれず好きなデザインでマークアップすることができるようになった。とても便利!

CSSの進歩は目覚ましく、透明度を変えたり、アニメーションを付けたり、決まった語句の前に文字を入れたり、傾けてみたり、表示する順番が偶数か奇数かで違うデザインにしたり様々なことができるのでぜひ色々調べて挑戦してみてほしい。

以上で投稿のテストを終わりにする。
こんな長文書いておいて投稿できんかったら泣くしかない。


いままで出会った中で一番の写経本。
6ステップに分けて本に載っているソースコードを写していけばWebサイトが1個できちゃうので、実際にコードを書いてみてどういう風に表示されるかを確かめたいなら、この本のコードを写してページを作るのが早いと思う。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする