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

最終更新日:2017年09月14日  (初回投稿日:2010年10月20日)

今回は、<div>要素と <span>要素を使ってみましょう。

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

div要素はブロックレベル

ブロックレベルとはスタイル上での分類で、呼び名のとおり 前後が自動的に改行されて「ブロック」としてブラウザで表示されます。
これまでに出てきた <h1> 〜 <h6> や <p> もブロックレベルの要素です。

「div」は「division(ディビジョン)」の略で「分割」といった意味です。

そのほかのブロックレベルの要素 p li form pre nav
article aside sectionなど

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

span要素はインライン

インラインも スタイル上での分類で、前後が改行されることはなくブロックにはなりません。

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

そのほかのインラインの要素 a ins del b img 
input label strongなど

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

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

前回の [6] 段落<p>を使おう(ついでにCSSで整えてみよう)で最後に保存したファイルに、下記のように <div>要素と <span>要素を書き加えてみましょう。

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

前回も言いましたが、CSS は HTML内に書かずに「独立した外部CSSファイル」にして HTMLに読み込ませる方法のほうが便利すし、一般的です。
ここでは簡単に説明するために HTMLファイル内に書く方法でやってます。

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

だいぶ変わりましたね。
これまで左に寄っていたブロックが、ブラウザウィンドウのセンターになりました。
これは、<div>要素に「margin-right:auto; margin-left:auto」を指定したから。
左右のマージンを auto(自動)にすると、センター合わせになります。

また、<span>要素や <h1>要素も、文字色などを変えたので、よりはっきり本文との区別がつくようになりました。

次回予告

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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 31 - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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