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

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

galleria

01-13) 1. 左右に2つの画面を表示する

 

画像を左、タイトル、本文表示(左側)と
画像を右、タイトル、本文表示(右側)に同時に表示する
widthプロパティで2つのボックスが入る様に幅を設定する。

cssの書き方 /*-------------------------------------------------------
01-13 画像の横に見出しやテキストを回り込ませる(左側)
-------------------------------------------------------- */
.info_162L {
 float:left;
 width:290px;
 margin:10px 10px 10px 5px;
 border: 3px #C0C0C0 solid; /* 灰色の枠指定 */
 padding: 10px;
}
.info_162L img{
 float: left; /* 画像を左部に表示 */
 margin: 0 10px 10px 0; /* 右、下をマージンする */
}
.info_162L p{
 text-indent: 1em; /* 1文字空白にする */
}

*html .info_162L {
 margin:5px 5px 5px 3px; /* for IE6 hack ボックス間の空き幅 */
}
/*-------------------------------------------------------
01-13 画像の横に見出しやテキストを回り込ませる(右側)
-------------------------------------------------------- */
.info_162R {
 float: left;
 width: 300px;
 margin: 10px 10px 10px 5px;
 border: 3px #C0C0C0 solid; /* 灰色の枠指定 */
 padding: 10px 10px 10px 10px;
}
.info_162R img{
 float: right; /* 画像を右部に表示 */
 margin: 0 10px 10px 0; /* 右、下をマージンする */
}
.info_162R p{
 text-indent: 1em; /* 1文字空白にする */
}

*html .info_162R {
 margin:5px 5px 5px 3px; /* for IE6 hack ボックス間の空き幅 */
}
HTMLの使用例 <!-- 画像を左、タイトル、本文表示表示 -->
<div class="info_162L">
 <img src="../images/park_photo01.jpg" alt="鶏の唐揚げ定食の写真"/>
 <h4>ランチ</h4>
 <p>
 <br />実は先日、文字列 ・・・
 </p>
 </div>
 <!-- 1.6-5 画像を右、タイトル、本文表示 -->
 <div class="info_162R">
 <img src="../images/park_photo01.jpg" alt="鶏の唐揚げ定食の写真"/>
 <h4>ディナー</h4>
 <p>
 <br />鶴屋公園のスタッフ 文字列
 </p>
</div>

鶏の唐揚げ定食の写真

ランチ


実は先日、鶴屋公園のスタッフでプレオープンに伺いました。ランチタイムに伺ったのですが、その日のランチメニューは「鶏の唐揚げ定食」。 とてもスパイシーでおいしかったです。そして、鶏の唐揚げの上にタマゴが乗っているんです。

鶏の唐揚げ定食の写真

ディナー


実は先日、鶴屋公園のスタッフでプレオープンに伺いました。ランチタイムに伺ったのですが、 その日のランチメニューは「鶏の唐揚げ定食」。とてもスパイシーでおいしかったです。そして、鶏の唐揚げの上にタマゴが乗っているんです。 ありそうでない組み合わせじゃないですか?これがまたイイんです。
通常営業が始まると、毎日3種類ほどのランチメニューが用意されるとか。今日のメニューもマスターに教えてもらっちゃいました。 「鮭ときのこのクリームパスタ」「トマトとアスパラとアボカドの冷製パスタ」「キーマカレー」だそうです。今日さっそく行ってみようかな。