おはようございます!
2毛作ですから、お米と、お麦です。
そうなんですよ。だから、田植えが遅いんです。

今日は、プチ講座の続きですね。§^。^§
楽しみだわぁ!!! (2003/06/15 05:35:14 AM)

GT-ONE 楽天タグ講座 パイプ奮闘記

Freepage List

【写真集】


■ 玄関 ■ 


■プチ講座MENU


【日記の雛形・罫線】


【もう一つのプロフィール】


■【おもしろタグ教室MENU】


バナーって何!


プレート教室VOL.1


プレート教室VOL.2


アニメGIF製作VOL.3


画像


アップロードとは  


アイコンの使い方!


壁紙の使い方!


【バナー&プレート置き場】


.    


.      


.    


  


.


【壁紙チェンジャー】


【リンク集】


   


.   


     


.         


【キリ番】


   


  


   


  


  


  


  


  


  


 


  


  


  


マーキー


グラデーションフォント 


色々なスクロール1


色々なスクロール2


色んなスクロール3


  


   


【カラーサンプル】カラーコード表


【カラーサンプル】カラーネーム表


(*mm)   


!  


スクロールを消す


  


  


TABLEでページ一覧を隠す


.


φ(..)


.


スイッチで表示


【日記リンクの皆様】 


( ̄‥ ̄)=3 フン


      


 


           


■【HPの飾り付け教室MENU】


   


TABLEで整理整頓  


アニメGIFって何!


      


画像を貼り付けてみよう


リンクを貼って見よう


楽天での壁紙について


壁紙の位置指定


 


【飾付VOL10】


test


雛形1


Rum Rose


remon


【My PIPE Collection】


【マイ パイプ コレクション001~010】


【マイ パイプ コレクション011~020】


【マイ パイプ コレクション021~030】


【マイパイプ コレクション #31~#40】


レストアの仕方


2003/06/14
XML
カテゴリ: カテゴリ未分類



    【初心者のためのプチ講座VOL.18】 ■■■■■■■■■■■■■■■■■
    以前【日記でボックスを使う】と【ボックスの属性と雛型】で
    日記でのボックスの使い方を紹介しました。

     最近、日記のページで
     このようなボックスを
     よく拝見します。
     これはどのように
     やっているのでしょうか?
     これは枠の幅を
     広くしているだけなのです。



    今回は、最近よく日記で見かけるボックスをやってみましょう。
    あれは、ボックスの枠の形状、色を変えているのです。
    そのボックスをまたボックスの中に入れています。
    こんな風です。簡単に表示しますと!(=^_^=)


     こんな枠を使っている人
     もいますよね。




     一番上のボックスの中に
     二番目のボックスを
     入れますと
     こんな風になります。


    では、枠の幅、枠の形状、枠の色を指定する属性のタグと
    それの雛型を載せてみましょう。

    まずは、基本のタグを書いて見ます。スタイルシートを指定するのは
    <div> タグでやります。

    またまた、↑上のボックスの中に
    一番上のボックスを入れますと
    こんなのが出来ます。
     ☆⌒(@^-゜@)v



    ↓これが基本のタグでしたよね。


    <div style=" border-style:(枠の形状) ; border-width:(枠の幅) ; background:(背景の色) ; color:(枠の色) ; width:(ボックスの幅); height:(ボックスの高さ) ">
      ここに、本文を書きます。
    </div>


    では、判りやすいように雛形を載せてみますが
    枠の形状 以外は全て同じにします。
    border-width:(枠の幅) は、10PXに統一します。
    background:(背景の色) は、WHITE にします。
    color:(枠の色) は、すべてdeeppink にします。
    width:(ボックスの幅); height:(ボックスの高さ) は、
    幅が100% 高さは 100PX にします。



    <div style=" border-style:none ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    枠が出ませんが、出しています。
    </div>






    <div style=" border-style:dotted ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:dashed ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:solid ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:double ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <B style=" border-style:groove ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:ridge ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:inset ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:outset ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>






    <div style=" border-style:dotted double ;border-width:10px;background:white; color:deeppink; width:100%; height:100px;">
    ここに、本文を書きます。
    </div>



    どうでしょう。枠の形状は分かったでしょうか?
    続きは明日にでも・・・(*^^)v
    ではでは・・・(*^_^*)
    【プチ講座メニュー】 は←こちらから! 






お気に入りの記事を「いいね!」で応援しよう

Last updated  2004/09/04 06:55:04 PM
コメント(5) | コメントを書く


■コメント

お名前
タイトル
メッセージ
画像認証
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


Re:【ボックスの中にボックス!ボックスの枠を(6/14)  
こんにちは!
今回のタグ講座も楽しいですね。

今日明日は、田植えで、ちょっと忙しいです。
gtoneさんもお仕事ですね。 (2003/06/14 05:21:45 PM)

Re:【ボックスの中にボックス!ボックスの枠を(6/14)  
ヨタママ  さん
▼o・_・o▼コンバンワン♪

キシクモ!?今日のヨタママの日記は!なんとワクにワクでした~。。。
えっと~。文字にシャドーのタグがぁ、どっかこの辺にしまっておいたような…(^^;

探してこようっと!!
あ、また後でね~イヒヒ(^^)
(2003/06/14 06:45:21 PM)

Re:【ボックスの中にボックス!ボックスの枠を(6/14)  
櫻香  さん
こんばんは
昨夜は夜中までタグと格闘して(苦笑)やっとこさ
希望の形にアップできたのですよぉ~
飲み込みが悪いというか・・・
また少しづつ理解を深めに寄らせていただきますね
ではでは おやすみなさい~☆ (2003/06/15 01:11:45 AM)

Re:【ボックスの中にボックス!ボックスの枠を(6/14)  

Re:【ボックスの中にボックス!ボックスの枠を(6/14)  
30000番、狙ってくださいね~♪

私は、プチ講座で、お勉強しま~す。
ジィも、どんどん、更新して、初心者のレベルアップに、貢献して下さいね!!(o^-^o) ウフッ (2003/06/15 11:42:34 AM)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

×

Profile

gtone

gtone

Calendar

Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: