知って得するブログちょこ技♪ 2

知って得するブログちょこ技♪ 2の情報ページです。
←ランキングに参加しています。
←プチッと応援していただけると励みとなります。

 
発掘!激安「訳あり」アイテム 4/30  09:59まで


◆店長愛用中♪ 自信を持ってお勧めする エックスサーバー  初心者にも丁寧親切ですよ♪

話題の特集記事

Windows7特集  ■解説  ■特徴と評価  ■アップグレードの注意点
◆ホームベーカリー特集♪    ◆本当に役立つ調理家電小物
地デジテレビ 設置手引書
カメラをカビから守る!
■DVD丸ごとコピー大作戦    ■DVD丸ごとコピー作戦2
暖房コスト比較。灯油が一番安いという常識は本当か?
インフルエンザと花粉対策に加湿器
デジ一眼用・タムロンの名交換レンズが最安値
パソコンが完全に壊れる前にHDD換装しましょう
激安家電情報は生ものと同じで、すぐ売切れてしまうので上記には記載しておりません。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
知って得するブログちょこ技♪ 2
第2回 すごく便利なDIV (*^▽^*)


DIVちょこ技の第2回目です。

第1回目はこの記事の前(下)です。こちら。
前回は枠で囲って その中に文章を書いてみました。
今回はそのDIVのスタイルをさらに詳細に設定してみましょう。


(閑話休題 : 無料のソフトや、安価なホームページ作成ソフトなど色々ありますが、店長は絶対このホームページビルダーをお勧めします! 後にお話しするスタイルシートを高度編集支援しているからです。 もちろんブログから通常のホームページ作成やSEO対策・・・とくにYahoo! とGoogleに貴方のホームページを宣伝する費用1万円分のクーポンまで添付しています。
当然店長も10年以上愛用しています(^o^))



【DIVタグ】

2.さらに いろいろスタイルを指定して使って見よう。
スタイルとは どんな見た目にするかということです。

記 述 表示 (見た目)
【例 5】

<DIV style="border:1px solid #66cc66; width: 180px; margin-top : 8px ; margin-left :8px ; padding: 10px 0px 10px 30px; font-size: 12px; color:#000000; background : #ebebeb ;line-height: 1.5;">パソコンと家電の<br>お買い物は<br>電脳商店街で<br>研究してみましょう♪
</DIV>


パソコンと家電の
お買い物は
電脳商店街で
研究してみましょう♪

少しスタイル記述事項が多くなりましたね(^o^;;

bordeとwidth、font-sizと colo、line-heighは前回お話したとおりです。
今回 新しいスタイルとしてmarginとpadding、backgroundの3点が出てきました。

margin(マージン)とは枠の外の余白です。別の言い方をすれば枠の位置を指定しています。
上の例ではmargin-top : 8px とは緑の枠の本体がその上の灰色の物体(笑)から8pxの距離を置きなさいという指示です。
margin-left :8pxとは緑の枠が収まっているtable(表・テーブル)の左端から8pxの距離を置け!ということです(^o^)
当然下との距離指定はmargin-bottom。右との距離指定はmargin-rightとなります。

次にpadding(パディング・余白)です。
padding: 10px 0px 10px 30px;とは緑の枠線からの余白を指定しています。上の余白10px、右余白無し、下の余白10px、左の余白30pxということです。
方位でいうと 北ー東ー南ー西 の順。時計で言うと 0時ー3時ー6時ー9時 です。
marginと同じようにpadding-topというような使い方でもOKです。
また単に paddinr:10px; と指定した場合は上下左右10pxの余白となります。

絵としてまとめると 下のようになります。
marginとpadding
backgroundは文字通り枠内の背景色を指定します。




【ブログテンプレートの見方】

さて ブログを始める場合、自分でブログ全体のレイアウトを作るのは 結構大変です。
ですから、テンプレートという雛形を使うと楽チンなわけです。ブログをやってる方は当然知ってますよね~(^o^)
で、テンプレートにはカスタマイズつまり改造してもOKだよと太っ腹な作者さん作成のものも多くあります。
ちょこっと改造すると世界にひとつしかない貴方だけのブログテンプレートが出来上がります。

また記事内にDIVを使用したり、左右サイドにDIVを使うと見栄えが良くなります♪(^o^)

で!!DIVを使うときに width 何pxまでOKなのか?
記事に入れる画像の横幅は 何pxが限界なのか?
テンプレートで指定されている横幅widthを拡げることはできるのか?
などなど、謎は深まるばかりです(笑)



では、まず始めにテンプレートの見方からはじめましょうね♪

ちなみに これからお話しする内容は、このブログ「電脳商店街」のfc2のテンプレートを基準としています。多少の違いは読み替えてくださいね(^o^)

管理室に入るとテンプレートの設定というページを開いてみてください。
HTML編集』と『スタイルシート編集』の2つがあると思います。
HTML編集は通常のホームページ作成と同じ感覚です。
で、スタイルシートとは 今まで述べてきたDIVの中の詳細指定命令 style="~" をHTMLでいちいち記述すると膨大な記述が必要になるためスタイル集としてまとめたものです。
インターネットエクスプローラなどのブラウザはまずスタイルシートを読み込んで全体のレイアウトを把握しそれからHTMLを読み込むという手順です。

ですから横幅などの重要な事柄はすべてスタイルシートに記述されています。
そうです!!敵は本能寺・・・じゃなくてスタイルシートだぁ(*^▽^*)

さて残念なことに本日はお時間となりましたので、スタイルシートの見方は次回に・・・(^o^;;;;
(なんか肝心なことはいつも次回まわしだなぁ(~~;; また見に来いということかぁ?(~~;;  )


・・・いろいろ ご不満もおありでしょうが
ここはひとつ広い心でブログ村をクリックして応援してね(^^ゞ



ANAの旅行サイト【ANA SKY WEB TOUR】

DHCオンラインショップ
コメント
この記事へのコメント
marginのリクエストをありがとうm(_ _)m
このスタイルシート形式は、かなりの設定が細かくできるから、自分のHPも出来るだけこれだわ(^-^)
2010/03/15(月) 20:44 | URL | sato #yO1iM8Dw[ 編集]
satoさん こんばんわ~♪
ありがとうなんてとんでもないです(^o^)
こちらこそ ネタを提供いただいてありがとうございます(^^ゞ
marginはcssで重要なファクターですよね(^o^)
おおっ!satoさんの日本アルプスの情景はcssでしたか♪
わたしの猫でも出来るインターネットもcss使ってます(^o^)
が・・時々IEが文字サイズ読み間違えることがあるみたい??(^^ゞ
2010/03/15(月) 22:54 | URL | 大入店長 #b48Tu8kg[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
今日は暖かいと言うより暑かったですね!
なんだぁ~ちゃんと更新してるじゃないですか♪
さすがパソコン先生ですね^^ふむふむw
2010/03/16(火) 23:19 | URL | なお #-[ 編集]
なおさん こんばんわ~♪
昨日は暖かで今夜は寒いですぅ(>_<)
なんか気温が暴力的に上下しますね(~~;;
更新・・・ひぃひぃ言いながら更新しました(^^ゞ
最近 更新意欲がわかなくて・・・とほほです(^o^;;
今度の連休中に桜開花しますかね~♪(*^▽^*)
2010/03/17(水) 23:34 | URL | 大入店長 #b48Tu8kg[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
自分も更新意欲がわきません^^;同じくですね(笑)
今日はお子の幼稚園の卒園式に行って来ました。
あっと言う間の3年間でしたよ~

連休中に桜どうですかね、開花してくれると良いですね♪
撮影できますもんね^^
2010/03/18(木) 21:30 | URL | なお #-[ 編集]
なおさん こんばんわ~♪
お子様、幼稚園卒業おめでとうございます(*^▽^*)
子供は成長するのが早いから驚きの日々でしたでしょう♪
更新意欲(笑)・・・なんか来客数も売り上げも増加が乏しくマンネリになってます(~~;;はぁぁめんどくさい(笑)
桜・・・27,28日が狙い目でしょうね~♪やっぱ新宿御苑かにゃあ(^o^;;←これもマンネリ
2010/03/18(木) 23:24 | URL | 大入店長 #b48Tu8kg[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://shop3000.blog110.fc2.com/tb.php/202-e0d0c474
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
<お買い得情報> 一度食べたら病み付きです!超うまいっ!フロム蔵王楽天市場店へGO! 今なら楽天カード作成で、実質無料~2000円引きで、上記商品が購入できちゃいます! 超お得!楽天で2000円分のお買い物ができる楽天カードの申込は下記をクリック!! 楽天市場...
2010/03/15(月) 19:09:25 | ネットでお買い物大好き主婦が気になる最近の話題
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。