divについて

質問させてください。

<div id="header"> <div class="inner">←これは、何の為にあるんでしょうか? また、<ul class="global_nav">や<ul class="utility_nav">は何の為に挿入するのでしょうか?教えてください。

行動規範の内容に同意します

回答3件

id="○○○"
class="○○○"

はHTMLタグに付与できる「属性」と呼ばれるものです。
※付与できる属性はHTMLタグごとにたくさんあるので、説明は省きます。

id属性やclass属性は主にCSSやJavaScriptで使用する時に使われます。

"" 内に入れる単語は記述ルールがありますが、
基本的に好きな単語を入れる事が出来ます。
詳しくは下記リンク参照。

HTMLタグ/共通属性/要素にクラス名を付ける - TAG index Webサイト
 HTMLタグ/共通属性/要素にIDを付ける - TAG index Webサイト

今回の質問で出てきた

「header」
「inner」
「global_nav」
「utility_nav」

といった名前はそのHTMLを書いた人が勝手につけた名前で
id,class名は命名しただけでは特に何の意味もありません。

ここから、CSSやJavaScriptを別で書いて初めて意味が出てきます。
例えば、、、、

lang
1<div id="header">
2  <div class="inner">サンプルテキストが入ります。</div>
3</div>

とHTMLを記述して

lang
1#header{
2  color:red;
3}
4
5#header .inner{
6  text-align:center;
7}
8

とCSSを記述すれば、

「サンプルテキストが入ります。」

という文字がブラウザ上で赤色で中央寄せに表示されるので、ここで初めて

id="header"
class="inner"

が何の為にあるか？
という理由が出てきます。

投稿2015/03/07 14:55

退会済みユーザー

総合スコア0

GundamMeistar

2015/03/07 14:58

ありがとうございます。頑張ってみます。

行動規範の内容に同意します

確かにこれだけじゃ用途がいまひとつ特定できないですね。
headerに配置するナビゲーション全体の横幅を指定しておきたいけど、
そのheaderのwidthは100％にして背景を敷くための親要素として使い、
横幅数値を固定したinnerの中にナビゲーションボタンが並ぶようにする･･･といった想像が浮かびます。

innerとしてあるからといって用途はこれに限りませんので、何かdivを分けて処理したいものがあったのかなと。

投稿2015/03/07 14:31

EAGLE

総合スコア7

GundamMeistar

2015/03/07 14:32

<!doctype html> <HTML> <HEAD> <META CHARSET="utf-8"> <title>Nコーヒー</title> <STYLE> BODY {BACKGROUND:RED;} </STYLE> </head> <BODY> <DIV ID="HEADER"> <DIV CLASS="INNER"> <H1>Nコーヒー</H1> <UL> <LI>ホーム</li> <li>Nコーヒーについて</li> <li>メニュー</li> <li>ブログ</li> </ul> <ul> <li>お問い合わせ</li> <li>サイトマップ</li> </ul> </div> <DIV ID="CONTENT"> <DIV CLASS="INNER"> <h2>トピックス</h2> <dl> <dt>2015年02月09日</dt> <dd>限定でケニアが入荷しました。深煎りで提供します。</dd> </dl> <dl> <dt>2015年02月08日</dt> <dd>アルバイト募集中です。</dd> </dl> <dl> <dt>2015年02月07日</dt> <dd>コーヒー教室、ハンドドリップ編を5月7日に開催します。</dd> </dl> <dl> <dt>2015年02月06日</dt> <dd>ギャラリーで田中ジローさんの貼り絵展が開催されています。</dd> </dl> <h2>インフォメーション</h2> <p>Open 11：00〜22：00（LO 21：30)<br> Close 木曜日</p> </div> <div id="footer"> <div class="inner"> <P>Copyright (C) 2015 Ncoffee. All Rights Reserved.</p> </div> </body> </html>

EAGLE

2015/03/07 14:51

このソースだけを見ると、divでidが振られたheaderとcontentとfooterはdivが</div>で閉じられていないので、記述としてまずおかしいです･･･。それぞれのinnerの親に当たりますので、3つ別々にデザインを変えるといったことをやりたかったのかな、と推測します。＞div id と div styleの違い span classとspan styleの違い HTMLに関する書籍や検索で調べるのが一番なのですが、使用する際の簡単な決まりごととして、「id」に振るものは1ページ内で一度しか使えません。 span classでは、予め用意したCSSで例えば「.hoge」というものがあれば、その中に設定してある内容を下記の「テスト」の文字に反映できたりします。 /* CSS */ .hoge{ color:#FFF; } /* HTML*/ <span class="hoge">テスト</span> 「span style=""」というHTMLは、CSS記述を「""」に直接書いちゃおうというものですね。CSSは基本的に分けた方が表現の幅は広がりますのでオススメはしません。

行動規範の内容に同意します

<div class="inner">

ができることは、これに対応する </div>までを、１つのブロック
としてまとめることです。

１つにまとめることで、このブロックに対して css や JavaScript
を一括して適用できるようになります。何を適用するかで、この div
の効果が変わってきますので、『何の為にあるのか』は、この適用
したい内容次第となります。

<ul class="global_nav">

も同様に、これだけは何をしたいかはわかりません。
ul でまとめる意味があるからまとめている、ということだと思います。

投稿2015/03/07 14:21

hotta

総合スコア1613

GundamMeistar

2015/03/07 14:40

ありがとうございます。あと、質問したいのですが、div id と div styleの違い span classとspan styleの違いを教えてください。例文があれば幸いです。

hotta

2015/03/07 15:01

div style というキーワードが出てきているので、スタイルシートに関する質問だとみなして回答します。 # 質問のタグは "div" ではなく "css" とすべきかと思います。 div style="..." は、スタイルの中身をそのまま書く方式です。たとえば div style="text-align:right" なら、その視覚効果は「その div 範囲については、テキストを右づめ」です。一方、div class ... とか div id ... は、その div ブロックに名前をつけるだけです。つけられた名前に対して何をするかは別のところ（通常は別ファイルにした *.css の中）で指定します。なので、視覚効果として何が起こるかは、 *.css ファイルの中を見ないとわかりません。 span style と span class/id の関係についても同様です。 span 範囲に直接視覚効果を指定するか、いったん名前をつけて、別のところで指定するか、です。

行動規範の内容に同意します

あなたの回答