差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

次のリビジョン
前のリビジョン
webp:vol2 [2016/03/27 07:58]
katsubemakito 作成
webp:vol2 [2017/12/14 20:18] (現在)
ライン 1: ライン 1:
 ====== Code002: HTMLとは何か!(前編) ====== ====== Code002: HTMLとは何か!(前編) ======
 +~~socialite~~
 +
 +<note important>​この記事は2001年に書かれた物です</​note>​
  
 <​html><​pre style="​font-family:​monospace;​ font-size:​10pt">​ <​html><​pre style="​font-family:​monospace;​ font-size:​10pt">​
ライン 13: ライン 16:
            ​▼等幅フォントでご覧いただくとキレイに見えます。            ​▼等幅フォントでご覧いただくとキレイに見えます。
            ​▼登録・解除はこちらから可能です。            ​▼登録・解除はこちらから可能です。
-               http://​www.ichikoro.com/​webp/ ​>+               &​lt; ​http://​www.ichikoro.com/​webp/ ​&gt;
                   ※バックナンバーへのリンクもあります。                   ※バックナンバーへのリンクもあります。
                   ※お友達にもぜひお勧めください(^^)/​                   ※お友達にもぜひお勧めください(^^)/​
ライン 46: ライン 49:
 お気軽にメールをください(^ ^)/ お気軽にメールをください(^ ^)/
 こちらまでどうぞ こちらまでどうぞ
-    ​mailto:​mm-webp@ichikoro.com ​>+    ​&​lt; ​mailto:​mm-webp@ichikoro.com ​&gt;
  
  
ライン 66: ライン 69:
 章に「ここからここまではこれ」という印をつけていきます。 章に「ここからここまではこれ」という印をつけていきます。
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD>+        ​&lt;HEAD&gt;
         ​         ​
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY>+        ​&lt;BODY&gt;
         ​         ​
         ​         ​
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 大なり小なりの等符号で英字を囲んだもの 大なり小なりの等符号で英字を囲んだもの
  
-    ​<名前>+    ​&lt;名前&gt;
  
 これを“タグ”と呼びます。タグには様々な種類があり、例えば文字の色やサイズを これを“タグ”と呼びます。タグには様々な種類があり、例えば文字の色やサイズを
ライン 85: ライン 88:
 そして、始まりを指定したら必ず終わりはどこかを指定しないといけません。 そして、始まりを指定したら必ず終わりはどこかを指定しないといけません。
  
-    ​</名前>+    ​&lt;/名前&gt;
  
 その際は、スラッシュ(/​)をつけてここまでという指定をします。 その際は、スラッシュ(/​)をつけてここまでという指定をします。
 つまり つまり
  
-   <名前 ~  </名前>+   &lt;名前&​gt; ​ 〜  &lt;/名前&gt;
  
 で、一つの組み合わせになります。 で、一つの組み合わせになります。
ライン 121: ライン 124:
 というわけで、上のサンプルにちょっと書き足してみました。 というわけで、上のサンプルにちょっと書き足してみました。
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>HEADの中で指定したタイトル</TITLE> +            ​&lt;TITLE&gt;HEADの中で指定したタイトル&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY>+        ​&lt;BODY&gt;
         ​         ​
             BODYのなかに書いた文章です。             BODYのなかに書いた文章です。
         ​         ​
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
     ・TITLEタグ     ・TITLEタグ
ライン 141: ライン 144:
 確認してみてください。 確認してみてください。
  
-また、タグの大文字小文字は同一視されます。つまり ​<HTMLと <htmlは同じ意味+また、タグの大文字小文字は同一視されます。つまり ​&lt;HTML&​gt; ​と &lt;html&​gt; ​は同じ意味
 になります。また、半角スペースやタブ、改行などは表示されずに無視されますので、 になります。また、半角スペースやタブ、改行などは表示されずに無視されますので、
 どこからどこまで囲っているかを分かりやすくするため、サンプルのようにインデン どこからどこまで囲っているかを分かりやすくするため、サンプルのようにインデン
ライン 169: ライン 172:
 スを記述したい場合はどうすればいいのでしょうか? スを記述したい場合はどうすればいいのでしょうか?
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>改行のテスト 1</TITLE> +            ​&lt;TITLE&gt;改行のテスト 1&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY>+        ​&lt;BODY&gt;
             な、なんてことだ。             な、なんてことだ。
             まさか改行されないなんて( ゜_゜;)             まさか改行されないなんて( ゜_゜;)
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 上のサンプルをブラウザで確認してみてください。 上のサンプルをブラウザで確認してみてください。
 やはり改行されません。そこで、 やはり改行されません。そこで、
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>改行のテスト 2</TITLE> +            ​&lt;TITLE&gt;改行のテスト 2&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY> +        ​&lt;BODY&gt; 
-            な、なんてことだ。<BR>+            な、なんてことだ。&lt;BR&gt;
             まさか改行するタグがあるなんて( ゜_゜;)             まさか改行するタグがあるなんて( ゜_゜;)
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 を実行してみてください。 を実行してみてください。
ライン 225: ライン 228:
 例を紹介します。 例を紹介します。
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>半角スペースのテスト 1</TITLE> +            ​&lt;TITLE&gt;半角スペースのテスト 1&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY> +        ​&lt;BODY&gt; 
-            半角スペースはここから→&​nbsp;​←ここまでです。 +            半角スペースはここから→&​amp;nbsp;​←ここまでです。 
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 上のサンプルを実行してみてください。 上のサンプルを実行してみてください。
 お分かりの通り、ポイントは お分かりの通り、ポイントは
  
-    &nbsp;+    &amp;nbsp;
  
 の部分です。 の部分です。
 HTMLにはあらかじめ、予約された特別なキーワードがいくつかあります。 HTMLにはあらかじめ、予約された特別なキーワードがいくつかあります。
  
-    &​キーワード;​+    &amp;キーワード;​
  
 とすると、実際に表示される際に別の文字に置き換わります。 とすると、実際に表示される際に別の文字に置き換わります。
-つまり上の例で行くと&​nbsp;​と書いた場合、実際に表示される時は半角スペースに置+つまり上の例で行くと&​amp;nbsp;​と書いた場合、実際に表示される時は半角スペースに置
 き換わる、といった具合です。 き換わる、といった具合です。
  
 これが特に活躍するのはタグを表示するときです。 これが特に活躍するのはタグを表示するときです。
  
-    ​<BR>+    ​&lt;BR&gt;
  
 と表示したい場合、どうすればいいでしょうか? と表示したい場合、どうすればいいでしょうか?
ライン 256: ライン 259:
 そこで、下記のようにします。 そこで、下記のようにします。
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>BRタグを表示する</TITLE> +            ​&lt;TITLE&gt;BRタグを表示する&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY> +        ​&lt;BODY&gt; 
-            &​lt;​BR&​gt;​ +            &amp;lt;BR&amp;gt; 
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 つまり、 つまり、
  
-    &​lt; ​ →  ​< +    &amp;lt;  →  ​&lt; 
-    &​gt; ​ →  ​>+    &amp;gt;  →  ​&gt;
  
 となるわけです。 となるわけです。
ライン 276: ライン 279:
 また他にも また他にも
  
-    &​quot; ​ →  " +    &amp;quot;  →  " 
-    &​amp; ​  ​→ ​ & +    &amp;amp;   ​→ ​ &amp; 
-    &​copy; ​ →  (C)  ←表示されない環境もあります。+    &amp;copy;  →  (C)  ←表示されない環境もあります。
  
 と言ったような感じで、いくつも存在しています。 と言ったような感じで、いくつも存在しています。
ライン 287: ライン 290:
 ここではキーワードで表示できるとお話しましたが、 ここではキーワードで表示できるとお話しましたが、
  
-    &nbsp;+    &amp;nbsp;
  
 は、 は、
  
-    &#160;+    &amp;#160;
  
 と記述することも可能です。 と記述することも可能です。
 つまり、 つまり、
  
-    &​キーワード;​ +    &amp;キーワード;​ 
-    &#​数値;​+    &amp;#数値;
  
 の2種類の書き方があります。 の2種類の書き方があります。
 というわけで、 というわけで、
  
-      &lt; &#​60; ​ →  ​< +      &amp;lt; &amp;#60;  →  ​&lt; 
-      &gt; &#​62; ​ →  ​> +      &amp;gt; &amp;#62;  →  ​&gt; 
-    &quot; &#​34; ​ →  " +    &amp;quot; &amp;#34;  →  " 
-     &​amp;​ &#​38; ​ →  & +     &amp;amp; &amp;#38;  →  &amp; 
-    &copy; &#169; →  (C)  ←表示されない環境もあります。+    &amp;copy; &amp;#169; →  (C)  ←表示されない環境もあります。
  
 のようになります。 のようになります。
ライン 322: ライン 325:
         上記の例で言うと、         上記の例で言うと、
  
-            半角スペースはここから→&​nbsp;​←ここまでです。+            半角スペースはここから→&​amp;nbsp;​←ここまでです。
  
         の部分を         の部分を
ライン 335: ライン 338:
         という場合に         という場合に
         ​         ​
-            This&​nbsp;​is&​nbsp;​a&​nbsp;​pen!+            This&amp;nbsp;​is&​amp;nbsp;a&amp;nbsp;pen!
         ​         ​
         何て事にならないようにとの配慮だと思います。         何て事にならないようにとの配慮だと思います。
         ですが、         ですが、
         ​         ​
-            半角スペースはここから→&​nbsp;&​nbsp;&​nbsp;&​nbsp;&​nbsp;​←ここまでです。+            半角スペースはここから→&​amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;​←ここまでです。
         ​         ​
         と、         と、
ライン 368: ライン 371:
 それぞれのタグには、細かい指定が出来るようになっています。 それぞれのタグには、細かい指定が出来るようになっています。
  
-    ​<HTML> +    ​&lt;HTML&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLE>背景色をつけてみよう!</TITLE> +            ​&lt;TITLE&gt;背景色をつけてみよう!&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY bgcolor="​Blue"​>+        ​&lt;BODY bgcolor="​Blue"​&gt;
         ​         ​
-            藍は青より出でて青より青し?<BR>+            藍は青より出でて青より青し?&lt;BR&gt;
             違ってそうやなぁ...(^^;​             違ってそうやなぁ...(^^;​
         ​         ​
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
 上記を実行すると背景が青くなると思います。 上記を実行すると背景が青くなると思います。
 これは これは
  
-    ​<BODY bgcolor="​Blue"​>+    ​&lt;BODY bgcolor="​Blue"​&gt;
  
 がポイントです。 がポイントです。
ライン 394: ライン 397:
 つまりタグは、 つまりタグは、
  
-    ​<タグ名>+    ​&lt;タグ名&gt;
  
 という書き方だけではなく という書き方だけではなく
  
-    ​<タグ名 属性名="​値"​>+    ​&lt;タグ名 属性名="​値"​&gt;
  
 という具合に書くことができます。 という具合に書くことができます。
ライン 404: ライン 407:
 に正確に言うと、 に正確に言うと、
  
-    ​<タグ名 属性名1="​値"​ 属性名2="​値"​ 属性名3="​値"​ ..... 属性名n="​値"​>+    ​&lt;タグ名 属性名1="​値"​ 属性名2="​値"​ 属性名3="​値"​ ..... 属性名n="​値"​&gt;
  
 ということになります。 ということになります。
ライン 423: ライン 426:
 その一例をご紹介します。 その一例をご紹介します。
  
-    ​<HTML lang="​ja"​> +    ​&lt;HTML lang="​ja"​&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLEBODYタグで遊ぼう! ​</TITLE> +            ​&lt;TITLE&​gt; ​BODYタグで遊ぼう! ​&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY bgcolor="​Black"​ text="​White"​ background="​sample.gif"​> +        ​&lt;BODY bgcolor="​Black"​ text="​White"​ background="​sample.gif"​&gt; 
-            うん、バックが黒だと<BR>+            うん、バックが黒だと&lt;BR&gt;
             ちょっとアダルトな感じですねぇ(^^;​             ちょっとアダルトな感じですねぇ(^^;​
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
  
ライン 495: ライン 498:
         実際の指定は         実際の指定は
         ​         ​
-            ​<BODY bgcolor="#​99FFFF"​>+            ​&lt;BODY bgcolor="#​99FFFF"​&gt;
         ​         ​
         のようになります。         のようになります。
ライン 508: ライン 511:
  
     ■とほほの色入門・色見本     ■とほほの色入門・色見本
-<​!--__TAG_ON__--> ​     ​&​lt; ​<A href="​http://​tohoho.wakusei.ne.jp/​wwwcolor.htm"​>http://​tohoho.wakusei.ne.jp/​wwwcolor.htm</A&gt;+      &​amp;​lt; ​&lt;A href="​http://​tohoho.wakusei.ne.jp/​wwwcolor.htm"​&gt;http://​tohoho.wakusei.ne.jp/​wwwcolor.htm&lt;/A&gt; &amp;gt;
  
 がお勧めです。 がお勧めです。
ライン 632: ライン 635:
 background属性ですが、 background属性ですが、
  
-       ​background属性: +&​gt; ​       ​background属性: 
-           ​ここで指定した画像が、背景画像として用いられます。 +&​gt; ​           ​ここで指定した画像が、背景画像として用いられます。 
-           ​正確には画像ファイルのある“場所”を指定します。+&​gt; ​           ​正確には画像ファイルのある“場所”を指定します。
  
 とあります。 とあります。
ライン 669: ライン 672:
 送信先は、 送信先は、
  
-     mailto:​mm-webp@ichikoro.com ​>+     &​lt; ​mailto:​mm-webp@ichikoro.com ​&gt;
  
 になります。 になります。
ライン 684: ライン 687:
                     発  行 : ichikoro.com                     発  行 : ichikoro.com
                 発行責任者 : 勝部 麻季人                 発行責任者 : 勝部 麻季人
-                              ​mailto:​katsube@ichikoro.com ​>+                              ​&​lt; ​mailto:​katsube@ichikoro.com ​&gt;
                   発行部数 : 1088部(前回)                   発行部数 : 1088部(前回)
-                 ​Webサイト : http://​www.ichikoro.com/​webp/ ​> +                 ​Webサイト : &​lt; ​http://​www.ichikoro.com/​webp/ ​&gt; 
-            お問い合わせ先 : mailto:​mm-webp@ichikoro.com ​>+            お問い合わせ先 : &​lt; ​mailto:​mm-webp@ichikoro.com ​&gt;
  
                             Powerd by まぐまぐ                             Powerd by まぐまぐ
ライン 697: ライン 700:
                           一緒にCGI極めませんか?                           一緒にCGI極めませんか?
  
-                   http://​www.ichikoro.com/​cgi/​ml/ ​>+                   &​lt; ​http://​www.ichikoro.com/​cgi/​ml/ ​&gt;
                                                     Produced by ichikoro.com                                                     Produced by ichikoro.com
 -------------------------------------------------------------------【PR】--- -------------------------------------------------------------------【PR】---
 +
 +
 </​pre></​html>​ </​pre></​html>​
 +{{tag>​Webプログラミング HTML}}
 +~~socialite~~
 +