[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
おはようございます、toshihiroです。
超初心者のためのＨＴＭＬ講座
私自身が独学で得た知識です。
基本も何もあったものではないかもしれません。
解りやすく進めていくつもりです。
ご不明な点については、遠慮なくコメントに質問をして下さい。
前回、初めてのHTMLソースを皆さんご自身で作っていただきました。
うまくできましたか？
ＨＴＭＬはタグで記載します。必ず開始タグと終了タグを記載します。
今回は、文字の大きさを変えたり、文字や背景に色を付ける方法を解説します。
文字の大きさを変えたり、文字に色を付けたりする方法には、２つの方法があります。
ＨＴＭＬで直接指定する方法とスタイルシートで指定する方法です。
ＨＴＭＬで指定する方法は、現在あまり勧められていません。
新しいブラウザソフトでは、未対応となっている場合があるようですので、確認が必要です。
文字の大きさを変える方法は、<font size="サイズ">表示したい文字<⁄font>このサイズは、１～７を指定します。標準サイズは、３です。この他に－２～＋４で指定する方法もあります。
文字の大きさを変えるのは、<small>文字を小さく<⁄small>や<big>文字を大きく<⁄big>があります。
それでは、スタイルシートでは、どのように指定するのでしょうか？
まず、<head>の中で指定する方法とタグの中で指定する方法それに別ファイルにする方法があります。
別ファイルにする方法と<head>に記載する方法はその指定方法に大差はなく、同じ指定を何度もしなくて済みその指定を呼び出して使うことが可能です。
具体的には、超できすぎくんでは、別ファイルにできすぎくんでは、<head>に記載されています。もちろん、できすぎくんの<head>に記載されているスタイルシートも別ファイルにする方法をおすすめします。
<head>にスタイルシートを指定するためには、
<style type="text/css">
．catch-copy {
font-size: 25px;
}
<⁄style>
このように、指定します。
ＨＴＭＬでは、どのように指定をするのか？
<p class="catch-copy">キャッチコピーです<
⁄p>
別ファイルでは、ファイル名に「top」・「common」・「main」などですが、拡張子はCSSとします。つまり、「top.css」・「common.css」・「main.css」となります。
では、ＨＴＭＬに直接書き込む方法は？
ＨＴＭＬのタグにスタイルシートを書き込みます。
タグの種類は、「div」・「span」などの他色々なタグに書き込みができます。
<p style="font-size:18px;">キャッチコピーです<⁄p>のように指定します。
カラーはどのように指定をするのか？
こちらもＨＴＭＬで、直接してする方法は勧められていません。
<font color="red">または<font color="#FF0000">もしくは<font color="#F00">となります。
カラーは、redのように、いくつか名前で使えるものもありますが、ブラウザソフトによってはこの指定がされていない場合がありますので、名前で指定するのはやめた方が良いようです。
この他に、RGBそれぞれ00～FFの２桁で表示するか、000～255の３桁の数字で表示します。が、２桁で表示するのが通常のようです。ただし、この２桁の00～FFが同じ場合は、１桁で表示が可能となっています。
スタイルシートでは、次のように表示します。
.red {
color:#FF0000;
}
となります。
ＨＴＭＬでは、フォントサイズと同じようにします。
<p class="red">赤色<⁄p>
このようになります。
同じように背景に色を付けるためには、ＨＴＭＬでは、<text="#0000FF" bgcolor="#FF0000">となりますが、ＨＴＭＬの指定では、ページ全体の色の指定になってしまいます。
スタイルシートでは、部分毎に背景色を変えることも可能です。
設定は、次のように行います。
p {
margin: 5px;
color: #FF0000;
background-color:#e0FFFF;
}
.bg-color-red {
margin: 5px;
color: #0000FF;
background-color:#FF0000;
}
そして、ＨＴＭＬでは、次のように記載します。
<p>文字の色は赤で、背景色はライトシアンです<⁄p>
<div class="bg-color-red">文字の色は青で、背景色は赤色です<⁄div>
次回は、実際に超できすぎくんの自由テキストで行う設定方法を解説します。
[0回]
超できすぎ君を使いこなしているショップです。
とても参考になる素敵なショップです。
私のブログと合わせてご参考にしてください。
管理画面
