<< 2013年10月 | TOP | 2013年12月 >>
- 1 2 3 4 >>

2013年11月29日

display:inline-block; CSS

スポンサード　リンク

 display: inline-block; で指定要素を横並びにする
要素はブロック・ボックスを生成し、インライン・ボックスとしてレイアウトされる

  • HTML
  • CSS
  • JavaScript
スタイルを適用する前の、箇条書き リスト <ul> <li>要素
  • HTML
  • CSS
  • JavaScript

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

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display: inline-block;</title>
 <style type="text/css">
<!--
ul.inlineBlock li{
   display:inline-block;/* インラインブロック表示 */
   list-style: none; /* リストマーク非表示 */
   text-align: center; /* 文字 中央揃え */
   border: 1px solid green; /* ボーダー : 幅,線種,色 */
   background-color: #90ee90; /* 背景色 */
   padding: 2px 10px; /* 内側余白 上下,左右 */
   width: 100px; /* 横幅 */
    }
-->
</style>
</head>
  <body>
   <!--UL LI要素 リスト、箇条書き-->
  <ul class="inlineBlock">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ul>
</body>
</html>
display:inline-block

要素はインライン・ボックスとしてレイアウトされるブロック・ボックスを生成、
width, height, margin, padding の指定が可能になります。
つまりinline上に配置されたblock要素ということになります。

display: inline-block;と inline;の違い
display:inline-block;
  • HTML
  • CSS
  • JavaScript
display:inline;
  • HTML
  • CSS
  • JavaScript
display:block で表示
  • HTML
  • CSS
  • JavaScript
上記の水平リスト（UL LI要素）はdisplayの値にそれぞれinline-block;と inline; を指定、それ以外は
width:100px; height:50px; margin:10px; padding: 5px 10px;と同じプロパティ値を
設定しています！！　共にインラインレベルで表示されています。
inline-block;は width, height, margin, padding, すべて有効ですが
inline;は width, height, 上下margin,が効いていません。
- inline-block  inline 
width ○ ×
height ○ ×
上下margin ○ ×
左右margin ○ ○
padding ○ ○
display:inline-block をSPAN要素に指定
CSS
#sPn span{
 display: inline-block;
  text-align: center; 
  border: 1px solid green;
  background-color: lightyellow;
  width: 1.5em;
  line-height: 1.5em;
    }
HTML
<div id="sPn">
  <span>1</span>
  <span>2</span>
       ...
  <span>14</span>
  <span>15</span>
</div>
表示例
1 2 3 4 5 10 11 12 13 14 15
タグ：inline-block INLINE
posted by javaScript at 23:58 | 大阪 ☔ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2013年11月26日

contenteditable属性 要素内容の編集の可否、HTML5

スポンサード　リンク

 contenteditable="true"
指定した要素のコンテンツを編集可能にします。HTML5の全ての要素に指定可能

div 要素

このdiv要素のテキストは編集可能になっています。contenteditable="true"
下の画像もドラッグして、移動したり、コピペ, 消去することができます。

li 要素

  • contenteditable 属性
  •  

dd 要素

開会日時
皇紀 2680年 7月24日20時〜23時
メイン会場
東京都新宿区 新国立競技場

WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
コロリポプラン　詳細はこちら

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>contenteditable属性</title>
<style type="text/css">
<!--
:hover[contenteditable="true"]{
  color:#cc0033;
   }
.editbox{
  margin:5px;
  padding:5px;padding-left:10px;
  border:1px gray solid;
  border-left: 4px solid gray;
  background:#f5f5f5;
  min-height:1em;
   }
.editbox p{
  margin:0;
   }
.editUL li{
  list-style-type:none;
   }
-->
</style>
</head>
<body>
 <p>div 要素</p>
  <div class="editbox" contenteditable="true">
   <div>このdiv要素のテキストは編集可能になっています。contenteditable="true"<br />
   下の画像もドラッグして、移動したり、コピペ,消去することができます。
     <br />
<img src="image/hana.gif" alt="">
<img src="/image/wanwan.gif" alt="">
<img src="/image/raketto.gif" alt="">
  </div>
 </div>
<p>li 要素</p>
 <ul class="editUL">
  <li><div class="editbox" contenteditable="true">contenteditable 属性</div></li>
  <li><div class="editbox" contenteditable="true">&nbsp;</div></li>
 </ul>
<p>dd 要素</p>
 <dl>
  <dt>開会日時</dt>
<dd class="editbox"><div contenteditable="true">皇紀 2680年 7月24日20時〜23時</div></dd>
  <dt>メイン会場</dt>
<dd class="editbox"><div contenteditable="true">東京都新宿区 新国立競技場</div></dd>
</dl>
<p><button onclick="history.go(0)">元に戻す</button></p>
</body>
</html>

contenteditable="値"
true
該当要素を編集可能にします。
false
該当要素を編集不可能にします。
inset
祖先要素の属性値を継承します。
javascript 構文
element.contentEditable=true; 
<button onclick="cngEdit.contentEditable=true" >編集可能にする "true"</button>
<button onclick="cngEdit.contentEditable=false" >編集不可能にする "false"</button>
<button onclick="alert(cngEdit.innerHTML);" >編集したHTMLソース表示</button>
 <div id="cngEdit" contenteditable="true">
  <div>当該要素のID名を指定して<br />
         編集モードを切り替えます。</div>
 </div>
 ✰ 編集お試しボックス
当該要素のID名を指定して
編集モードを切り替えます。
contenteditable //ブラウザによる挙動の違い
  <div id="cngEdit" contenteditable="true">
       この領域は編集できます。</div>
 上記コードで 「Enter」キーを押すとFirefox では <br>要素が挿入されますが
IEでは<p>タグが生成され上下に余白が入ります。</p>
これを回避し '一行改行' を実行するには 下の様に、コードを書き換えます。
実行すると <p>タグではなく、<div>タグが入ります。そして念のために、CSS で
P要素の 'margin' を'0' にします。#cngEdit p{ margin:0;} 
 <div id="cngEdit" contenteditable="true">
   <div>この領域は編集できます。</div> <!-- DIVを入れ子にする-->
 </div>
上記 編集お試しボックスで、編集、コピーして貼り付け、 「Enter」キー を押す など
して、’編集したHTMLソース表示’ ボタンを押してください。思わぬ結果が..............
ブラウザを変えて、試してください。
タグ：contenteditable HTML5
posted by javaScript at 23:04 | 大阪 ☀ | HTML タグ　要素 | このブログの読者になる | 更新情報をチェックする
- 1 2 3 4 >>
×

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