本当は誰にでもできる！ＨＰ作成の入門講座。ＨＰの作り方・はじめの一歩

ＨＰの作り方・はじめの一歩

スタイルシートデザイン

HPの使い方を学ぶ上で、避けては通れないのがこのスタイルシート

って言うと難しいものと思われがち。でも実はそこまでの手間や脳みそを使わずにできる。

っていうか、手間を省くために生まれたものなんです。

もちろん、自分でやるんだからお金はかからず無料無料♪ささ、今流行の
スタイルシートデザイン。一緒にさくっと見ていきましょう。

手順は以下の通り。

１・スタイルシートの仕組み

２・スタイルシートを使う準備段階

です。

スタイルシートって言うのは、ここまでちょっとずつ紹介してきたHTML形式の装飾的な部分
たとえば、

太く文字を書く

大きめな文字を書く

こういうのを、HTMLではタグの中にその太くしろ！だとか、大きく表示しろ！っていう命令文を書き込んで、
下のように表示させてきましたよね？

<strong>太く文字を書く</strong>

<font size="6">大きめな文字を書く</font>

これを、前述したHTML形式のファイルの中からではなく、
外にある別のファイル（CSSファイルといいます）から命令を出してしまおうというものなんです。

ブログとかって、何ページも何ページも記事を追加していってもデザインが変わらず、
しかもテンプレートを変えると全部のデザインが変えられるじゃないですか？

あれが、スタイルシートのすごいところなんです。

ページの追加や、内容の変更なんかがあってもデザインを同じままで作れるし、
逆にスタイルシートをちょちょっといじってあげれば何10ページって言うHPのデザインを一気に変更することができる。

ぜひとも、活用していってくださいね。

2・スタイルシートを使う準備をしよう。

まずは、コレまで作ってきたHTMLファイルの中に
「このHTKL文書は、CSS（カスケーディングスタイルシートの略語。要するにスタイルシート）からの命令を受けて、
HPのデザインを決定しています。

って言うことを明記してあげて、スタイルシートの命令に従える状態にしなくてはいけません。
入れる場所と入れる文字列は以下の通り。

<title>HPサンプルサイト０１</title>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<center>
<table width=600 cellpadding=10 bgcolor=white><tr><td>
<h1>手作りお菓子のリンク集</h1>
お菓子のリンク集です。<BR><BR>

赤字で書かれている文字列が問題の部分。

場所は</head>の真下です。

ここまで作ったら、いったん保存して、ファイルを保存。ちょっとややこしいですがついてきてくださいね。

1・新規フォルダの作成

２・HTMLファイルをそのフォルダの中に移動

３・さらにメモ帳を新規で開いて、名前をつけて保存を選択

４．名前をstylesheet.cssと名づけて実行！

５・後はその中にスタイルシートの内容を書き込んでいけばOK！となります。

もっと詳しく知りたい人へ送る
超簡単！スタイルシートの勉強本。

どちらも非常に有用な本です。恐がらないでぜひとも、読んでみてください。
将来的に職業としてHP作りに携わりたい方、
または編集ソフトの使用を考えている方も
どちらにも読んでほしいです。
基礎知識を自ら吸収したかソフトに頼りきりになるかでは
その後の伸び方がまるで違うからです。
私も前職から3年でITの世界へ転職しましたが、そのことを非常に痛感しましたし、
また、前述の本を読んでいてよかったと思いました。
『面倒くさい』は危険な考え方。
さあ、まずはマニュアル本の攻略から第一歩を踏み出しましょう。

次へ＞＞＞

ＨＰの作り方・はじめの一歩
マイルがたまるクレジットカード