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

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

galleria

01-11) 1. 定義型リスト(dl)を使ってテーブルのように見せる

 

定義型リスト(dl)を記述する

dlはDefinition List(定義リスト)、dtはDefinition Term(定義する用語)、
ddはDefinition Description(定義の説明)を意味しています。)
dl要素はブロックレベル要素で、それぞれの項目が<dt>〜<dt>、<dd>〜<dd>で記述します。

設定するプロパティ
リストの幅(dl要素 width
セルのタイトル部の幅(dt要素 width)
セルのデータ部の幅(dd要素 width)

cssの書き方 /*----------------------------------------------
01-11 定義型リスト
----------------------------------------------- */
.info_1102{
  float: left;
  width: 340px; /*リスト全体の幅 */
  padding: 20px;
  font-size: medium;
  line-height: 1.2;
}
.info_1102 dt{
  float: left;
  width: 120px; /*右タイトル部の幅 */
  margin: 0 0 10px 0;
}
.info_1102 dd{
  float: left;
  width: 220px; /*左データ部の幅 */
  margin: 0 0 10px 0;
  text-align: justify;
}
HTMLの使用例 <h4>取材協力1</h4>
<dl class="info_1102">
  <dt>取材場所</dt>
  <dd>INEX Cafe</dd>
  <dt>住所</dt>
  <dd>〒000-0000<br /></dd>
  <dt>TEL</dt>
  <dd>00-0000-0000</dd>
  <dt>営業時間</dt>
  <dd>11:30〜23:30</dd>
  <dt>特徴</dt>
 <dd>このカフェに訪れた人</dd>
</dl>

取材協力1

取材場所
INEX Cafe
住所
〒221-0835
横浜市神奈川区鶴屋タウン2-23-5
TEL
045-311-4951
営業時間
11:30〜23:30
特徴
このカフェに訪れた人たちのあいだにつながりが生まれる“場”でありたいというコンセプトでオープンしたINEX Cafe。ちょっと小腹がすいたから、ご近所の人とおしゃべりがしたいから、 コーヒー飲みながら本を読みたいから・・・そんなときに気軽に立ち寄れるカフェです。

01-11) 2. 定義型リスト(dl)を使ってテーブルのように見せる

定義型リスト(dl)に背景色(background)、色(color)を記述する

cssの書き方 .info_1101{
  float: left;
  width: 340px;
  padding: 20px;
  font-size: medium;
  background:#336600;
  color: #FFFFFF;
  line-height: 1.2;
}
.info_1101 dt{
  clear: both;
  float: left;
  width: 120px;
  margin: 0 0 10px 0;
}
.info_1101 dd{
  float: left;
  width: 220px;
  margin: 0 0 10px 0;
  text-align: justify;
}
HTMLの使用例 <h4>取材協力1</h4>
<dl class="info_1101">
  <dt>取材場所</dt>
  <dd>INEX Cafe</dd>
  <dt>住所</dt>
  <dd>〒000-0000<br /></dd>
  <dt>TEL</dt>
  <dd>00-0000-0000</dd>
  <dt>営業時間</dt>
  <dd>11:30〜23:30</dd>
  <dt>特徴</dt>
 <dd>このカフェに訪れた人</dd>
</dl>

取材協力2

取材場所
INEX Cafe
住所
〒221-0835
横浜市神奈川区鶴屋タウン2-23-5
TEL
045-311-4951
営業時間
11:30〜23:30
特徴
このカフェに訪れた人たちのあいだにつながりが生まれる“場”でありたいというコンセプトでオープンしたINEX Cafe。ちょっと小腹がすいたから、ご近所の人とおしゃべりがしたいから、 コーヒー飲みながら本を読みたいから・・・そんなときに気軽に立ち寄れるカフェです。