2006年12月01日

作業2 CSSその10 honbun領域のpタグ

「#honbun」の領域の<p>を調整してみましょう。

まず、確認のために「style1.css」ファイルの「p」のところを探して下さい。

以前記述したのですがもう一度「border」を表示させて見ましょう。
太字の部分を記述足してください。


p
{
padding:30px;
line-height:150%;
border-color:#c60000;
border-style:solid;
border-width:2px;
}


「part1.html」をブラウザで確認してみましょう。

<p>の上下左右に「padding」が30ピクセルに設定されています。

そこでこの「padding」を調整します。

padding:0 50;

と、書き直します。

これは、最初の「0」は上下を0ピクセル、最後の「50」は左右を50ピクセルにしなさい。ということです。

「part1.html」ファイルをブラウザで確認してください。

border 内でテキストが移動しているのがわかります。

最後に「CSS」ファイルのborder を消しておきましょう。
こうなります。


p
{
padding:0 50;
line-height:150%;
}


次回は<p>の中に画像を配置します。

それでは  (@^^)/~~~

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




※お知らせ

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

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

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

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

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

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

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


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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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