copyright

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

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

galleria

01-14)　1.　dl要素を使用する　

　

1.dl要素を用いて画像の横に回りこませる
.info_171 dt img.photo{}　の説明；
クラス名　info_171　の　dt要素　の　img要素の中にクラス名photoを使用する。
XHTMLの使用は　<img class="photo" ・・>で記述する。　

ｃｓｓの書き方 /*----------------------------------------------
01-14　定義型リストの中に要素の回り込みを指定する
回り込みあり　枠あり (class属性）
---------------------------------------------- */
.info_171{
  margin: 0 0 15px 0;
  padding: 10px;
  width: 600px;
  background-repeat: no-repeat;
  background-position: 180px 0;
  border: 3px #C7C7C7 solid; /*　灰色の枠指定　*/
}
.info_171 dt img.photo{
  float: left;
  margin: 0 10px 0 0;
  padding: 5px;
  background-image: url("../images/inc_service_photoBg.gif");
  background-repeat: repeat;
  background-position: left top;
}
.info_171 dt a:hover img.photo{
  background-image: url("../images/inc_service_photoBg_hover.gif");
}
.info_171 dt img.title{
  margin: 0 0 5px 0;
}
.info_171 dd{
  font-size: small;
l  ine-height: 1.2;
}
HTMLの使用例 <dl class="info_171">
  <dt><a href="#">
  <img class="photo"　src="../images/inc_service_photoCafe.jpg" alt=""/></a>
  </dt>
  <dt class="colRedH4">アイネックスカフェの紹介<br /></dt>
  <dd>お酒を飲みたい」「文字列１・・</dd>
  <dd class="colBlueBd">そんな魅力が詰った文字列１・・</dd>
  <dd>「ご飯が食べたい」文字列１・・
  </dd>
</dl>
アイネックスカフェの紹介

「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・
そんな魅力が詰まったカフェを展開していきます。
「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。 「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。

2.画像の横に回り込みしない --　枠あり

.info_173 dd{}　の margin: 0 0 0 170pxで左端からの位置を指定し、
文字列の回り込みを回避している。

ｃｓｓの書き方 .info_173{
  margin: 0 0 15px 0; /* 枠の位置を決定する（左端空白）　*/
  border: 3px #C7C7C7 solid; /*　灰色の枠指定　*/
  padding: 5px; /* 文字の位置を決定する（文字のシフト） */
  width: 600px; /* 文字の長さを指定する　*/
  background-repeat: no-repeat;
  background-position: 180px 0;
}
.info_173 dt img.photo{
  float: left; /* 写真は枠の左端に配置する */
  margin: 0 10px 0 0; /* 枠の位置を決定する（左端空白）　*/
  padding: 5px;
  background-image: url("../images/inc_service_photoBg.gif");
  background-repeat: repeat;
  background-position: left top;
}
.info_173 dt a:hover img.photo{
  background-image: url("../images/inc_service_photoBg_hover.gif");
}
.info_173 dt img.title{
  margin: 0 0 5px 0;
}
.info_173 dd{
  margin: 0 0 0 170px;
  font-size: small;
  line-height: 1.2;
}
アイネックスカフェの紹介

「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・
そんな魅力が詰まったカフェを展開していきます。
「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。 「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。

3.画像の横に回り込みしない --　枠なし

borderプロパティを削除し、枠線を表示しない。

ｃｓｓの書き方 .info_175{
  margin: 0 0 15px 0;
  width: 600px;
  background-repeat: no-repeat;
  background-position: 180px 0;
}
.info_175 dt img.photo{
  float: left;
  margin: 0 10px 0 0;
  padding: 5px;
  background-image: url("../images/inc_service_photoBg.gif");
  background-repeat: repeat;
  background-position: left top;
}
.info_175 dt a:hover img.photo{
  background-image: url("../images/inc_service_photoBg_hover.gif");
}
.info_175 dt img.title{
  margin: 0 0 5px 0;
}
.info_175 dd{
  margin: 0 0 0 170px;
  font-size: small;
  line-height: 1.2;
}
アイネックスカフェの紹介

「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・
そんな魅力が詰まったカフェを展開していきます。
「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。 「ご飯が食べたい」「お酒を飲みたい」「ゆっくりコーヒーが飲みたい」。街の中でゆっくり安らげる・・・ そんな魅力が詰まったカフェを展開していきます。

01-14)　2. キャプションを回りこませる

　　　　・・　class属性を使用する

星空タウンの住民が集まる
イベントを
やりたい！
星空タウンは新しい街なので、地元のお祭りや地元の行事がほとんどありませんでした。
これだと、街の中に活気が生まれないというか、そのひとの持っているコミュニティを超えた、地元のつながりが生まれないと感じていました。 あるとき思ったんです。
だったら、自分で作ってしまおうと。新しい街にふさわしい新しいお祭りを。
星空タウンの住民が集まるイベントをやりたい！って。ここまでくるのに1年かかりましたが、 ようやく星空タウンのみなさんにご案内できるようになりました。

01-14)　3. キャプションを回り込みしない

星空タウンの住民が集まる
イベントを
やりたい！
星空タウンは新しい街なので、地元のお祭りや地元の行事がほとんどありませんでした。 これだと、街の中に活気が生まれないというか、そのひとの持っているコミュニティを超えた、地元のつながりが生まれないと感じていました。 あるとき思ったんです。
だったら、自分で作ってしまおうと。新しい街にふさわしい新しいお祭りを。
星空タウンの住民が集まるイベントをやりたい！って。ここまでくるのに1年かかりましたが、 ようやく星空タウンのみなさんにご案内できるようになりました。

01-14)　4. 定義型リストのサンプル

　　・・　IE6.0　　　ｱﾝﾀﾞｰﾗｲﾝが太字で表示する　NG

　　・・　Chrome　 ｱﾝﾀﾞｰﾗｲﾝが破線で表示する

　　・・　ｸﾗｽ属性指定

会社名
株式会社アイネックス
住所
横浜市神奈川区鶴屋町２－２３－５F
電話番号
045-311-4951

01-14)　5. 定義型リストのサンプル

　　・・　IE6.0　　　ｱﾝﾀﾞｰﾗｲﾝが太字で表示する　NG

　　・・　Chrome　 ｱﾝﾀﾞｰﾗｲﾝが破線で表示する

　　・・　id属性指定

会社名
株式会社アイネックス
住所
横浜市神奈川区鶴屋町２－２３－５F
電話番号
045-311-4951