2012年09月27日

white-space プロパティ

スポンサード リンク

 ソース内の空白文字や改行、自動改行の扱いを指定
normal,nowrap,pre,pre-wrap,pre-line

white-space: normal;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: nowrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-wrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-line;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
<title>white-space プロパティ</title>
<style type="text/css">
<!--
.Wnml{
 width : 300px;
 border : 1px solid lime;
 white-space : normal;  /* 初期値 */
  }

.Wnrp{
 width : 300px;
 border : 1px solid lime;
 white-space : nowrap;
  }

.Wpre{
 width : 300px;
 border : 1px solid lime;
 white-space : pre;
  }

.Wpre-wrap{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-wrap;
  }

.Wpre-line{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-line;
 }
-->
</style>
</head>
<body>
<p class="Wnml"><strong>white-space:normal;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
<p class="Wnrp"><strong>white-space:nowwrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
</p>
<p class="Wpre"><strong>white-space: pre;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-wrap"><strong>white-space: pre-wrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-line"><strong>white-space: pre-line;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
</body>
</html>
white-space プロパティ
  連続する複数のスペース、タブを1つの半角スペース(空白)にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、
指定する際に使用します。
white-space
normal
 連続する複数のスペース、タブを1つの空白(半角スペース)に転換。 改行を空白に変換。
ボックスの端までくると自動折り返しする。
任意の位置で改行する場合は、br要素などで行います。
nowrap
 normalと同様に連続するスペース、タブを1つの空白に転換。改行を空白に変換。
自動折り返しはしない。ボックスから文字が溢れる場合がある。
pre
 HTMLソースの連続するスペース、タブや改行がそのまま表示される。
自動折り返しはしない。
表示モードが互換モードのとき、IEでは無効 //確認 IE7
(参考)標準モードと互換モード , Mozilla's DOCTYPE
pre-wrap
  preと同様に連続するスペース、タブや改行がそのまま表示されるが
ボックスの端まで行くと自動的な折り返しがされます。
pre-line
  normalと同様に連続するスペース、タブを1つの空白に転換しますが
ソース内の改行位置で改行されます。
ボックスの端までくると自動折り返しする。

*) IE6, 7は  pre-wrappre-lineには未対応、normalと同様の表示になります。

HTML文の改行
<p class="Wnml">javascript123.seesaa.net/</p>
<p class="Wnml">javascript
123.seesaa.net/</p>
──────────────────────────
<p class="Wnml">織田信長</p>
<p class="Wnml">織田
信長</p>

 上記のコードをみてください。値は"normal"です。上下とも<p>タグで書き、まったく 同一です。
ただし内包するテキストは、上は英文で、下は日本語で書いてあり両方とも2行目を改行しています。
下が表示結果です。英文の改行には空白(javascript と 123 の間)が入りますが
日本語では入っていません。些細なことですが......// 確認 IE7  Firefox9では空白が入っています。

javascript123.seesaa.net/

javascript 123.seesaa.net/

織田信長

織田 信長

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から1文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
javascript 文字、文字列
javascript文字 点滅

タグ:white-space
posted by javaScript at 16:16 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする

2012年09月22日

テーブル table のセルを結合します。

スポンサード リンク

 表のセル <td> <th>を結合します。
<td rowspan="" colspan="">〜</td>

見出しセル thタグ を結合
セル1-1 セル1-2 セル1-3 セル1-4 セル1-5
セル2-1 セル2-2 セル2-3 水平方向 列結合 2
セル3-1 垂直方向
行結合 3
セル3-3 セル3-4 セル3-5
セル4-1 両方向
行 2、列 3 結合
セル5-1

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース


<html>
 <head>
<title>テーブル table のセルを結合します。</title>
</head>
<body>
<table border="1" cellpadding="2">
 <tbody>
  <tr>
   <th colspan="5">見出しセル th タグを結合</th>
  </tr>
  <tr>
   <td>セル1-1</td>
   <td>セル1-2</td>
   <td>セル1-3</td>
   <td>セル1-4</td>
   <td>セル1-5</td>
  </tr>
  <tr>
   <td>セル2-1</td>
   <td>セル2-2</td>
   <td>セル2-3</td>
   <td colspan="2">水平方向 列結合 2</td>
  </tr>
  <tr>
   <td>セル3-1</td>
   <td rowspan="3">垂直方向<br>行結合 3</td>
   <td>セル3-3</td>
   <td>セル3-4</td>
   <td>セル3-5</td>
  </tr>
  <tr>
   <td>セル4-1</td>
   <td rowspan="2" colspan="3">両方向<br>行 2, 列 3 結合</td>
  </tr>
  <tr>
   <td>セル5-1</td>
  </tr>
 </tbody>
</table>
<!--背景色指定のコードは省略してあります-->
</body>
</html>
colspan="" 属性
横方向(列)の結合を指定します。結合を開始する<td>タグに colspan 属性を書き加え
<td colspan=""> , ""に結合するセルの数を入れます。
横のセル、1つを結合する場合は<td colspan="2">になります。
rowspan="" 属性
縦方向(行)の結合を指定します。結合を開始する<td>タグに rowspan 属性を書き加え
<td rowspan=""> , ""に結合するセルの数を入れます。
縦 横 両方向のセルの結合
結合を開始する<td>タグに colspan 属性と rowspan 属性を書き加えます。
<td rowspan="2" colspan="3"> //2行 3列のセルを結合します。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
HTML テーブル( 表 ) の作成。
table-layoutプロパティ CSS テーブル
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。

タグ:
posted by javaScript at 14:28 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする
×

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