スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-04 実際にスタイルの適用をやってみます

 前回に引き続いて、今回は、スタイルシートの具体的な適用方法について書きます。
 まずはじめに、外部の拡張子.cssがついたファイルとしてのスタイルシートの中身は

.dp_right {
margin: 15px;
float: right;
height: auto;
width: 275;
border: 3px solid #444444;
}
.dp_left {
margin: 15px;
float: left;
height: auto;
width: 275;
border: 3px solid #444444;
}
.ft1 {
font-size: 1px;
color: #ffffff;
}

のように書かれています。dp_right、dp_leftなどがスタイルの名前です。

 このスタイルをHTMLぺーじのヘッダー部分に書き込むためには

<style>
.dp_right {
margin: 15px;
float: right;
height: auto;
width: 275;
border: 3px solid #444444;
}
.dp_left {
margin: 15px;
float: left;
height: auto;
width: 275;
border: 3px solid #444444;
}
.ft1 {
font-size: 1px;
color: #ffffff;
}
</style>

のように<style>と</style>の間に記述します。
あとは、

<img class="dp_right" src="画像のURL"/>
という風に使うわけです。

実際の画像は


というふうに、画像を余白15ピクセル、配置は右、画像の幅は275ピクセルで3ピクセルの枠をつけるということになります。

これと同じことをインラインスタイルシートで書くと

<img style="margin: 15px;float: right;height: auto;width: 275;border: 3px solid #444444;" src="画像のURL"/>
という風に、名前の定義の部分の改行を削除して記述します。

なぜ改行を削除するかといいますと、Gooブログの編集画面は、投稿するときに開業があると<br>というタグに変換して投稿するために、スタイルシートの定義の中身がそのタグで分断されて正しく反映されないためです。

ちなみに、例であげたスタイルの名前の定義は、私のブログのテンプレートの編集で私が追加したスタイルです。

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。