kalvis01のブログ https://ameblo.jp/kalvis01/ ブログの説明を入力します。 ja 1-6.HTMLファイルの作成(6) スタイルシートを作ってみます。

スタイルシートとは、文字のサイズや色、その他書式を別に定義したものです。


<p><font size="5" color="green">3行目</font></p>

例えば、文字のサイズと色は上記の方法で変更できます。
全て同じ文字の大きさや色にするならスタイルシートは必要ないのですが、

ここはこのサイズと色で、ここはこのサイズで、ここはこの色で．．．という場合、とても面倒です。


スタイルシートにあらかじめパターンを用意しておきます。
上記の緑色の文字をスタイルシートで表すと以下のようになります。(フォントサイズは20pxに変えました。後述。)


<style type="text/css"><!--
greenStyle {
font-size:20px;
color:green;}
--></style>


最初と最後のStyleタグですが、これはスタイルシートを表す決まった書き方なので、そのままコピーして使います。


次に、2行目のgreenStyleは自分で自由に決められる名前です。
3行目はフォントのサイズ、4行目は色を指定しています。
これで、greenStyleというフォントサイズが20pxで色が緑の文字が定義できました。


定義は終わりなので、この定義を実際に使ってみます。


<p><font size="5" color="green">3行目</font></p>
これを次のように変えます。
<p class="greenStyle">3行目</p>


スタイルシートを適用するときは、classという属性を使って記述します。
(idという属性も使えますが、ここではclassを使用しています。)


【サンプル】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style type="text/css"><!--
.greenStyle {
font-size:20px;
color:green;}
--></style>

<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font><hr/>
<p class="greenStyle">3行目</p>
<font size="3" color="red">4行目</font>
</body>
</html>



*フォントサイズの記述方法


fontタグのsizeで文字のサイズを指定するときは使えた1,2…という値ですが、スタイルシートの場合使えません。

スタイルシートの場合は、下記から選択します。

px：ピクセルで指定します。　使用例：font-size:10px;

em：ピクセルで指定します。　使用例：font-size:10em;

ex：ピクセルで指定します。　使用例：font-size:10ex;

%：パーセントで指定します。　使用例：font-size:80%;　font-size:120%;

xx-small、x-small、small、medium、large、x-large、xx-largeのキーワードで指定します。

使用例：font-size:x-small;　font-size:large;


実際の文字のサイズはいくつか実際に試して確認するのがよいかと。

個人的には、いちばん良く使われているのはpxではないかと思います。

]]> https://ameblo.jp/kalvis01/entry-11067676405.html Thu, 03 Nov 2011 19:54:50 +0900 1-5.HTMLファイルの作成(5) 文字を改行したいときは、改行を意味するbrというタグを記述します。


<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font>
</body>

他に、hrというタグもあります。
これを入れると、横線を引くことができます。
内容が変わる場合の区切り線として使っている場合が多いかと。

<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font><hr/>
<font size="5" color="green">3行目</font>
</body>

もう1つpタグを使うと、1行空けることができます。
pタグを使うと、pタグで囲んだ箇所の前後に1行ずつ改行が入ります。
brタグを前後に入れても同じですが、文章を意味の違う固まりで分ける場合などにpタグは利用されているようです。
<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font><hr/>
<p><font size="5" color="green">3行目</font></p>
<font size="3" color="red">4行目</font>
</body>


【サンプル】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">1行目</font><br/>
<font size="4" color="blue">2行目</font><hr/>
<p><font size="5" color="green">3行目</font></p>
<font size="3" color="red">4行目</font>
</body>
</html>


]]> https://ameblo.jp/kalvis01/entry-11067665308.html Thu, 03 Nov 2011 19:47:09 +0900 1-4.HTMLファイルの作成(4) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


他のサイトのソースコードを見ていると上記のように、<!DOCTYPEから始まる記述があります。
なくても動くのですが、あったほうがいいです。


何かというと、このHTMLで作成された文書がどんなルールに基づいて作成されているかという定義を表しています。
WebブラウザがHTMLファイルを読み込むときに、この定義に基づいて意味を考えます。
なので、Webブラウザは、この記述がないとどんな意味なのか理解することができなくなります。
例えば、IEでは思った通りに画面に表示されないが、FireFoxでは思ったとおりに表示されるということも起こります。


上に挙げた書き方の他にも、何種類か書き方はあります。


ただ、これまでに紹介したhtmlタグや、bodyタグなどは、一般的なタグなので、
<!DOCTYPEから始まる記述がなくても、恐らくどのブラウザでもきちんと識別すると思いますが。


とりあえず、一番最初に書いたものを入れます。


【サンプル】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">サンプルページ</font>
</body>
</html>



*DOCTYPEの違い
HTMLに限っていうと6種類あります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd ">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
この2つは厳密に定義するものです。厳密が何かというと、非推奨とされている要素は使えません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
この2つはややゆるい定義です。非推奨のタグでも利用することができます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd ">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
もっとも緩い定義です。上記＋フレームが利用できます。


3パターン、それぞれ2種類ずつ書きましたが、それぞれ長い方についているhttpから始まる部分をシステム識別子と言います。
正直、あってもなくても影響があることは稀かと。


気になれば、「doctype システム識別子」等で検索すれば、たくさん参考になるページが出てきます。


]]> https://ameblo.jp/kalvis01/entry-11065721873.html Tue, 01 Nov 2011 20:05:52 +0900 1-3.HTMLファイルの作成(3) もう少しHTMLの中を細分化してみます。
htmlタグの中は、さらに2つに分けられます。
1つが文書自体の情報、もう1つが文書の内容です。


タグでは、<head>と<body>と表されます。
本に例えて言うと、headタグが本のタイトルやその本のジャンルの情報で、bodyタグが実際の内容という感じでしょうか。


<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">サンプルページ</font>
</body>
</html>


実際にブラウザに表示する内容は、bodyタグの間に入れます。


headタグの間にtitleというタグがありますが、ここに記載した内容はWebブラウザの一番上の枠の所に表示されます。


【サンプル】

<html>
<head>
<title>タイトル</title>
</head>
<body>
<font size="3" color="red">サンプルページ</font>
</body>
</html>



*メタデータ(meta data)とは
headとは何かということを調べていると、メタデータを記載する場所という記述が出てきます。
HTMLファイルの情報それ自体を定義するための情報です。
本に例えると、本の作者や出版社、ISBN、その他本のジャンルなどの情報が該当します。

こんな感じの理解で正しいかと。。。

]]> https://ameblo.jp/kalvis01/entry-11065629718.html Tue, 01 Nov 2011 18:38:35 +0900 1-2.HTMLファイルの作成(2) 次に文字のサイズを変更してみます。


さっき作成したhtmlファイルを開きます。
ファイルがhtmlに変わっているため、クリックしても開けません。
開き方が分からない場合には、「html メモ帳 開く」などのキーワードで検索すると開き方を記載したページが見つかります。

ファイルを開いたら、サンプルページのところを下記のように変更します。

<font size="3">サンプルページ</font>

3のところを1に変えたり、7に変えたりすると文字の大きさが変わるのが分かります。

フォントの色も変更してみます。

<font size="3" color="#ff0000">サンプルページ</font>

#ff0000は赤を意味しています。
主な色は、文字でも表すことができるので、赤は、代わりにredと記載しても大丈夫です。

<font size="3" color="red">サンプルページ</font>

【サンプル】

<html>
<font size="3" color="red">サンプルページ</font>
</html>


他にも色はあるので、青くしたい場合は#0000ff又はblue、黄色くしたい場合は#ffff00又はyellowなどに変更します。
一覧で確認したい場合には、｢html 色 見本｣などのキーワードで検索すると、一覧のページが見つかります。


*fontタグについて

fontタグはHTML4.01からは既に非推奨となっています。
ここでは、簡単な例として挙げただけですので、記載方法はCSS(スタイルシート)に従って記載してください。
CSSは別途紹介します。見本｣などのキーワードで検索すると、一覧のページが見つかります。


]]> https://ameblo.jp/kalvis01/entry-11064590225.html Mon, 31 Oct 2011 18:08:59 +0900 1-1.HTMLファイルの作成(1) HTMLの作成には、メモ帳が必要です。
例えばWindows Xpの場合は、[スタート]ボタンを押してから[すべてのプログラム]-[アクセサリ]-[メモ帳]で起動できます。


メモ帳を起動したら、そこにHTMLを記載します。
HTML(HyperText Markup Language)とは文書を作成するときのルールです。


まずは、<html>と記載します。
改行したら、サンプルページと入力します。
また改行して</html>と入力します。


上記3行の入力が終わったら、保存してファイルを閉じます。
保存が終わったら、ファイルの拡張子をtxtからhtmlに変更します。
ちなみに、拡張子「txt」が表示されていない場合には、[ツール] から [フォルダオプション]を選び、[登録されているファイルの拡張子は表示しない]のチェックを外します。


拡張子がhtmlに変わったら、ファイルのアイコンもWebページのアイコンに変わります。
そのファイルをダブルクリックすると、Webブラウザが起動し、入力した内容を確認できます。


【サンプル】

<html>
サンプルページ
</html>


*htmlとhtmの違い

ホームページを見ていると、拡張子がhtmlとなっているページとhtmとなっているページががあります。
結論から言うとどちらでも構いません。
htmは、windowsでは拡張子の文字数に制限があり(3文字)、htmlは入力できなかったためです。
現在はhtmlが主流として使われているようです。

]]> https://ameblo.jp/kalvis01/entry-11064541871.html Mon, 31 Oct 2011 17:12:03 +0900