copyright

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

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

galleria

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

　

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

ｃｓｓの書き方 /*-------------------------------------------------------
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種類ほどのランチメニューが用意されるとか。今日のメニューもマスターに教えてもらっちゃいました。 「鮭ときのこのクリームパスタ」「トマトとアスパラとアボカドの冷製パスタ」「キーマカレー」だそうです。今日さっそく行ってみようかな。