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

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

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


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

話題の特集記事

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

オンワード樫山公式ショッピング通販サイト
コメント
この記事へのコメント
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
v-278今日は暖かい日でしたねv-398
何か店長さん、更新頻度が上がってますねv-364
がんばってくださいv-266応援してますからv-218
週末の天気変わらないから雨ですね~
店長さんのコメいつも笑わせてもらってます(笑)
2010/03/05(金) 23:32 | URL | なお #-[ 編集]
なおさん こんばんわ~♪
なんか寒くなってきました(~~;;
もぉぉ暑かったり寒かったり!
いいかげんにしろぉぉ 0(>_<)0 といいたくなりますね。
更新頻度・・・下の海産グルメが私と父親が買った以外売れないので早く下のほうに順送りしたいのです・・(^^ゞ
明日はミゾレだそうなのでおかたずけ大掃除はやめよう(~~;; ← なんか理由をつけてすぐ中止するお馬鹿
2010/03/06(土) 21:58 | URL | 大入店長 #b48Tu8kg[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
水戸行ってたのですね♪今日は寒いっす!
早く下の方に下げたいのですか(爆)
もうwせっかく美味しそうなのに~♪
けど売れないなら売れるの残した方がいいですもんね^^
ぽち完了ですよ~いつもコメントありがとです^^v
2010/03/07(日) 21:21 | URL | なお #-[ 編集]
ブログタイトルに興味津々で遊びに来ました!参考にさせていただきます
2010/03/08(月) 03:24 | URL | yukki #-[ 編集]
こんばんわ~♪
★なおさん こんばんわ~♪
なんか寒い日が続きますね~(>_<)
明日はミゾレだとか・・・(>_<)
春物と冬物2種類の洋服用意しているので部屋中衣類だらけです(笑)
>早く下の方に下げたいのですか
期末決算の入力なんかで忙しくなってきて時間がうまく取れないので
なかなか下のほうに下がりません(^^ゞ

★yukkiさん こんばんわ~♪
ご来訪ありがとうございます(^o^)
後ほどお伺いいたします♪
2010/03/08(月) 23:42 | URL | 大入店長 #b48Tu8kg[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
v-276多摩地区雪積もってますv-364お子が喜んでます^^;
今日はほんと寒いですよね~衣服大変そうですね(笑)
ブログ村も少しずつですが良い感じになってきましたね♪
どうせ積もるなら大雪で関東マヒ状態が理想です(爆)
2010/03/09(火) 20:18 | URL | なお #-[ 編集]
こんばんは
divは、あっしもよく使います。
次回は、style="margin-topあたりなんかどう?
2010/03/09(火) 21:26 | URL | sato #yO1iM8Dw[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
忙しそうですね~
帰り遅いから更新できないのかな?
週末には待ってますよ~♪
2010/03/11(木) 21:49 | URL | なお #-[ 編集]
こんばんわ~♪
★なおさん こんばんわ~♪
雪が降ったり春めいたりとめまぐるしいですね(^o^;;
でも何のかの言っても着実に春に向かってますね♪
高知ではソメイヨシノが開花したとか(^o^)
鎌倉では隠れイチョウが倒れたとか(^o^;;・・・春とは関係ないか(^^ゞ
残業続きで夜はお風呂入ってお食事して寝るだけの日々っす(T_T)
今度の土曜日も半日出勤・・・とほほです(ToT)
でも来週は楽勝ですぅぅ\(^o^)/

★satoさん こんばんわ~♪
ちょっと残業続きでお返事遅くなってすいましぇぇん(>_<)/
div・・・昔はこんなのなかったよね~・・・たしか(^o^;;自信ないけど(笑)
でも使えば使うほど便利なやつですよね(^o^)
はいはい♪
次回はmarginとかpaddingの余白を予定してますぅ(*^▽^*)
2010/03/11(木) 23:24 | URL | 大入店長 #b48Tu8kg[ 編集]
大入店長さんヾ(ゝc_,・。)/こんばんわぁ♪
残業いつもお疲れ様です~
土曜も出勤ですかぁ!
そういう時もありますもんね!がんばってください♪
☆来週待ってますね☆
2010/03/12(金) 21:24 | URL | なお #-[ 編集]
「DIVタグ」は、参考になりました。
2010/03/13(土) 19:25 | URL | カズミ #M8fmrdFo[ 編集]
こんばんわ~♪
★なおさん こんばんわ~♪
残業終わりました(*^▽^*)
しかも明日月曜日は代休ですぅぅ \(^o^)/
・・・ということで今日は更新サボってケーキバイキングに行って来ました(^o^)
食べ過ぎて少し気持ち悪いです(笑)(^^ゞ
いつもありがとうございます♪

★カズミさん こんばんわ~♪
DIVタグ見ていただいてありがとうございます(^o^)
後ほど伺いますね♪
2010/03/14(日) 23:04 | URL | 大入店長 #b48Tu8kg[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://shop3000.blog110.fc2.com/tb.php/201-a300d220
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。