株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

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

galleria

01-09) 1. 枠の指定

 

ID要素で指定

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

cssの書き方 /*---------------------------------------------
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>[1行]レイアウト 文字列 ・・・</li>
    <li>[2行] レイアウト 文字列 ・・・</li>
    <li>[3行] レイアウト 文字列 ・・・</li>
    <li>[4行] レイアウト 文字列 ・・・</li>
  </ul>
</div>

  • [1行]レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [2行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。
  • [3行] レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [4行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。

01-09) 2. 枠指定

class要素で指定

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

cssの書き方 .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>[1行]レイアウト 文字列 ・・・</li>
    <li>[2行] レイアウト 文字列 ・・・</li>
    <li>[3行] レイアウト 文字列 ・・・</li>
    <li>[4行] レイアウト 文字列 ・・・</li>
  </ul>
</div>

  • [1行]レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [2行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。
  • [3行] レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、リンク バーが入るセルをページの左の辺に沿って、さらに Web ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで取ることができます。
  • [4行] レイアウト テーブルは、必要に応じて簡単なものも複雑なものも作成することができます。