トップページ > 事前準備 > HTML・CSS

HTML・CSS

ホームページを制作する際に覚えておいて欲しいのが、HTMLとCSSです。おそらく耳にしたことがあるのではないでしょうか。HTMLとCSSを覚えることで、自由にホームページを制作することができます。副業でアフィリエイトをするなら必要になるので、頑張って使いこなせるようになりましょう。

HTML

HTMLのソースコード
HTMLのソースコード

HTMLはHyperText Markup Languageの略で、ホームページを制作するために必要なプログラミング言語です。すべてのホームページは、このHTMLで書かれています。ホームページビルダーのようなホームページ制作ソフトを使うと、HTMLの知識がなくても制作することができます。それは、ソフトが代わりにHTMLのソースコードを書いてくれているためです。

しかし、それでは細かなデザインの修正や、無駄なソースコードをなくすことはできません。ソースコードはできるだけシンプルなほうが検索エンジンに好まれます。ぜひ、できるだけソースコードをシンプルにし、デザインの優れたホームページを制作できるようにHTMLを覚えてみましょう。

最低限覚えておきたいタグ

HTMLは<>で囲まれたコードで書かれています。これをタグと言います。HTMLで覚えておきたいタグはそんなに多くありません。実際にホームページを制作していくと、少しずつ覚えていけると思うので、必ず覚えましょう。下記によく使われるタグを紹介します。

フォント

<h1></h1> 〜 <h6></h6> ・・・見出し
<b></b> ・・・太字

レイアウト

<br> ・・・改行
<p></p> ・・・ブロック要素
<div></div> ・・・ブロック要素

リンク

<a href="URL記述"></a> ・・・リンク
<img src="画像URL記述"> ・・・画像表示

CSS

CSSのソースコード
CSSのソースコード

CSSはCascading Style Sheetsの略で、ホームページの見た目(デザイン部分)に使用します。このCSSを使うことで、ホームページ全体の文字などの大きさや色を簡単に修正できるようになります。

また、ソースコードを短くするために役に立つので、どんどん利用しましょう。注意点として、CSSは必ず外部ファイルとして記述するようにしましょう。

idとclass

id属性とclass属性
id属性とclass属性の違い

CSSのスタイルを利用するためには、id属性とclass属性があります。どちらも機能的に違いはありませんが、id属性は1ページに1度しか使わない場合、class属性は1ページに何度も使う場合に利用します。

class属性は1度しか使わない場合でも利用できるので、最初はclass属性だけを使用して制作しても問題ないでしょう。慣れてきたら使い分けできるようにするといいでしょう。

サンプルファイルの紹介

当サイトでは、私自身がホームページを作る際に使うテンプレートがあります。それをサンプルファイルとして置いておきます。もし役に立ちそうなら使ってみてください。

サンプルファイル

ページの先頭へ戻る