まとめWebサイト制作の基本はHTMLとCSSです。HTMLでコンテンツを作成して、そのコンテンツに対してCSSで装飾やレイアウトなどのデザインを行います。HTMLでCSSを読み込む方法は3種類あります。今回はそれぞれの特徴・メリットと方法について、初心者の方にも分かりやすく解説していきます。HTMLとCSSの関係Webサイトの制作はHTMLとCSSが必要不可欠です。ヘッダーやメインの文章、画像などWebサイトのコンテンツはHTMLでマークアップすることで作成します。CSSでは、HTMLで記述したHTMLタグのid名やclass名、またはタグ自体を直接指定してスタイルを適用させます。pタグの文字を青くしたい場合CSSでは以下のように記述します。color:blue;}実行結果pタグは青い文字になったよこのように、使用するタグのスタイルをCSSで記述しておいて、そのCSSをHTMLで読み込むことでWebサイトのデザインができます。CSSの読み込み方法は3種類HTMLのタグに直接記述するstyleタグを使いHTMLファイル内にまとめて記述する外部CSSファイル(.css)に記述して、そのCSSファイルをHTMLファイルで読み込むひとつずつ特徴を見てみましょう。HTMLのタグに直接記述する方法まずは、HTMLのタグに直接記述するやり方です。この方法は「インラインCSS」と呼ばれており、以下のようにタグの中にCSSを書きます。font-size:18px;">~テキスト~</p>タグの中にstyle属性を使ってCSS要素を記述して行きます。一部のデザインを手早く変更したい時には特に便利です!逆に言えば、指定したタグにしか反映されないのでページ全体のタグの指定には不向きです。基本的にこのやり方はあまりお勧めしません。HTML5の基本理念的に分別させたいという点もありますが、何より一番の理由として後々の修正が大変になるためです。(とは言っても全く使えないわけではありませんよ!)styleタグを使いHTMLファイル内にまとめて記述する方法こちらのやり方はタグにではなく、HTMLファイル内のheadタグ内にまとめて記述するやり方で、styleタグというものを使用します。</body></html>HTMLファイル内にある<head></head>内で、上記のようにまとめて記述します。例ではpタグとh2タグを指定していますが、この2つに限らず何種類でも指定することが出来ます。こちらは、一度記述しておけばそのHTMLファイル内では全体に適用されます。複数ページがある場合には他のHTMLファイルには適用されないので注意が必要です。外部CSSファイルに記述してHTMLファイルで読み込む方法こちらは、HTMLファイルとCSSファイルを別々に用意し、HTMLファイルのheadタグ内でlinkタグを使って読み込む方法です。この記述方法が一番メジャーで、コンテンツ構成とデザインを分けるセマンティックWeb的にも一番推奨できそうです。2つのファイル(HTMLファイルとCSSファイル)を用意しそれぞれ記述していきます。以下、サンプルコードです。color:#333;}少し複雑ですね。部分的に見ていきましょう。下のCSSファイルですが、h1タグとpタグの文字サイズや色を指定する内容です。~>という部分でCSSファイルを読み込んでいます。※○○.cssの○○のところは作成したファイル名になります。これで、bodyタグ内のh1タグとpタグにスタイルが適用されます。まとめざっと3種類の方法を見てきてそれぞれの特徴が分かったと思います。