◆ ブログ・HPちょこ技 ◆

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

 
発掘!激安「訳あり」アイテム 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オンラインショップ
スポンサーサイト
知って得するブログちょこ技♪ 1
第1回 すごく便利なDIV (*^▽^*)


またまた新シリーズ登場です(笑)(^^ゞ

このシリーズでは、理論とか理屈無しで ブログやホームページ(HP)にすぐお役に立つ便利な小技をご案内しようと思います。いわば実践編です(^o^)

まず第1回目はブログやHPの見た目をきれいにするチョコ技、DIVタグの使い方です。
細かいところまで、いろいろ指示できる優れものですから、是非マスターしましょう。

ホームページビルダーなどで実践する場合は『HTMLソース』のところで編集してくださいね。

また表記したタグをコピペして使うときは 一旦メモ帳に貼り付けて、それをコピペしなおしてからブログ等に貼り付けて編集してください。そうしないと文字化けしますよぉ(>_<)ぎゃぁぁ


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



【DIVタグ】

これ自体に重要な意味はないのです。なぜならこのタグは梱包タグだからです。ま、包装紙みたいなものね(笑)
ボックス(箱)とかブロックと意味づけている人も多いですね。
<DIV>~</DIV>で囲んだ範囲が1つの梱包です。
ブログのお役立ち小技では一番重要なタグとなります。

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

記 述 表示 (見た目)
【例 1】
<div>
おほほほほ(*^▽^*)
</div>
おほほほほ(*^▽^*)
これは何のスタイル指定もしていないので透明な包装紙で包んだようなものです。

【例 2】
<div style="font-size: 16px;">
おほほのほ(*^▽^*)
</div>
おほほのほ(*^▽^*)
文字サイズをスタイルで指定したものです。
divの後ろに半角1個以上のスペースを空けて style="~"のように記述します。
この場合は文字サイズ16pxを指定しています。

【例 3】
<div style="font-size: 16px; color:#ff0000; line-height: 1.5;">
おほほのほ(*^▽^*)
<br>
えへへのへ(^^ゞ
</div>
おほほのほ(*^▽^*)
えへへのへ(^^ゞ
文字サイズと文字色と 行間を指定しました。
小説や評論など文字が多いサイトでは行間を0.5文字分以上開けることをお勧めします。
line-height: 1.5;で行間0.5文字分あきます。line-height: 2.0;とすると1文字分です。
"~"の間のスタイル項目は何個でも指定できます。項目と項目の間は ; で
区切ってください。その間の半角スペースは入れても入れなくてもOKですが、見やすいように半角スペースを入れてます。
項目はみんな『 XXXXXX : aaaaaa ; 』というように :(コロン) と ;(セミコロン)で1セットとなっています。

【例 4】
<div style="font-size: 16px; color:#ff0000; line-height: 1.5; border:1px solid #0000ff; width: 240px;">
おほほのほ(*^▽^*)
<br>
えへへのへ(^^ゞ
</div>
おほほのほ(*^▽^*)
えへへのへ(^^ゞ
今度は枠をつけてみました♪
border:1px solid #ff0000;というスタイル項目が記述されてますね。
これはborderつまり線、1pxとは線の太さ solidとは線種は実線という意味
#0000ffは線の色は青ということです。
width: 240px; これは梱包つまりは枠の幅です。
#ff0000などという16進法の色見本はこちらでサンプルが見れます。



いかがでしたか?(*^▽^*) まずは取っ掛かり編です。
次回は主にこの枠線を生かしてブログの左右サイドを見栄えよくきちんと整理整頓します。
その為に背景色・文字間・上下左右個別DIV内余白・上下左右個別DIV外余白のとり方などなどもご案内します。 さらにブログのテンプレートの読み方も・・・
すぐに実戦で使えますよ(^o^)

なんか久々に役に立つ情報を載せたって感じね~♪ というごく少数の意見に
賛同される方もされない方もブログ村をクリックして応援してね(^^ゞ


ホワイトデーの贈り物

女性がもらってうれしいホワイトデーの贈り物

Loveの文字が愛の絆をしっかり結び付けます。

オンワード樫山公式ショッピング通販サイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。