<< 2012年02月
12345
6789101112
13141516171819
20212223242526
272829

「ソースコードを記載するエリア」- web

2012/02/15 11:32

 

 

----------

 

<---------- ここから ---------->

 

「ソースコードを記載するエリア」 

 

----------

<blockquote>  ここに、ソースを貼ります。テキストエリア00
</blockquote>

 

<---------- ここまで ----------> 

----------

   説明: background-color: #F0F8FF; /* ***** ***** */ border: 1px solid #d7d7d7; /* **** **** */ padding: .25em; margin: 1em 1.75em; 

 

 

----------

 

 

----------

 

<---------- ここから ---------->

「ソースコードを記載するエリア」 

----------

<blockquote>  ここに、ソースを貼ります。テキストエリア
</blockquote>

 

<---------- ここまで ----------> 00000

 

ソースコードの説明

 

<pre style="line-height: normal; background-color: rgb(240, 248, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; overflow-x: auto; overflow-y: auto; padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; width: 537px; "><font color="#1100CC">

 

 

  • <pre>  </pre>
    pre は、PREformatted text(整形済みテキスト) の略。ソース中のスペースや改行をそのまま表示する。ソースコードなどを表示するのに便利。
     
  • <pre style=" "> 
    style=" " で、スタイルシート属性の指定をする。
     
  • line-height: normal;   
    line-heightプロパティは、行ボックスの最小の高さ (行の高さ) を指定する。
     
  • background-color: rgb(240, 248, 255);
     
  • border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px
    ボーダー(枠線): 枠線の幅、枠線の太さ
     
  • border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;
    ボーダー(枠線): 枠線のスタイル、solid (実線) 
     
  • border-top-color: rgb(215, 215, 215); border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215);
    ボーダー(枠線): 枠線の
     
  • margin-top: 1em; margin-right: 1.75em; margin-bottom: 1em; margin-left: 1.75em; 
    マージンはボーダーの外側の余白、パディングはボーダーの内側の余白。
     
  • overflow-x: auto; overflow-y: auto;
     
  • padding-top: 0.25em; padding-right: 0.25em; padding-bottom: 0.25em; padding-left: 0.25em; 
    マージンはボーダーの外側の余白、パディングはボーダーの内側の余白。
     
  • width: 537px;
     
  • <font color="#1100CC">
    上記のフォントカラー (#1100CC), (1100CC) 

 

 

 

----------

 

  参考サイト

  • <pre> - 整形済みテキスト  
     
  • 行・ラインボックス - line-heightプロパティ + normal - CSSプロパティの詳細とデモ | ねこだまのCSSリファレンス&デモ 
    line-height: normal 
    こちらのサイトでは、サンプルのブラウザ動作デモで使われている値を変更して確認ができる。 
     
  • background-color-スタイルシートリファレンス
    background-color: rgb(240, 248, 255)  aliceblue 
    background-colorプロパティは、背景色を指定する。 背景色を指定する時には、同時に文字色も指定するようにする。
     
  • RGB Color Chart  

                    AliceBlue (240, 248, 255)
     
  • SVG学習辞典  
    SVGとはScalable Vector Graphic(スケーラブルベクターグラフィックス)の略である。XML形式であり、拡大縮小しても劣化しないグラフィック画像文書である。詳しくは「SVGとは何か」に書いてある。

    色の早見表  
     
  • フォントカラー早見表  

 

 

 

  1. overflow: scroll (ソースコード) 

    <---------- ここから ----------> 

    <div style="overflow: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</div>

     

    スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。 

     

     

     

    <---------- ここまで ---------->
     

  2. overflow: auto 


    <---------- ここから ----------> 

    <div style="overflow: auto; width: 150px; height: 80px; border: 1px solid">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</div>

    例  

    スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。

     

    <---------- ここまで ----------> 

     
    ----------
    <p style="margin-top: 0px; margin-bottom: 0px; width: 150px; height: 80px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; overflow-x: auto; overflow-y: auto; font-family: verdana, arial, helvetica, 'MS Pゴシック'; font-size: 14px; ">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</p>
    ----------

    例 

    <---------- ここから ----------> 

    <div style="overflow: auto; width: 150px; height: 80px; border: 1px solid">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</div>

     上記のソースコードの説明   
    背景色:background-color: rgb(238, 238, 238);
    フォントの指定:font-family: monospace, 'MS ゴシック';
    フォントのサイズと色:font-size: 14px; color: rgb(51, 51, 51);
    行間 (行の高さ):line-height: 21px; 
    使用していない:overflow-x: auto; overflow-y: auto;
    ----------上記のソースコード---------- 

    <div class="samp" style="background-color: rgb(238, 238, 238); font-family: monospace, 'MS ゴシック'; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; padding-top: 5pt; padding-right: 5pt; padding-bottom: 5pt; padding-left: 5pt; font-size: 14px; color: rgb(51, 51, 51); line-height: 21px; ">&lt;div style=&quot;<strong>overflow: auto</strong>; width: 150px; height: 80px; border: 1px solid&quot;&gt;スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。&lt;/div&gt;</div>
    ---------- 
    例 

    スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。

     

    <---------- ここまで ---------->    
    上記のソースコード の説明  
    背景色:background-color: rgb(240, 248, 255);
    領域間のスペース:margin-top: 0px; margin-bottom: 0px;
    幅と高さの指定:width: 150px; height: 80px; 
    ボーダー(枠線):border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
    使用している:overflow-x: auto; overflow-y: auto; 
    フォント:font-family: verdana, arial, helvetica, 'MS Pゴシック';
    フォントサイズ:font-size: 14px;

    ---------- 上記のソースコード---------- 
    <p style=" background-color: rgb(240, 248, 255); margin-top: 0px; margin-bottom: 0px; width: 150px; height: 80px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; overflow-x: auto; overflow-y: auto; font-family: verdana, arial, helvetica, 'MS Pゴシック'; font-size: 14px; ">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</p>
    ---------- 
                               

 

  • <META>-HTMLタグリファレンス  

    <meta></meta> 
    meta は METAinformation(メタ情報)の略。
    <META>タグ:その文書に関する情報 (メタ情報) を指定して、 ブラウザや検索ロボットに知らせるためのタグ。制作者やキーワード等の情報を name属性 で定義して、content属性 でその値を指定する。
    <META>タグは、<HEAD>~</HEAD>間に記述する。 
     
  • とほほのスタイルシート入門   リファレンス  


  • CSS(スタイルシート) margin  
     

 

 

カテゴリ: IT  > インターネット    フォルダ: web

コメント(0)  |  トラックバック(0)

 
 
このブログエントリのトラックバック用URL:

http://puppy.iza.ne.jp/blog/trackback/2598775

トラックバック(0)