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) | コメントを書く


PR

Profile


gtone

Calendar


Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.