1. Macのホームページ作成ガイド > 
  2. 無料ホームページ作成 > 
  3. HTMLとCSSの基礎のキソ知識 - 完全無料でホームページを作る!

HTMLとCSSの基礎のキソ知識 - 完全無料でホームページを作る!

2011/07/24

ソフトの準備も整ったところで、さっそくホームページの作成!といきたい所ですが、その前にまずHTMLとCSSについて簡単にご説明しておきます。
基本的な事ですので、しっかりと理解をして進んでいただかないと、これから先ご説明する事も理解できない可能性が高いです。

HTMLとCSS

名前だけは聞いた事があると思いますが、それぞれがどういったモノでどんな役割を持っているかご存知でしょうか。
簡単に言えばHTMLは文書ですので、タイトルや見出し/本文などを記述するファイルです。
HTMLにもデザインをするための属性などが用意されていますが、現在はデザイン部分はCSSで行うのが一般的です。

つまり、HTMLは「文書ファイルそのもの」で、CSS(カスケーティングスタイルシート)は「HTMLのデザインを担当しているファイル」だと言う事ができます。 html_css_1

HTMLファイルの拡張子は「.html」か「.htm」、CSSファイルの拡張子は「.css」です。

CSSはどうやってデザインを担当しているのか?

大雑把にHTMLファイルとCSSファイルの関係は理解していただけたかと思います。
ではHTMLファイルの中身と、CSSファイルの中身をちょっとだけ見てみましょう。
HTMLがどういうモノでCSSがどうやってデザインを担当しているのかが理解できればOKです。

■HTMLファイルの中身について

まずHTMLファイルですが、HTMLはタグというモノで構成されています。
例えば改行をしたい時は<br />タグ、文章は<p>タグを使います。
このタグは基本的に、開始のタグと終了のタグがあり、例えば「ここから」「ここまで」が文章ですよという具合に、最初と最後に使います。
先ほどの<p>タグであれば、開始タグは「<p>」終了タグは「</p>」です。
ただ改行タグのように、開始タグも終了タグも関係なく、1回書けばOKというタグもあります。

うわぁーとか思っちゃった人。安心してください。ここでタグを全部覚えてくださいなんて言いません。
ここではHTMLファイルはタグで構成されていて、タグには開始タグと終了タグがある、タグの種類はたくさんある、という事が理解できれば大丈夫です。

Googleで「HTMLタグ」とかで検索すると、タグの辞書のようなサイトがたくさんあります。基本的にタグの細かい説明はそういったサイトに任せたいと思いますので、自分で見やすい/分かりやすいサイトを探してみてください。

■CSSファイルの中身について

次はCSSの構成ですが、CSSはデザインを指定する箇所を表す「セレクタ」と実際にデザインを指定している箇所で構成されています。
例えば先ほどHTMLのところでご紹介した<p>タグの文字の太さを太字にしたい時は、以下のように書きます。

p{ font-weight : bold; }
ここではpがセレクタで、font-weight:bold;が実際にデザインを指定している箇所です。
デザインを指定している箇所では、二つの設定が「:」でつながっています。
「:」の左側にある「font-weight」がプロパティ、右側の「bold」が属性と呼ばれています。
また最後に付いている「;」は決まり文句なので、必ず最後に付けておく必要があります。

ここでちょっとギモンです。HTMLファイルの中にたくさん<p>タグが使われていて、その一部だけ文字を太くしたい場合はどうすればいいのでしょうか?
実は先ほどのHTMLタグをセレクタに使う方法だと、HTMLの中にある全部のタグが対象になってしまいます。

そこで登場するのが、「クラス」です。
クラスという別名を<p>タグに付けておく事で、太字にしたい<p>タグの場所を特定する事ができます。
書き方はこんな感じです。

.p_futoji{ font-weight : bold }
この設定は「p_futoji」の部分だけを太字にしますよって設定です。
最初に付いている「.」は私のタイプミスではなく、これも決まり文句なので必ず書かなくてはいけません。

プロパティには文字の太さだけでなく、文字の色や線を表示させたり、余白を設定したりと様々なモノが用意されています。
ただ、いま解説した細かい事はすぐに覚えなくても大丈夫です。
ここで理解して欲しい事は、CSSがHTMLファイルのタグや、クラスなどを使って場所を指定して、デザインを設定しているという事です。

まとめ

・HTMLファイルはHTMLタグで構成されている
・HTMLタグは開始タグと終了タグがある(無いものもある)
・HTMLタグの種類はたくさんある
・CSSはHTMLタグやクラスを使ってデザインをする場所を指定している

完全無料でホームページを作るぞ!

  1. ホームページの作成・公開事前準備
  2. HTMLとCSSの基礎のキソ知識
  3. ホームページ無料テンプレートをダウンロード
  4. ヘッダ部分の作成
  5. メインコンテンツ部分の作成
  6. サイドメニュー部分の作成
  7. フッター部分の作成
  8. ホームページを公開しよう
Facebookページ