1−4 CSS(スタイルシート)の外部ファイルの作成
ホームページはXHTML/HTMLで作られていますが、実はホームページのデザインを決めるのはXHTML/HTMLではなくCSS(スタイルシート)です。
基本的にはXHTML/HTMLは構造、CSS(スタイルシート)はデザインと考えていただくとわかりやすいです。
家をホームページと例えるなら、
XHTML/HTMLは
柱、壁、床、窓、ドア、階段などの建物の構造や土台部分を意味し、
CSS(スタイルシート)は
壁紙の色、外壁の色、ドアの形、タイルの種類、床材の種類、窓枠の形、ドアノブの形といったデザイン部分の指定です。
CSS(スタイルシート)の外部ファイルの作成
CSS(スタイルシート)は、CSSファイルによって管理します。
HTMLファイルへ直接CSS(スタイルシート)書き込む方法もありますが、外部ファイル化しておいた方が、ホームページの管理が簡単になるので、はじめから外部ファイル化しておきます。
ホームページ作成ソフトによっては、「CSS(スタイルシート)の新規作成」「外部CSSファイルの作成」「新規作成>CSS」のように簡単に新規CSSファイルを作成する機能があります。
新規作成したらファイル名を指定し(半角英数字)、1−2で作成した「template.htm」と同じフォルダへ保存してください。
今回は分かりやすいように、「style」というファイル名にしてください。
すると「style.css」というファイルが保存されます。
シンプルなテキストファイルで制作しているときは、CSS(スタイルシート)の新規作成する機能がないことがありますが、ページを新規作成し、「style.css」というファイル名で保存すれば、CSSファイルとして保存されます。
HTMLファイルとCSSファイルをつなげる
CSSファイルを外部ファイル化するためには、CSSファイルを作成するだけではできません。
HTMLファイルへ、適用するCSSファイルがどれかを示すコードを1行加えて、HTMLファイルとCSSファイルをつなげましょう。
「href="..."」の部分に、作成したCSSファイルのファイル名を入れることで、CSSファイルを適用することができます。
ホームページソース
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。