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

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

galleria

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

 

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

cssの書き方 /*----------------------------------------------
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>お酒を飲みたい」「文字列1・・</dd>
  <dd class="colBlueBd">そんな魅力が詰った文字列1・・</dd>
  <dd>「ご飯が食べたい」文字列1・・
  </dd>
</dl>

アイネックスカフェの紹介

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

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

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

cssの書き方 .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プロパティを削除し、枠線を表示しない。

cssの書き方 .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  アンダーラインが破線で表示する

  ・・ クラス属性指定

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

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

  ・・ IE6.0   アンダーラインが太字で表示する NG

  ・・ Chrome  アンダーラインが破線で表示する

  ・・ id属性指定

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