2006年12月12日

作業2 CSSその11 画像をpタグ内に配置する

それでは画像を<p>タグの中に配置してみましょう。

その前に、画像をダウンロードします。

ここを右クリックして「対象をファイルに保存」を選択し「csstips」フォルダの中の「images」フォルダの中にコピーをしておいてください。

ファイルは「lzh形式」になっていますので各自で解凍して下さい。 3枚の画像があります。

1mixi.jpg
2seesaa.jpg
3iptelephone.jpg

の3枚です。確認して下さい。

それでは「psrt1.html」ファイルの以下の部分を探して下さい。

*******************************************************
<h2>SNS(ソーシャル・ネットワークキング・サービス)<h2>
<p>「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>
*******************************************************

最初の<p>のすぐ後ろに以下のように記述します。 赤文字の部分です。

*******************************************************
<p><img src="images/1mixi.jpg">「友達の友達は皆友達だ」という考え方に基づき、人々の「つながり」を重視して、趣味や嗜好・仕事関係・男女関係などの構築をオンラインでサポートするサービスの総称である。</p>
*******************************************************

同じように次の<p>タグを探して画像ファイル名を記述して下さい。

<p><img src="images/2seesaa.jpg">狭義にはWorld Wide Web(Web)上のウェブページのURLとともに覚え書きや論評などを加え記録(Log)しているウェブサイトの一種。"WebをLogする"という意味でWeblogと名付けられた。</p>

<p><img src="images/3iptelephone.jpg">インターネットプロトコル(Internet Protocol)電話の略で、電話網の一部もしくは全てにVoIP技術を利用する電話サービスである。音声のみのものが多いが、動画も利用できるテレビ電話サービスなども可能である。</p>

ここで、「part1.html」ファイルを上書き保存してブラウザで確認してみましょう。

画像は配置されましたがデザインが崩れています。

「style1.css」ファイルで調整します。

「img」ファイルを<p>タグ内の第一行目の左側に配置し画像の右側と、下側に余白をつけてみます。

以下を「style1.css」ファイルに書き足して下さい。

*******************************************************
img
{
float:left; ← 左側に配置する
margin-right:20px; ← 画像の右側の余白
margin-bottom:20px; ← 画像の下側の余白
}
*******************************************************

「css」でのデザイン講座をこれで一度終了しますが、「css」の利便性がわかってもらえたでしょうか。

これからは、「csstips」をご紹介していく予定です。

わからないことがあれば出来るだけメールでお答えして行こうと考えています。よろしくお願いします。

この記事がためになったと思ったら「クリック」応援してね→ banner_02.gif




※お知らせ

ご訪問いつもありがとうございます。m(__)m

このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。

そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。

タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。

第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。

重複する場面もあるとは思いますがよろしければご購読下さい。

メルマガ登録・解除 ID: 0000208582
無料テンプレート付 簡単ホームページ講座
   
バックナンバー powered by まぐまぐトップページへ


posted by ひろりん at 14:14 | Comment(0) | TrackBack(0) | やってみよう!XHTML+CSS
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。