DIV
DIV要素は division(区分)の略で、あらかじめ決められた役割や意味を持たない要素です。
他に適切な要素がないような場合に利用し、文章を分割します。
多くのブラウザでは、前後に改行が挿入されて表示され、スタイルシートやJavaScriptを適用する対象ブロックとしてよく利用されます。
同様なタグに SPAN要素 がありますが、DIV要素 はブロック要素(一般的に前後に改行がはいる様な要素)として、SPAN要素 はインライン要素(一般的に前後に改行が入らない要素)として定義されています。
カテゴリー
フローコンテンツ
パルパブルコンテンツ
DIV属性
固有の属性はありません。
DIV使用例
DIV要素(右、左に分けて表示する例)
[html highlight=”20,29,30,32″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript | tech.pjin.jp</title>
</head>
<body>
<header class="page-header">
<h1>Javascript</h1>
<p>初心者から始める、簡単なプログラム言語</p>
</header>
<main class="art-container">
<article id="A112-009">
<header class="art-header">
<h2>if文</h2>
<p>簡単な条件分岐</p>
</header>
<section>
<div class="left">
<pre><code>
var a = 3;
if(a == 10){
console.log(‘a is 10.’);
}else{
console.log(‘a is not 10.’);
}
</code></pre>
</div>
<div class="right">
<p>左の実行結果を予想してください。</p>
</div>
</section>
</article>
</main>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript | tech.pjin.jp</title>
</head>
<body>
<header class="page-header">
<h1>Javascript</h1>
<p>初心者から始める、簡単なプログラム言語</p>
</header>
<main class="art-container">
<article id="A112-009">
<header class="art-header">
<h2>if文</h2>
<p>簡単な条件分岐</p>
</header>
<section>
<div class="left">
<pre><code>
var a = 3;
if(a == 10){
console.log(‘a is 10.’);
}else{
console.log(‘a is not 10.’);
}
</code></pre>
</div>
<div class="right">
<p>左の実行結果を予想してください。</p>
</div>
</section>
</article>
</main>
</body>
</html>
[/html]
DIV要素(３列表示する例)
[html highlight=”20,29,30,32,33,36″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP | tech.pjin.jp</title>
</head>
<body>
<header class="page-header">
<h1>PHP</h1>
<p>初心者から始める、簡単なプログラム言語</p>
</header>
<main class="art-container">
<article id="A210-017">
<header class="art-header">
<h2>if文</h2>
<p>簡単な条件分岐</p>
</header>
<section>
<div class="left">
<pre><code>
$a = 3;
if($a == 10){
print ‘a is 10.’;
}else{
print ‘a is not 10.’;
}
</code></pre>
</div>
<div class="center">
<p>左の実行結果を予想してください。</p>
</div>
<div class="right">
<p>みんなのコメント</p>
<p>Javascriptと同じ。見るのは簡単だが、いざ書くのは難しいかも</p>
</div>
</section>
</article>
</main>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP | tech.pjin.jp</title>
</head>
<body>
<header class="page-header">
<h1>PHP</h1>
<p>初心者から始める、簡単なプログラム言語</p>
</header>
<main class="art-container">
<article id="A210-017">
<header class="art-header">
<h2>if文</h2>
<p>簡単な条件分岐</p>
</header>
<section>
<div class="left">
<pre><code>
$a = 3;
if($a == 10){
print ‘a is 10.’;
}else{
print ‘a is not 10.’;
}
</code></pre>
</div>
<div class="center">
<p>左の実行結果を予想してください。</p>
</div>
<div class="right">
<p>みんなのコメント</p>
<p>Javascriptと同じ。見るのは簡単だが、いざ書くのは難しいかも</p>
</div>
</section>
</article>
</main>
</body>
</html>
[/html]
