前回の続きです。
遅れてしまってすみません
さて前回はCSSとHTMLをリンクさせ、CSSで<body>にオレンジにしました。
<body>にオレンジ色を適応するということはブラウザ全体をオレンジに変えるということですね
今回はHTMLを使用して文章を作成
CSSを使用して文字などのデザインの作成をします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>タイトルです。</title>
</head>
<body>
<h1>株式会社ブックスターへようこそ。</h1>
<p>株式会社ブックスターへようこそ、100万点以上の本を扱っております。
高価買取しております！</p>
<ul>
<li>ホーム</li>
<li>会社情報</li>
<li>IR情報</li>
<li>採用情報</li>
<li>サポート</li>
</ul>
<p>Copyright(C) 2010-2014 株式会社ブックスター All Rights Reserved.</p>
</body>
</html>
index.htmlに書いた今までのコードを全て消して
上記のコードをコピペしindex.htmlにコピペしてください
そして上書き保存をしてブラウザで確認してください
すると画像のようになりました。
まずはここまでを解説します。
解説
<h1>～</h1>
これは一番大きな見出しを表しています。
<h1>以外のも<h2>～<h6>までありますが、数字が小さくなる度に重要度ランクが下がっていきます。
<h1>は1ページに一つが推奨されており<body>直下などに書くのがオススメです。
<h1>はアクセスアップにも繋がる重要なタグです
<p>～</p>
これは文章や段落を意味しています。
<p>～</p>はブロック要素といい、ブロック要素の前後は改行されます。
<ul>～</ul>
<ul>は次に説明する<li>を囲むものであり、リストであることを意味しています。
<li>～</li>
こちらはリストの項目になります。<ul>か<ol>の中に入る要素です。
ちなみに<ul>～</ul>の中に囲まれたら画像のようになりますが
<ol>～</ol>の中に囲まれたら下記の画像のようになります
次にコンテンツと背景を分けます
先ほどのindex.htmlに
<div id="container">～</div>を挟みます。
<body>
<div id="container">
<h1>株式会社ブックスターへようこそ。</h1>
<p>株式会社ブックスターへようこそ、100万点以上の本を扱っております。
高価買取しております！</p>
<ul>
<li>ホーム</li>
<li>会社情報</li>
<li>IR情報</li>
<li>採用情報</li>
<li>サポート</li>
</ul>
<p>Copyright(C) 2010-2014 株式会社ブックスター All Rights Reserved.</p>
</div>
</body>
こう挟みました。
ではこれらの解説を始めます。
<div id="container">～</div>
divはグループを意味します。divは先ほどのpと同じブロック要素です。
id="名前をつけれる"は属性といいます。
例えばCSSで p{ color:white;}としてしまうと全ての文章が白色になってしまいます。
しかしpにid属性を入れて名前をつけると他のpと分けて色を変えることができます。
今回はdivでグループ化をしましたがdivは非常に多様させる為、divにid名をつけ、id="container"にしました。
さて、それではindex.htmlを保存して最後にCSSをいじります
CSSには下記のコードを追加しましょう
@charset "utf-8";
body{
background-color:orange;
}
#container{
background-color:white;
width:980px;
margin:0 auto;
}
これを保存してindex.htmlをブラウザで開くと
すると画像のようにコンテンツと背景でわかれました。
ではこちらの解説です。
前回もいいましたがCSSは
指定するHTML｛何を：どうする；｝
このルールになっています。
今回であれば追加した文を日本語に直すと
id名container｛背景を：白色にする；
横幅を：980pxにする；
マージンを:0 autoにする;
}
という形になっています。必ず一つの指定の終わりには；（セミコロン）をつけて続きを書いてください
指定するHTML｛何を：どうする；
何を：どうする；
何を：どうする；
}
って感じにですね。
今回はここで切らせていただきます。
#container{
background-color:white;
width:980px;
margin:0 auto;
}
の詳しい解説は次回説明します。