カスタマイズ

HTML「タグ入れ」練習用

角丸の背景を作りましょう。「下記の画像」

DVD関連

文章を選択して、追加オプションを選択して、HTMLの編集を選択して、　下記のタグ入れます。

<div style="padding: 5px 10px; font-weight: bold; background: #ff0000; color: #fff; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;">DVD関連</div>

Jimdo簡単ホームページ作成

インターネット上で簡単にホームページが作れます！

<div style="position: relative; border: 1px solid #cc0000; background: #fffff8; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;">
<p style="display: inline-block; padding: 2px 20px 0px; font-weight: bold; position: absolute; -webkit-box-shadow: 1px 2px 0px #333; -moz-box-shadow: 1px 2px 0px #333; box-shadow: 1px 2px 0px #333; top: -15px; left: 14%; background: #cc0000; color: #ffffff; font-size: 14px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;">Jimdo簡単ホームページ作成</p>
<p style="padding: 20px 10px 10px; color: #333333; font-size: 12px;">インターネット上で簡単にホームページが作れます！</p>
</div>

写真付き文章を選択して、追加オプションを選択して、HTMLの編集を選択して、　下記のタグ入れます。

見出し

<p>見出し</p>

見出し

<p>見出し</p>

趣味でDVDのダビング、再生などしています。

<p style="border: 1px dashed #ff0000; padding: 10px;">趣味でDVDのダビング、再生などしています。</p>

■応用を利かせればこんな表現も出来ます！

写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。

<p><strong>■応用を利かせればこんな表現も出来ます！</strong></p>
<div style="background: #f5fffa; border: 2px dotted #5f9ea0; margin: 10px 10px 10px 50px; padding: 10px; font-size: 90%;">
<p>写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。</p>
</div>

■応用を利かせればこんな表現も出来ます！

写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。

<p><strong>■応用を利かせればこんな表現も出来ます！</strong></p>
<div style="background: #f5fffa; border: 2px dotted #5f9ea0; margin: 10px 10px 10px 50px; padding: 10px; font-size: 90%;">
<p>写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。</p>
</div>

■応用を利かせればこんな表現も出来ます！

写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。

<p><strong>■応用を利かせればこんな表現も出来ます！</strong></p>
<div style="background: #f5fffa; border: 2px dotted #5f9ea0; margin: 10px 10px 10px 50px; padding: 10px; font-size: 90%;">
<p>写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。</p>
</div>

ページの途中にリンクを貼る方法

ページの途中にリンクを貼る方法

■リンク先に

コンテンツの追加で「HTML」

<a name="○○"></a>

名前は半角英数字で、例えば、「photo」

 

■リンクする文字列にドラッグしてリンクを貼ります。

htmlでタグをだしてアドレスの後に、#photo

http://○○○。Jimdo.com/#photo

ページを変えたい時は、

http://○○○。Jimdo.com/会社案内/#photo

 

こちらを参考にさせていただきました。

 

Google の検索窓を作る

Google の検索窓+サイト内検索

Google


<!-- Google  --><form action="http://www.google.co.jp/search" method="get">
<table align="" bgcolor="#ffffff">
<tbody>
<tr>
<td><a href="http://www.google.co.jp/" target="_top"> <img src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" align="absmiddle" border="0" /></a> <input name="q" type="text" size="20maxlength=255" value="" /> <input name="ie" type="hidden" value="UTF-8" /> <input name="oe" type="hidden" value="UTF-8" /> <input name="hl" type="hidden" value="ja" /> <input name="btnG" type="submit" value="Google 検索" /></td>
</tr>
</tbody>
</table>
</form>

YAHOO の検索窓を作る YAHOO の検索窓+サイト内検索

Yahoo! JAPAN


 <!-- Begin Yahoo Search Form -->

<div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;">

<form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;">

<p style="margin:0;padding:0;"><a href="http://www.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/080318/ysearch_logo_85_22.gif" alt="Yahoo! JAPAN" style="border:none;vertical-align:middle;padding:0;border:0;" width="85" height="22"></a><input type="text" name="p" size="20"><input type="hidden" name="fr" value="yssw"><input type="hidden" name="ei" value="Shift_JIS"><input type="submit" value="検索" style="margin:0;"></p>

</form>

</div>

<!-- End Yahoo! Search Form -->

 

 

東大阪から情報発信してみませんか！？「Jimdo」なら簡単！　ここ から　 コピーする

HOME >> HTML > HTMLとタグについて

point　HTMLとタグについて

■ HTMLとは？？

ホームページ（Webページ)は、HTMLというマークアップ言語を使って作られています。HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップランゲージ）の略で、タグというマーク（命令）を使って、HTML文書の構造（ここは見出しでここからは段落など）を指定したり、文字の大きさや色を変えるとか、画像を表示することなどが出来ます。
HTMLを使ってWebページを作る場合、メモ帳などのテキストエディタを使ってタグを記入していきますが、それをHTMLファイルとして保存しブラウザで開くと、タグの指定されたとおりにブラウザに表示されます。

■ タグについて

タグとは<タグ名>の記号で囲まれた半角の英数字のことで、このタグを使ってWebページは作られています。ためしにメニューの「表示」をクリックし、「ソースの表示」を選択してみて下さい。メモ帳が開きたくさんの<　>で囲まれた文字が表示されましたね。この<　>で囲まれているのがタグというものです。
メモ帳に表示されている文字は、もちろん文字の大きさは同じで色もついてないですが、このタグを使って書かれたHTML文書をブラウザで開くと、タグで指定されたとおりに文字の大きさや色を変えて表示することができます。

タグの記入方法ですが、基本的に<開始タグ>と</終了タグ>の２つを1setとして使います。終了タグにはタグ名の前に/（スラッシュ）を付けます。例えばページのタイトルを指定する場合は、
<TITLE>～</TITLE>のように記述します。この後のページで説明しますが、改行を指定する<BR>タグのように、終了タグがないものもあります。

それと、タグは半角英数字（123abc）を使って記入する必要があります。全角文字（１２３ａｂｃ）ではダメです。大文字、小文字どちらでもかまいませんが、一部URL(http://～)や文字コード（&lt;とか）など大文字小文字を区別するものもあります。

■ 属性について

上で説明したタグには、多くの場合属性（アトリビュート）をつけることで、より細かくタグの効果を指定したり、具体的な指示を付け加えることが出来ます。そして属性は、多くの場合に属性値を指定する必要があります。この属性値は基本的に""(ダブルクォーテーション）で囲みます。ただし英数字だけの場合や、一定の記号（_や-）を使用した場合は""を省略できますが、思わぬトラブルが起こらないように、慣れないうちはすべての属性を囲むようにしましょう。なお、属性と属性値は=（イコール）でつなぎます。

ちょっとわかりにくいと思いますので、下の属性と属性値についての記入例を見て下さい。

<FONT color="green">ここに内容</FONT>

背景色■がついているところがタグです。その中に赤色の文字（color）がありますがこれが属性です。そして、属性の後ろにある緑色の文字（green）が属性値です。この例では、文字を修飾する<FONT>タグに文字色を指定するcolor属性をつけて、その属性値にgreenを指定しています。

属性を付ける場合は、必ず半角のスペースを入れて記入します。
また、<FONT size="2" color="green">のように、一つのタグに複数の属性をつけることも出来ます。

 

Webページ作りのお勉強ここからコピーする

HOME >文字の色を指定する

point　文字の色を指定する

■
<FONT color="カラー名かRGB値">～</FONT>
<FONT>タグのcolor属性を使えば、文字の色を指定することが出来ます。
色の指定は、カラー名かRGB値で指定します。
例えば赤色の文字にしたい所があれば、その範囲を<FONT color="red">赤色にしたい範囲</FONT>のようにカラー名で指定するか、<FONT color="#ff0000">赤色にしたい範囲</FONT>のようにRGB値で指定します。

RGB値とは、赤と緑と青の３色それぞれ混ぜる分量を2桁の１６進数（０～９の１０個の数字とa～ｆの６個の英字）を使って指定し、いろいろな色を表現する値のことです。「＃RRGGBB」（＃赤赤緑緑青青）の６桁で表現され、それぞれ１６進数で色を設定できるので、16×16×16×16×16×16=16777216色の色が理論上は表現できます。RBG値で色を指定するときは、6桁の英数字の前に＃(ハッシュマーク）を忘れずに必ずつけましょう。

前のページでは、<FONT>タグにsize属性をつけて文字の大きさを指定しましたが、<FONT>タグにsize属性とcolor属性の二つを指定することで、文字を大きくして色を変えることも出来ます。その場合の記述は<FONT size="4" color="red">～</FONT>のように記述します。size属性とcolor属性の順番はどちらが先でもかまいませんが、二つの属性の間には必ずスペースを入れましょう。

基本的なカラー見本
■ black #000000 ■ gray #808080 ■ silver #c0c0c0 ■ white #ffffff
■ navy #000080 ■ green #008000 ■ lime #00ff00 ■ blue #0000ff
■ teal #008080 ■ olive #808000 ■ yellow #ffff00 ■ aqua #00ffff
■ maroon #800000 ■ purple #800080 ■ magenta #ff00ff ■ red #ff0000
サンプル - Microsoft Internet Explorer
ホーム(H) メニュー(M) 戻る(B) 進む(N)
1.赤色です
2.青色です
3.赤色です
4.青色です
フォントサイズが5で緑色です
ソース
<HTML>
< HEAD>
< TITLE>サンプル</TITLE>
< /HEAD>
< BODY>
< FONT color="red">1.赤色です</FONT><BR>
< FONT color="blue">2.青色です</FONT><BR>
< FONT color="#ff0000">3.赤色です</FONT><BR>
< FONT color="#0000ff">4.青色です</FONT><BR>
< FONT size="5" color="green">フォントサイズが5で緑色です</FONT>
< /BODY>
< /HTML>

Webページ作りのお勉強ここからコピーする

HOME>Color Sample

Color Sample

ホームページで、安心して使える216色のカラーサンプルです。
　 #000000 　 #000033 　 #000066 　 #000099 　 #0000cc 　 #0000ff
　 #003300 　 #003333 　 #003366 　 #003399 　 #0033cc 　 #0033ff
　 #006600 　 #006633 　 #006666 　 #006699 　 #0066cc 　 #0066ff
　 #009900 　 #009933 　 #009966 　 #009999 　 #0099cc 　 #0099ff
　 #00cc00 　 #00cc33 　 #00cc66 　 #00cc99 　 #00cccc 　 #00ccff
　 #00ff00 　 #00ff33 　 #00ff66 　 #00ff99 　 #00ffcc 　 #00ffff


　 #330000 　 #330033 　 #330066 　 #330099 　 #3300cc 　 #3300ff
　 #333300 　 #333333 　 #333366 　 #333399 　 #3333cc 　 #3333ff
　 #336600 　 #336633 　 #336666 　 #336699 　 #3366cc 　 #3366ff
　 #339900 　 #339933 　 #339966 　 #339999 　 #3399cc 　 #3399ff
　 #33cc00 　 #33cc33 　 #33cc66 　 #33cc99 　 #33cccc 　 #33ccff
　 #33ff00 　 #33ff33 　 #33ff66 　 #33ff99 　 #33ffcc 　 #33ffff


　 #660000 　 #660033 　 #660066 　 #660099 　 #6600cc 　 #6600ff
　 #663300 　 #663333 　 #663366 　 #663399 　 #6633cc 　 #6633ff
　 #666600 　 #666633 　 #666666 　 #666699 　 #6666cc 　 #6666ff
　 #669900 　 #669933 　 #669966 　 #669999 　 #6699cc 　 #6699ff
　 #66cc00 　 #66cc33 　 #66cc66 　 #66cc99 　 #66cccc 　 #66ccff
　 #66ff00 　 #66ff33 　 #66ff66 　 #66ff99 　 #66ffcc 　 #66ffff


　 #990000 　 #990033 　 #990066 　 #990099 　 #9900cc 　 #9900ff
　 #993300 　 #993333 　 #993366 　 #993399 　 #9933cc 　 #9933ff
　 #996600 　 #996633 　 #996666 　 #996699 　 #9966cc 　 #9966ff
　 #999900 　 #999933 　 #999966 　 #999999 　 #9999cc 　 #9999ff
　 #99cc00 　 #99cc33 　 #99cc66 　 #99cc99 　 #99cccc 　 #99ccff
　 #99ff00 　 #99ff33 　 #99ff66 　 #99ff99 　 #99ffcc 　 #99ffff


　 #cc0000 　 #cc0033 　 #cc0066 　 #cc0099 　 #cc00cc 　 #cc00ff
　 #cc3300 　 #cc3333 　 #cc3366 　 #cc3399 　 #cc33cc 　 #cc33ff
　 #cc6600 　 #cc6633 　 #cc6666 　 #cc6699 　 #cc66cc 　 #cc66ff
　 #cc9900 　 #cc9933 　 #cc9966 　 #cc9999 　 #cc99cc 　 #cc99ff
　 #cccc00 　 #cccc33 　 #cccc66 　 #cccc99 　 #cccccc 　 #ccccff
　 #ccff00 　 #ccff33 　 #ccff66 　 #ccff99 　 #ccffcc 　 #ccffff


　 #ff0000 　 #ff0033 　 #ff0066 　 #ff0099 　 #ff00cc 　 #ff00ff
　 #ff3300 　 #ff3333 　 #ff3366 　 #ff3399 　 #ff33cc 　 #ff33ff
　 #ff6600 　 #ff6633 　 #ff6666 　 #ff6699 　 #ff66cc 　 #ff66ff
　 #ff9900 　 #ff9933 　 #ff9966 　 #ff9999 　 #ff99cc 　 #ff99ff
　 #ffcc00 　 #ffcc33 　 #ffcc66 　 #ffcc99 　 #ffcccc 　 #ffccff
　 #ffff00 　 #ffff33 　 #ffff66 　 #ffff99 　 #ffffcc 　 #ffffff

Webページ作りのお勉強ここからコピーする

■#F0F8FF
aliceblue 		■#FAEBD7
antiquewhite 		■#00FFFF
aqua 		■#7FFFD4
aquamarine 		■#F0FFFF
azure
■#F5F5DC
beige 		■#FFE4C4
bisque 		■#000000
black 		■#FFEBCD
blanchedalmond 		■#0000FF
blue
■#8A2BE2
blueviolet 		■#A52A2A
brown 		■#DEB887
burlywood 		■#5F9EA0
cadetblue 		■#7FFF00
chartreuse
■#D2691E
chocolate 		■#FF7F50
coral 		■#6495ED
cornflowerblue 		■#FFF8DC
cornsilk 		■#DC143C
crimson
■#00FFFF
cyan 		■#00008B
darkblue 		■#008B8B
darkcyan 		■#B8860B
darkgoldenrod 		■#A9A9A9
darkgray
■#006400
darkgreen 		■#BDB76B
darkkhaki 		■#8B008B
darkmagenta 		■#556B2F
darkolivegreen 		■#FF8C00
darkorange
■#9932CC
darkorchid 		■#8B0000
darkred 		■#E9967A
darksalmon 		■#8FBC8F
darkseagreen 		■#483D8B
darkslateblue
■#2F4F4F
darkslategray 		■#00CED1
darkturquoise 		■#9400D3
darkviolet 		■#FF1493
deeppink 		■#00BFFF
deepskyblue
■#696969
dimgray 		■#1E90FF
dodgerblue 		■#B22222
firebrick 		■#FFFAF0
floralwhite 		■#228B22
forestgreen
■#FF00FF
fuchsia 		■#DCDCDC
gainsboro 		■#F8F8FF
ghostwhite 		■#FFD700
gold 		■#DAA520
goldenrod
■#808080
gray 		■#008000
green 		■#ADFF2F
greenyellow 		■#F0FFF0
honeydew 		■#FF69B4
hotpink
■#CD5C5C
indianred 		■#4B0082
indigo 		■#FFFFF0
ivory 		■#F0E68C
khaki 		■#E6E6FA
lavender
■#FFF0F5
lavenderblush 		■#7CFC00
lawngreen 		■#FFFACD
lemonchiffon 		■#ADD8E6
lightblue 		■#F08080
lightcoral
■#E0FFFF
lightcyan 		■#FAFAD2
lightgoldenrodyellow 		■#90EE90
lightgreen 		■#D3D3D3
lightgrey 		■#FFB6C1
lightpink
■#FFA07A
lightsalmon 		■#20B2AA
lightseagreen 		■#87CEFA
lightskyblue 		■#778899
lightslategray 		■#B0C4DE
lightsteelblue
■#FFFFE0
lightyellow 		■#00FF00
lime 		■#32CD32
limegreen 		■#FAF0E6
linen 		■#FF00FF
magenta
■#800000
maroon 		■#66CDAA
mediumaquamarine 		■#0000CD
mediumblue 		■#BA55D3
mediumorchid 		■#9370DB
mediumpurple
■#3CB371
mediumseagreen 		■#7B68EE
mediumslateblue 		■#00FA9A
mediumspringgreen 		■#48D1CC
mediumturquoise 		■#C71585
mediumvioletred
■#191970
midnightblue 		■#F5FFFA
mintcream 		■#FFE4E1
mistyrose 		■#FFE4B5
moccasin 		■#FFDEAD
navajowhite
■#000080
navy 		■#FDF5E6
oldlace 		■#808000
olive 		■#6B8E23
olivedrab 		■#FFA500
orange
■#FF4500
orangered 		■#DA70D6
orchid 		■#EEE8AA
palegoldenrod 		■#98FB98
palegreen 		■#AFEEEE
paleturquoise
■#DB7093
palevioletred 		■#FFEFD5
papayawhip 		■#FFDAB9
peachpuff 		■#CD853F
peru 		■#FFC0CB
pink
■#DDA0DD
plum 		■#B0E0E6
powderblue 		■#800080
purple 		■#FF0000
red 		■#BC8F8F
rosybrown
■#4169E1
royalblue 		■#8B4513
saddlebrown 		■#FA8072
salmon 		■#F4A460
sandybrown 		■#2E8B57
seagreen
■#FFF5EE
seashell 		■#A0522D
sienna 		■#C0C0C0
silver 		■#87CEEB
skyblue 		■#6A5ACD
slateblue
■#708090
slategray 		■#FFFAFA
snow 		■#00FF7F
springgreen 		■#4682B4
steelblue 		■#D2B48C
tan
■#008080
teal 		■#D8BFD8
thistle 		■#FF6347
tomato 		■#40E0D0
turquoise 		■#EE82EE
violet
■#F5DEB3
wheat 		■#FFFFFF
white 		■#F5F5F5
whitesmoke 		■#FFFF00
yellow 		■#9ACD32
yellowgreen


カラーコード ここからコピーする

■ HTML（HyperText Markup Language）

タグというのは、文字列（テキスト）に対する命令の印です。
タグだけでもそれぞれ意味がありますが、さらに別の性質を付け加えたいときにプロパティ（属性）を使います。基本的にプロパティは値とセットで書きます。正しくは、プロパティと言えば値を含めたものを指し、値だけをプロパティ値と言いますが、ここではわかりやすいように区別して書いています。

 

<font color="blue">悪霊退散！</font>

 

悪霊退散！

 

この場合、タグは<font>～</font>（文字）、プロパティは color="blue"（色は青にしなさい）で、プロパティ値は blue ということになります。

タグってのは「<」と「>」にはさまれた記号で表します。
ふつうのタグは２つ合わせて一人前です。文章の頭とお尻につけてやれば、そのはさまれた文章がどうにかなるってことです。なかには１つでもちゃんと仕事するやつもいます。
こんな感じです。

 

１．<b>腰痛はつらいぞ！</b>
２．<font size="5">腰痛はつらいぞ！</font>
３．<font color="orange">腰痛はつらいぞ！</font>

 

それぞれ、

 

１．腰痛はつらいぞ！

 

文字を太くしなさい。

 

２．腰痛はつらいぞ！

 

文字の大きさを「5」にしなさい。

 

３．腰痛はつらいぞ！

 

文字の色を「オレンジ」にしなさい。

ということになります。

ちなみに「1」と「2」と「3」を合わせると・・・

 

<b><font size="5" color="orange">腰痛はつらいぞ！</font></b>

 

腰痛はつらいぞ！

 

文字を太くして、色を「オレンジ」にして、大きさを「5」にしなさい。

となります。

１つでもちゃんと働いてくれるタグの代表としては

 

１．<br>・・・改行する
２．<hr>・・・線を引く
３．<img src="ファイル名">・・・イメージを表示する

 

などがあります。ついでに説明しちゃうと

改行するっていうのは、画面の幅に関係なく、そこまできたら強制改行するってこと。<br> を入れないと、画面の幅によって自動改行されるし、画面が広ければ文章がいつまでも続いてしまい読みにくくなります。

線は、太さ（size）・長さ（width）・色（color）さらに、配置（align="left または center または right"）を設定することができます。
注）Netscape は色（color）に対応していないみたい＾＾；
例えば、

 

<hr>

 

だけだと、

↑このように、何の飾りもない横線が引かれるだけですが、

<hr size="8" width="300" color="skyblue" align="center">

と書くと、

↑こうなります。

 

画面の真ん中（align="center"）に、太さ8ピクセル（size="8"）、長さ300ピクセル（width="300"）でスカイブルー（color="skyblue"）の線が引けました。
ここで width="300" じゃなくて、画面の幅に対しての比率をパーセントで指定することもできます。
width="50%" って入れれば、画面の幅の50%っていう意味。画面が小さくなれば、線もその分短くなります。

 

<img src="ファイル名"> は、画像や写真といったイメージファイル（**.gif、**.jpgなど）を表示するときに使います。同じフォルダにある場合は、ファイル名を入れるだけでいいけど、ちがうフォルダにある時は、"フォルダ名/ファイル名" となります。
正確に言うと（難しく言うと）、同じ階層にあるファイルを指定するときは "ファイル名" で、リンク元よりリンク先が下の階層にある場合は、"フォルダ名/ファイル名" となります。頭混乱してきましたね。さらに混乱させると、上の階層にある場合は、"../ファイル名" です。正確には、サーバーの場合は「フォルダ」じゃなくて「ディレクトリ」って言うらしいです。そーいえば、Windows 3.1 の頃、そう言ってたような・・・。

 

他のホームページにある画像を使いたいときには、<img src="URL/ファイル名"> と書きます。
URL（Uniform Resource Locator）・・・ホームページ・アドレスのこと。このサイトの URL は http://park16.wakwak.com/~html-css/

■このページに出てきたタグ■

タグ名 プロパティ 値 説明
<b>～</b> － － 太字
<font>～</font> size 1～7 文字の大きさ（１→７の順に大きくなる）
color カラーネーム 文字の色
<br> － － 改行する
<hr> size ピクセル数 罫線の太さ
width ピクセル数 罫線の長さ
％ 罫線の長さ（画面に対する比率）
color カラーネーム 罫線の色
align left 左寄せ（デフォルト）
center 真ん中
right 右寄せ
<img> src URL / ファイル名 イメージファイルを表示

デフォルトというのは、何も指定しない場合の表示です。
<hr> タグでは align="left" がデフォルトになっています。これは、align 属性を指定しなかった場合は左寄せで表示されるという意味です。つまり、左寄せにしたい場合は、align 属性を省略してもいいことになりますね。

 

<hr color="green">

 

<hr color="green" align="left">

 

２つとも同じです。

 Home < 超初心者のためのホームページ作成講座 < HTML講座 < Back < HTML > Next

超初心者のためのホームページ作成講座ここからコピーする

■ HTML タグの続き

もう少し HTML タグについて見ていきましょう。


文章が多いページを作るときに欠かせないのが <p> タグと <div> タグです。これらは文章を１つの塊にするという役割があります。「１つの塊」ってわかりにくいですね。つまり「段落」です。


どちらも、同じ役割ですが、<p>～</p> で挟まれた文章は、その文章の前後（上下）が１行空きます。<div>～</div>で挟まれた文章の前後は空かないので、前の段落とくっつきます。


ちょっとやってみましょう。

 

<p align="left">
< font color="orange">
ある日森の中くまさんに出会った　花咲く森の道くまさんに出会った
</font>
< /p>
< p align="center">
< font color="orange">
くまさんのいうことにゃお嬢さんお逃げなさい
</font>
< /p>
< p align="right">
< font color="orange">
すたこらさっささぁのさぁ　すたこらさっささぁのさぁ
</font>
< /p>

 

ある日森の中くまさんに出会った　花咲く森の道くまさんに出会った

くまさんのいうことにゃお嬢さんお逃げなさい

すたこらさっささぁのさぁ　すたこらさっささぁのさぁ

 

 

<div align="left">
< font color="orange">
ある日森の中くまさんに出会った　花咲く森の道くまさんに出会った
</font>
< /div>
< div align="center">
< font color="orange">
くまさんのいうことにゃお嬢さんお逃げなさい
</font>
< /div>
< div align="right">
< font color="orange">
すたこらさっささぁのさぁ　すたこらさっささぁのさぁ
</font>
< /div>


ある日森の中くまさんに出会った　花咲く森の道くまさんに出会った
　くまさんのいうことにゃお嬢さんお逃げなさい
　　　　　　　　　　　　すたこらさっささぁのさぁ　すたこらさっささぁのさぁ

こんな感じになりました。
違いわかった？
<p> タグは一行空いてるよね。
<div> タグは空いてない。

前のページの例にもあったけど、いくつかのタグを重ねて書くことで、書いたタグの属性（性質）を全部表すことができます。


<marquee> タグを使えば、文字をスクロールさせることができます。

 

<marquee>腰痛はつらいぞ！運動不足だな</marquee>

 

腰痛はつらいぞ！運動不足だな

 

これは、<marquee> タグだけですね。
さらに、これまで出てきたいくつかのタグを重ねてみます。

 

<marquee>
< i>
< b>
< font size="3" color="orange">
腰痛はつらいぞ！運動不足だな
</font>
< /b>
< /i>
< /maquee>

 

腰痛はつらいぞ！運動不足だな


ってな感じになります。開始タグ（文字列の前のタグ）と終了タグ（文字列の後のタグ。閉じタグ）の順番は適当でも表示されますが、開始タグの逆順で終了タグを書いた方が、あとからわかりやすいです。

■このページに出てきたタグ■

タグ名 プロパティ 値 説明
<p>～</p> － － 段落を作る。前後が１行空く。
<div>～</div> － － 段落を作る。
<marquee>～</marquee> － － 右から左へスクロール
<i>～</i> － － 斜体文字

プロパティと値については、説明したものだけ書いています。
<p>～</p> タグや <div>～</div> タグ、<marquee>～</marquee> タグにもプロパティと値はありますが、機会があったら説明します。

超初心者のためのホームページ作成講座ここからコピーする

カラーコード

カラーグラデーション

ホーム

アクセスカウンター
アクセスカウンター

 2024年

10月
日 月 火 水 木 金 土
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
11月
日 月 火 水 木 金 土
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
12月
日 月 火 水 木 金 土
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31