DIVタグを使って領域設定

ホームページやブログでも使われているタグに<div>というタグがあります。記事の領域を設定するタグで領域の終わりを示す</div>と組み合わせて領域を設定し、その領域内に記事や画像を挿入しています。

普通にブログを書いているときには全く意識しなくても構いませんが、記事面に少し変化を付けたい時には領域内に更に自分で領域を設定して使うこともあります。
この太字の部分がそれです。枠線も色も付けていませんので全くわかりませんね。
では、領域を枠線で囲ってみます。cssで設定します。それが下です。

この部分がそうです。二重線で領域を示しています。その中にこの文章が入っていますね。

ソースは下のようになっています。
<div style="border:3px solid blue;">この部分がそうです。二重線で領域を示しています。その中にこの文章が入っていますね。</div>
border:3px solidは枠線を実線で太さを3pxにという指定です。は枠線の色の指定です。種類や色を変えたければこの部分を変更すればよいのです。ちなみに二重線は double 、点線は dotted、破線は dashed、他にも くぼみは groove、浮き出しは ridge、インセットは inset、 アウトセットは outset などがあります。
また、styleで領域の幅や、高さを指定できます。ここは領域の幅を400pxに、高さを100pxにして、領域を点線で囲んでみました。こんな感じです。
この部分のソースは次のようになっています。
<div style="border:3px dotted red;width:400;height:100;">また、styleで領域の幅や、高さを指定できます。ここは領域の幅を400に、高さを100にしてみました。</div>
なお、この領域内に画像も設定できます。
下は領域を二重線で囲み、画像と文を入れた例です。

すやすやと眠るクッキーちゃん

ソースは下です。
<div style="border:3px double blue;width:300px;height:150px;"><img src="画像のアドレス">
すやすやと眠るクッキーちゃん</div>

なお、DIVタグは必ず終わりタグ /div が必要です。忘れるとおかしなことになるので注意が必要です。
しかし、手軽に更新できるのがブログの長所ですから普通こんな面倒なことはあまりしませんよね。一応備忘録として書きました。
スポンサーサイト

コメントの投稿

非公開コメント

有難うございます

こんにちは~
カントウt法は今日は肌寒さがやってきました

領域がdivですね

暇ができればやってみたい事はいっぱいあります
私はまだ作られたタグをそのまま使わせていただくので精一杯ですから
また勉強します
有難うございます

花ぐるまさん

こんにちは 昨日夕方から何んとなく雨模様です。
きょうはクラブでした。ワードで面白いことを皆さんでやってみました。要点を記事にまとめましたので明日でもアップしておこうと思っています。皆さんいろいろと思いつくので楽しいですよ。
プロフィール

ja6ei

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

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード