簡単なWebページをつくってみる #2
夏間近なのに寒いですね（クーラーが）。
こんばんは、soraです。
この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第3回です。
今日は前回に引き続き、HTMLに加えてCSSの話をしていきたいと思います。
関連ブログ
- #1 webサイトをつくる準備・どうやってつくる？
- #2 HTML/CSSを書いてみる (この記事)
目次
HTML
前回も簡単にした通り、HTMLはWebページを記述するためのマークアップ言語です。主な役割として、文書内の構造や意味をタグを使って示します。前回書いたもので簡単に説明します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>header1</h1> <section> <h2>サブタイトル</h2> <p> 段落です段落段落 </p> </section> <div> <a href="http://circlesana.org" target="_blank">Sanaのホームページ <img src="img/blockun.png" alt="ブロックン"> </a> </div> </body> </html>
HTMLではタグを <> で囲んで表現し、タグは複数の属性を持つことができます。上の例でいくと、
タグ
html: この文書はHTMLh1: 一番大きい見出しsection: ページ内のひとつのセクション。通常見出しをつけることができるはず<h1>等p: 文書ないのひとつの段落a: リンクimg: 画像
属性
href: 具体的なリンク先alt: 代替テキスト。画像が表示できない場合などに表示される
といった具合です。こうして文章に意味を持たせながら内容を記述していきます。ただし、HTMLは意味づけをする言語なので、このままでは質素なページができあがって、普段見てるような鮮やかなページにはならないですね。そこでCSSの出番です。
どういった種類のタグがあるのかは、多すぎて紹介しきれないので、文末で他サイトのリンクを紹介します。
CSS
CSSとは
CSSは、Webページのレイアウトや色、見た目などのスタイルを設定するための言語です。習うより馴れろ戦法でとりあえず見てみます。こんな感じで書きます。
html { color: #333333; text-align: center; background-color: #eeeeee; }
CSSでは、スタイルを反映する場所（上の例だと htmlタグ）と、それに適用するプロパティ（color, background-color等）で構成されます。例では、htmlタグの中身に「文字の色を黒っぽくして、テキストは中央揃え、背景は薄いグレー」というスタイルを反映しろー と書いています。HTMLと同じく、プロパティには無数の種類があるので、文末でリンクを紹介したいと思います。
CSSを読み込む
さて、具体的にCSSを書くにはどうするのか、というところですが、通常HTMLとは別のファイルとして記述します。一般的には下の図のように、cssフォルダを作ってまとめていれておくことが多いと思います。とりあえずstyle.cssを作りました。
HTMLにこのCSSを読み込ませるには、headタグ内にlinkタグを書いて、linkタグのhref属性にCSSのファイルパスを指定してやります。さきほどのフォルダ構造だとこんな感じです。charset属性は想像がつくと思いますが、開くファイルの文字エンコードです。間違ったものを指定すると文字化けするかもしれないので正しいものを入れてください。
<head> <link rel="stylesheet" href="css/style.css" charset="utf-8"> </head>
思い通りにレイアウトする
さて、前節で気がついた方もいらっしゃるかもしれませんが、タグに対してしかスタイルを当てることができないと、思い通りのレイアウトはできませんよね。そこで使うのがclass属性です。
<a href="ttp://hogehoge" class="link"></a>
のように使います。このclass属性は、基本的にすべてのタグで使うことができます。通常CSSのスタイル反映にはこのclass属性で指定したものに対して反映します。
CSSでクラスを対象にするには、先頭に.をつけて、次のように記述します。
.link { color: #ff0000; }
これで、文書内でclass="link"をもったタグにだけ、color: #ff0000が反映されます。こうしてページ全体の複雑なレイアウトを組み立てて行きます。
実はタグやclass属性意外にも指定できる方法はたくさんありますが、ひとまずこれだけあれば大丈夫ですし、そもそもコードを複雑にしないためにも基本に沿って書くとよいと思います。
長くなってきたので今回はこのあたりで！
まとめ
リンク紹介
HTMLタグ
CSSプロパティ
