[7]<div>や<span>で特定の範囲を指定しよう

使用する要素 <div> 〜 </div>
<span> 〜 </span>

div要素はブロックレベル要素

ブロックレベル要素とは、呼び名のとおり「ブロック(かたまり or 箱)」になる要素です。
これまでに出てきた「h1〜h6」「p」もブロックレベル要素です。
自然に前後が改行されて、ブロックになります。

そのほかのブロックレベル要素 address blockquote dl fieldset
form ol pre table ulなど

<div>要素のdivは「division」の略で「分割」「区分」の意味です。

<div>要素は、ブロックレベル要素である事を示す以外は、特にHTML上の意味は持っていません。
他のHTML要素で示す事の出来ない範囲の指定などに使います。
具体的には、画面全体を囲んでセンター合わせにするとか、メイン画面にドロップシャドウを付けるとか、デザイン面でよく使います。

span要素はインライン要素

インライン要素とは、呼び名のとおり文章の一部分の範囲を示します。
これまでに出てきたものでは「br」がインライン要素です。
前後が改行されることはなく、ブロックにはなりません。

そのほかのインライン要素 a abbr iframe img input
label strongなど

spanは「期間」「範囲」の意味。「短いスパンで」とか「ワイドスパンのバルコニー」なんて言って使う、あのスパンです。

<span>要素も、インライン要素である事を示す以外は、特にHTML上の意味はありません。
文中の特定のテキストだけ色や書体を変えたいなど時に使います。

div要素とspan要素を使ってCSSを指定してみよう

前回最後に保存したファイルに、下記のように<div>要素と<span>要素を書き加えてみましょう。

<!DOCTYPE html>
<html>
<head>
〜省略〜
<style>
p {
color: #666666;
width: 500px;
}
</style>
</head>
<body>
<div>
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、<span>木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在</span>していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。
</p>
(島崎藤村「夜明け前」序の章より)
</div>
</body>
</html>

div要素はbody要素の中身全部を指定しています。
<div>を<body>のすぐ後に、</div>を</body>の直前に入れていますね。
また、span要素は文章の1部分だけを囲んでいますね。

では、これからCSSの指定をします。
下記のように<div>要素と<span>要素に対するCSSの指定を書いてみます。
ついでに<h1>要素にも色やフォントサイズの指定をしてみましょう。

<!DOCTYPE html>
<html>
<head>
〜省略〜
<style>
div {
color: #666666;
width: 500px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
span {
color:#009900;
}
h1 {
color:#660000;
font-size:30px;
}
</style>
</head>
<body>
<div>
<h1>段落を作ってみよう</h1>
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、<span>木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在</span>していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。
</p>
(島崎藤村「夜明け前」序の章より)
</div>
</body>
</html>

何度も言うようですが、今は、HTML文書内の<head>の中にCSSを書く方法を使っていますが、
CSSはHTML内に書かずに「独立した外部CSSファイル」にしてHTMLに読み込ませる方法のほうがぜったい便利です。
独立したCSSファイル(外部CSSファイル)の詳細は 「CSSレイアウトメモ:本文2段組 [1] 」をご覧ください。
今はまだHTMLを覚える方が先決ですが、そのうちCSSを使うときに、この外部ファイルを読み込む方法は必須なので、 HTML内に書く方法が当たり前だと思わないようにお願いします。くれぐれも。

では、さっきのファイルを保存してブラウザでプレビューしてみましょう。

p要素で段落を指定

だいぶ変わりましたね。
これまで左寄せだった文章がセンター合わせになりました。
これは、div要素に指定した margin-right:auto; margin-left:auto; によります。
div要素の左右のマージンをオート(自動)にすると、ブラウザはセンター合わせだと理解します。

CSSの「センター合わせ」などについては 「CSSレイアウトメモ:TIPS [センター合わせ・左合わせ・リキッドレイアウト] 」をご覧ください。

また、span要素に指定した color:#009900; は文字色を#009900にするという意味で、#009900は緑色です。
Web上の「色指定」に関しては、こちらを参考にしてください。
●[14-4] 色指定について(16進数、色名、10進数、パーセント)
●CSSレイアウトメモ:TIPS「色の指定」

h1要素には文字の色を #660000(赤茶色)にして、サイズを30ピクセルにするよう指定しています。

さて、ここまで来たら、そろそろ画像を貼ったりリンクをしたりする要素を 使っていきたいところですが、その前に、HTML文書を書くときに便利な「コメント」があります。
これは、ブラウザでプレビューされないメモ書きのようなモノです。
次回はこの「コメント」を取り上げます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.