----------
<---------- ここから ---------->
「ソースコードを記載するエリア」
----------
<blockquote> ここに、ソースを貼ります。テキストエリア00
</blockquote>
<---------- ここまで ---------->
----------
----------
----------
<---------- ここから ---------->
「ソースコードを記載するエリア」
----------
<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とは何か」に書いてある。
色の早見表
- フォントカラー早見表
- オーバーフローに関するスタイルシート属性
スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。
- overflow: scroll (ソースコード)
<---------- ここから ---------->
<div style="overflow: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</div>スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。<---------- ここまで ---------->
- 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; "><div style="<strong>overflow: auto</strong>; width: 150px; height: 80px; border: 1px solid">スタイルシート属性 overflow:領域をはみ出した要素の扱いを指定する。</div></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


コメントを書く場合はログインしてください。