copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
検証ツールの支援と多岐にわたるソリューションを提供します。

galleria

01-09)　1.　枠の指定

　

ID要素で指定

id属性に対してCSSを適用させるには『#（シャープ）』を使います。
id要素名はXHTMLのｂｏｄｙ部で重複して使用することは出来ません。
下記のサンプルの#waku_01210のid属性を宣言した場合
XHTMLでは　id=waku_01210　として使用します。
設定するプロパティ
　margin
　border
　width

ｃｓｓの書き方 /*---------------------------------------------
01-09　枠指定
---------------------------------------------- */
#waku_01210{
  float: left; /* 左側に回り込み指定　*/
  margin: 0 0 0 20px; /*　ﾎﾞｯｸｽ間の空き幅　*/
  border: 3px #C0C0C0 solid; /*　灰色の枠指定　*/
  width: 600px; /*　ﾎﾞｯｸｽの幅　　*/
   padding-left: 10px; /*　文字の位置調整　*/
}
#waku_01210 ul{
  padding: 20px 0; /*　書き出し位置と最終の幅　*/
}
#waku_01210 li{
  padding: 0 20px 0 60px; /* 本文の左端をずらす*/
  line-height: 30px; /* 1行の高さ */
  font-weight: normal;
  font-size:small;
  text-indent: -40px; /*　　書き出しのみマイナス位置とする　*/
  color: #252525;
  list-style: none; /* 先ドットなし指定*/
}
HTMLの使用例 <div id="waku_01210">
  <ul>
    <li>[１行]レイアウト 文字列　・・・</li>
    <li>[2行] レイアウト 文字列　・・・</li>
    <li>[3行] レイアウト 文字列　・・・</li>
    <li>[4行] レイアウト 文字列　・・・</li>
  </ul>
</div>
  • [１行]レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [2行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。
  • [3行] レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [4行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。

01-09)　2.　枠指定

class要素で指定

class属性に対してCSSを適用させるには『.（ドット）』を使います。
下記のサンプルの.waku_01211のクラス属性を宣言した場合
XHTMLでは　class=waku_01211　として使用します。

ｃｓｓの書き方 .waku_01211{
  float: left; /* 左側に回り込み指定　*/
  margin: 0 0 0 20px; /*　ﾎﾞｯｸｽ間の空き幅　*/
  border: 3px #C0C0C0 solid; /*　灰色の枠指定　*/
  width: 600px; /*　ﾎﾞｯｸｽの幅　　*/
  padding-left: 10px; /*　文字の位置調整　*/
}
.waku_01211 ul{
  padding: 20px 0; /*　書き出し位置と最終の幅　*/
}
.waku_01211 li{
  padding: 0 20px 0 60px; /* 本文の左端をずらす*/
  line-height: 30px; /* 1行の高さ */
  font-weight: normal;
  font-size:small;
  text-indent: -40px; /*　　書き出しのみマイナス位置とする　*/
  color: #252525;
  list-style: none; /* 先ドットなし指定*/
}
HTMLの使用例 <div class="waku_01211">
  <ul>
    <li>[１行]レイアウト 文字列　・・・</li>
    <li>[2行] レイアウト 文字列　・・・</li>
    <li>[3行] レイアウト 文字列　・・・</li>
    <li>[4行] レイアウト 文字列　・・・</li>
  </ul>
</div>
  • [１行]レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [2行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。
  • [3行] レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [4行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。