【初心者向け】HTMLとCSSで2カラムのサイトを作ろう!【コピペで完成】

みなさん、こんにちは!

ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。

このサイトでは、ITについて特化したサイトを運営しています。

今回はHTMLとCSSの初心者向けに、コピペだけで完成する2カラムサイトのデザインを説明します。

記事自体は長いですが、最終的にコピペでサイトが表示される様にしているので、ぜひチャレンジしてみてください!

今回目標とするのは、次のような2カラムのデザインです。

この2カラムのデザインはひな形として使えるので、背景色などを工夫すれば、オリジナルの2カラムサイトになります!

スポンサーリンク

HTMLはメモ帳で書ける!

HTMLは、実はメモ帳で書けます!

まず、メモ帳を開いてください!

HTMLの定型文を書く

HTMLには、初めに記述する定型文があります。

これがその定型文です。

先ほどのメモ帳にコピペしてください。

この定型文については、意味はいろいろあるのですが、今回はコピペで大丈夫です。

「ふ~ん」ぐらいで。

もし詳細を知りたいなら、別の記事でHTMLタグについて詳細を説明しているので、そちらをご覧ください。

主要なHTMLタグの一覧と意味

htmlファイルの作成

さて、そのメモ帳を左上の「名前を付けて保存」→「ファイル」をクリックして「すべてのファイル」を選択→「文字コード」をクリックして「UTF-8」を選択してください。

ファイル名はindex.htmlにして、分かりやすい任意の場所に保存してください!

これでHTMLコードが完成しました!

気になったら、保存したindex.htmlをブラウザで開いてください!

左上に「ここがブラウザに表示されます。」とありますでしょうか?

文字化けする場合には、文字コードをチェックしてください。

HTMLの内容を記述していく。

次に、HTMLの内容を記述していきます。

先ほどのindex.htmlの内容に、本文を付け加えました。

このコードをindex.htmlに貼り付けて上書き保存してください。

ブラウザで開くと、なにやらいろいろ文章が書いていますね。

ですが、デザイン性が全くありません!

でも、HTMLができるのはここまで!

デザインは、スタイルシート(CSSファイル)を用いて行います!

CSSファイルを作成する

では、新しいメモ帳を開いて、下のコードをコピペしてください。

このコードは、CSSと言われ、HTMLにデザインを与えるものです。

HTMLの時と同じで、「すべてのファイル」を選択し、文字コードも「UTF-8」に変更してください。

ファイル名は、「style.css」とし、先ほどのindex.htmlと同じ場所に保存してください。

再びindex.htmlを開いてみる

再びindex.htmlを開くとどうでしょうか?

下の図のような2カラムのサイトが完成しましたね!

この2カラムサイトを利用して、オリジナルのサイトデザインを作成してください。

簡単にHTMLの説明

さすがにコピペだけで動いて終了ではまずいので、最低限の部分について説明します。

まず、HTMLについて簡単に説明します。

<body>~</body>の間に記述したことがブラウザに表示されています。

<div>~</div>は、画面上における透明の枠を意味します。

見えない仕切りを構成しています。

divの中にidが指定してありますが、これはCSSと関連付けるためのものです。

CSSに記述した内容を反映させたいdivにidを付加することで関係性を持たせています。

より詳しくは、HTMLのタグ一覧と使い方をご覧ください。

簡単にCSSの説明

次に、CSSについて簡単に説明します。

background-colorでは、背景色を指定しています。

背景色は、HTMLカラーコードで表現します。

HTMLカラーコードは、次のサイトが分かりやすいです。

HTMLカラーコード 早見表(外部サイトです)

widthは横幅を指定しています。

margin:0 auto;は、要素のセンター寄せで使うテクニックです。

floatは、回り込みを意味します。

float:left;で、上の要素よりも左に回り込む。

float:right;で、上の要素をよりも右に回り込む。

これにより、2カラムのサイトを実現しています。

なお、floatは、通常は右寄せ、左寄せのようなイメージで十分ですが、機械的には「回り込み」を意味します。

したがって、もし今後レイアウトが崩れることがあれば、開発者の思う「寄せ」と、機械が認識する「回り込み」の解釈の違いでレイアウト崩れが起こっていることを疑ってください。

なお、floatを使用した後は、crear:both;で、それより下の要素のfloatを解除する必要があります。

まとめ

ここまで、サイト運営初心者向けに、2カラムのサイトの作成についてコピペで完成するように説明してきました。

このテンプレートを利用して、オリジナルのサイトを作成してください。

また、これから初めてブログを運営される方は、ブログの開設手順を紹介している記事も参考になると思います。

こちらも併せてご覧ください。

2カラムサイトデザイン作成の参考になれば幸いです。