つれづれ日記

２０１１年４月１日～８月１５日まで育児休業を取りしました。この期間の生活を日記のまとめです。また、育児休業期間が終わったので、他にも挑戦しているものや日常のメモなどもこの日記に載せようと思います。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(X)HTML,CSS覚書
～ＨＴＭＬとＣＳＳの連結について～

☆ＨＴＭＬとＣＳＳの歴史（超概略）
　ＨＴＭＬは、Ｗｅｂページを作成するために開発された言語です。
　Ｗｅｂの発展と共に、ＨＴＭＬに機能が追加されました。
　見栄えに関する要素も取り込まれてきましたが、ＣＳＳが考案されてからは、ＨＴＭＬには構造の記述を、ＣＳＳには見栄えの記述をというように、分離して書くようになってきました。

☆ＣＳＳについて
　ＣＳＳとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字を取ったもので、ウェブページのスタイルを指定するための言語です。
　ＣＳＳはスタイルシートですので、ＨＴＭＬと組み合わせて利用します。

　上に書いたように、ＨＴＭＬにも装飾に関する記述が使えますが、ブラウザを変更すると見栄えが変わったり、検索エンジンに正しく理解されなかったりすることがあり、せっかく書いた情報がうまく活用されないかもしれません。

　また、ＣＳＳを利用すると、簡単に見栄えを変えることができるという利点もあります。現在さまざまなホームページ作成サイトで色やフォントなどが簡単に変えられるようになっているのは、ＣＳＳを利用しているからです。

☆ＨＴＭＬファイルとＣＳＳファイルをつなげる

　作成したＣＳＳファイルを"test.css"とします。これをＣＳＳというフォルダー内に保存しておきます。
　これに文章を書いているＨＴＭＬファイルである"index.html"につなげるための記述内容をまとめておきます。

　"index.html"の中にある"<head>"と"</head>"の間の行に、次のことを記入します。

1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
3 <meta http-equiv="Content-Style-Type" content="text/css" />
4 <title>ページタイトル</title>
5 <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
6 </head>
　※上記１～６の番号は説明の都合上番号を割り振ったものであり、実際には書きません。

２行目：利用している文字コードの宣言
　ＷｉｎｄｏｗｓおよびＭａｃでＷｅｂページを作るとこれになります。
　ＵｎｉｘでＷｅｂページを作ると、"Shift_JIS"の部分が"euc-jp"または"utf-8"になることが多いようです。
　JISの場合は"iso-2022-jp"となります。

３行目：スタイルシート言語の宣言
　ＣＳＳが基本なので、記述しなくても問題ないそうです。
　ただ、いろいろなサイトを調べてみるとよく記述されています。
　また、いろいろなサイトやいくつかの書籍で調べてみると、３行目と５行目がセットになっているようです。

５行目：デフォルトスタイルシートの明示（パソコン画面，印刷用）

　実際自分の作ったＨＴＭＬに記入するときには、おそらく５行目を少し変更して対応となると思います。
　保存先やＣＳＳファイル名などを対応させる必要があるからです。

[0回]