<< 2013年04月 | TOP | 2013年06月 >>

2013年05月07日

DIV要素 HTML

スポンサード　リンク

 DIV要素 blockボックス
<div 属性="値">内容</div>

DIV要素は汎用的なブロックレベル要素で、表示領域の左右いっぱいまでの範囲を取り、
前後に改行が入り、矩形(四角形)で表示されます。
<div>〜</div>自身は、なにか ※ 役割を持っているわけではなく
ブロックレベルで他の要素をグループ化し、多くの場合、id属性やclass属性を使用して
装飾やレイアウトに、CSSによるスタイルを適用するため
またlang属性（xml:lang属性）で言語コードを指定するために用います。
ブロック要素、インライン要素、インラインブロック(置換インライン)要素、テキストが内包可能です。
この要素は、他に適切な要素がない場合に使用しょう。
　※たとえば<Hn>は"見出し"、<P>は"段落"、 <UL>は"箇条書き"、という文章上の役割を持っている。

また JavaScriptで、指定したブロック（スクリプトで利用するための参照先）に
アクセスする場合に利用します。

同じような要素にSPAN要素がありますが、
これはインラインレベル要素（前後に改行が入らない要素）のグループ化に用います。

共通属性
id="ID名"｜class="クラス名"｜style="インラインスタイル"
title="補足情報"｜lang / xml:lang="言語コード"
イベント属性
onclick, ondblclick｜onmousedown, onmousemove, onmouseup
onmouseover, onmouseout｜onkeyup, onkeydown, onkeypress

ロリポップ！なら月々１０５円から
WordPressなどの簡単インストールやカート機能、
アクセス解析、ウェブメーラーも標準装備！
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

 DIV要素の使い方　サンプル

ID属性でスタイルを適用する。
CSS
#smpDiv1{
  text-align : center; /*水平位置揃え*/
  background-color :ivory;
  padding: 10px;
  width:450px;
  border:1px solid hotpink;
    }
HTML
<div id="smpDiv1">
  <p>div要素のalign属性はHTML5では,廃止されました。</p>
  <p>内容の位置揃えの指定は<br />
    CSS（text-alignプロパティ）を使用します。</p>
</div>
表示例

div要素のalign属性はHTML5では、廃止されました。

内容の位置揃えの指定は
CSS（text-alignプロパティ）を使用します。

CLASS属性でスタイルを適用する。
CSS
 .smpDiv2 {
      background-color: #e0ffff;
      border: 1px solid #a0a0a0;
       }
HTML
<h2>JavaScript</h2> <!--見出し-->
<div class="smpDiv2">
  <ul> <!--箇条書き,リスト-->
    <li>配列</li>
    <li>構文</li>
    <li>ＤＯＭ</li>
  </ul>
</div>
 <h2>CSS</h2>
 <div class="smpDiv2">
   <ul>
    <li>セレクタ</li>
    <li>プロパティ</li>
   </ul>
</div>
表示例

JavaScript

  • 配列
  • 構文
  • ＤＯＭ

CSS

  • セレクタ
  • プロパティ
JavaScriptで 指定したDIV要素を 表示/非表示。（トグルスイッチ）
HTML
<div>
 <a href="javascript:void(0)" onclick="elm=document.getElementById('toggle');
  elm.style.display=(elm.style.display == 'none')?'block':'none'"
    title="クリックするたびに表示/非表示を、繰り返します。">
  指定したDIV要素の表示/非表示</a>
</div>
<div id="toggle" style="display:none">
  <img src="画像URL" />
</div>
表示例
指定したDIV要素の表示/非表示
タグ：div SPAN ブロックレベル要素 CSS
posted by javaScript at 17:25 | 大阪 ☀ | HTML タグ　要素 | このブログの読者になる | 更新情報をチェックする

2013年05月03日

タブメニュー

スポンサード　リンク

 JavaScriptとCSSでタブメニュー
display = 'block'; display = 'none';

// HTMLタブの内容。
<ul id="tabList">
 <li id="tabList1">HTML</li>
 <li id="tabList2">CSS</li>
 <li id="tabList3">JavaScript</a></li>
</ul>
// CSSタブの内容
floatプロパティ float:left;
指定した要素を左に配置して、それに続く内容を
右側に回り込ませます。
疑似クラス a:hover
アンカーテキストにマウスが来たときに
アンカーのスタイルを変更する という動作を、JavaScriptを利用しなくても
スタイルシートだけで実行する事が出来ます。
display プロパティ
display プロパティは表示の仕方を指定する
プロパティです。このサンプルでも使っています。
// JavaScriptタブの内容。
function cngTab(IDname) {
 var inNer=document.getElementById('inner');
 var inDiv=inNer.getElementsByTagName('div');
for (var i = 0; i < inDiv.length;i++) {
 inDiv[i].style.display = 'none'; }
document.getElementById(IDname).style.display = 'block';  }

ロリポップ！のドメインは選べる全８５種類！！
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

サンプルソース

<html>
 <head>
<title>タブメニュー</title>
 <style type="text/css">
<!--
     /* タブメニュー表示領域 */
.tabbox {
  width: 400px;
   }

     /* タブ部分 */
#tabList {
 list-style-type:none;/* リストマーク非表示 */
 margin: 0; padding: 0;/* マージン,パディング初期化 */
  }
#tabList li{
 float: left;  /* 回り込み */
 margin-right:1px; /* 右側のマージン */
 border-radius: 10px 10px 0 0; /* 角丸 (右上、左上) */
 text-shadow:2px 2px 2px #000; /*影文字(縦方向ずれ、横方向ずれ、ぼかし半径、影の色)*/
   }
#tabList li a {
   display: block; /* ブロックレベル表示 */
   width: 100px;
   padding: 3px; /* 内側余白 */
   text-align: center;/* 文字 中央揃え */
   text-decoration : none; /* 文字飾り(下線、上線、取消線)なし */
   font-weight : bold; /* フォントの太さ bold(太い) */
   color: white; /* 文字の色 */
     }
#tabList li a:hover { /*マウスポインタが乗った時*/
   color: yellow;
   text-decoration : underline; /*文字飾り,下線付加*/
    }

     /*タブの背景色 */
#tabList1 { background-color: blue; }
#tabList2 { background-color: #00b51e;}
#tabList3 { background-color: #cc0099; }

     /* タブ内容の表示ボックス */
#inner div {
 height: 150px; overflow: auto; /* 内容が溢れたらスクロールバー 表示 */
 clear: left; /* 回りこみ解除 */
 padding:0.5em;
 border-radius: 0 0 5px 5px; /* 角丸 (右下、左下) */
   }

/* タブ内容 */
#tab1 {
   border: 2px solid blue; /* ボーダー : 幅,線種,色 */
   border-top-width : 5px; /* 上ボーダー : 幅 */
   background-color: #f0ffff; /* 背景色 */
    }
#tab2 {
   border: 2px solid #00b51e;
   border-top-width : 5px;
   background-color : #e8ffd9;
    }
#tab3 {
   border: 2px solid #cc0099;
   border-top-width : 5px;
   background-color : #ffeeff;
    }
-->
</style>
<script type="text/javascript">
 <!--
function cngTab(IDname) {
      // 全部非表示 ボックス非生成(当該要素の領域を確保しない)
  var inNer = document.getElementById('inner');
  var inDiv = inNer.getElementsByTagName('div');
   for (var i = 0; i < inDiv.length;i++) {
    inDiv[i].style.display = 'none';
　      }
     // 引数 'IDname'の要素を表示(当該要素の領域を確保)
    document.getElementById(IDname).style.display = 'block';
      }
 // -->
</script>
</head>
<body>
   <div class="tabbox">
     <ul id="tabList"><!--UL要素 リスト、箇条書き-->
      <li id="tabList1"><a href="javascript:cngTab('tab1')">HTML</a></li>
      <li id="tabList2"><a href="javascript:cngTab('tab2')">CSS</a></li>
      <li id="tabList3"><a href="javascript:cngTab('tab3')">JavaScript</a></li>
     </ul>
　　<div id="inner">
     <div id="tab1">// HTMLタブの内容。
　　　</div>
    <div id="tab2">// CSSタブの内容
      </div>
    <div id="tab3">// JavaScriptタブの内容。
      </div>
   </div>
 </div>
<script type="text/javascript">
<!--
cngTab("tab1");// デフォルトのタブを選択 
 -->
</script>
</body>
</html>
display プロパティ
display プロパティは当該要素の表示形式を指定します。
HTML 内容
CSS 内容
JavaScript 内容

上記のボタンを押してください。それぞれのボタンで、
その内容の表示(display:block) / 非表示(display:none)を切り替えています。
display:none;を指定すると当該要素は領域そのものを生成しないので非表示になります。

上のサンプルで、すべての内容を表示にしてHTML 内容を非表示にしてください。
下の内容がせり上がります。これで "当該要素の領域も確保しない"ことが判ります。
display:block;はブロックレベルで表示します。

JavaScript 構文:
object.style.display='block';
object.style.display='none';
タグ：display: block; display: none;
posted by javaScript at 20:06 | 大阪 ☀ | メニュー作成 | このブログの読者になる | 更新情報をチェックする
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。