copyright

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

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

galleria

01-12)　1.　枠と画像とタイトル、文字を記述する

　

1.枠と文字を記述する

枠(borderプロパティ)で設定し、
文字列の属性は.info_161 p{　}の text-indentプロパティで文字列の
開始位置を1文字右にシフトする。
.info_161 p　の記述は.info_161クラス名のブロックレベル要素の
内部要素『p』を宣言しています。

ｃｓｓの書き方 /*---------------------------------------------
01-12　画像の横に見出しやテキストを回り込ませる
---------------------------------------------- */
.info_161 {
  width:600px;
  margin:10px 10px 10px 5px;
  border: 3px #C0C0C0 solid; /*　灰色の枠指定　*/
  padding:10px;
}
.info_161 h3{
  float: right;
  margin: 0 0 10px 0;
  width:140px;
}
.info_161 img{
  float: left; /* 画像を左部に表示 */
  margin: 0 10px 10px 0; /* 右、下をマージンする　*/
}
.info_161 p{
  text-indent: 1em; /* 1文字空白にする　*/
}
HTMLの使用例 <div class="info_161">
  <p>
     鶴屋公園の文字列　・・・
  </p>
</div>

鶴屋公園のバーベキュー広場の一番のウリである、
鶴屋農場の採れたての新鮮野菜をバーベキューに出来ちゃうなんて贅沢ですよね。
そんな鶴屋公園・バーベキュー広場の魅力満載の雑誌「バーベキューライフ」。
是非、お買い求めください。


2.枠と画像と文字を記述する

XHTMLで img要素を記述する.。
.info_161 img{ }のmarginプロパティにより左端の上部に画像を表示して、
floatプロパティにより画像の右端から文字列を回りこみ表示する。

HTMLの使用例 <div class="info_161">
  <img src="../images/park_blog_photo.jpg" alt=""/>
  <p>実は先日、鶴屋公園の文字列　・・・</p>
</div>

鶏の唐揚げ定食の写真

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

3.枠と画像とサブタイトルと文字を記述する

サブタイトルをH3要素で記述する。

HTMLの使用例 <div class="info_161">
　 <img src="../images/park_blog_photo.jpg" alt=""/>
　 <h3>アイネックスランチの紹介</h3><br />
  <p>実は先日、鶴屋公園の文字列　・・・</p>
</div>

鶏の唐揚げ定食の写真

アイネックスランチの紹介


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