html・css入門!初心者でも見るだけで自由自在に

html・css入門講座
html・css

「ホームページやブログを自分で作りたい」「カスタマイズしたい」 「でもhtml・cssは難しそうだしな」って思っている人って意外と多いのではないでしょうか?

でも、あなたが思っている以上に簡単なんですよ!

例えば、あなたが今見ている私のブログ、慣れれば3日くらいで作れるようになります。 もちろん、企業のホームページオシャレなサイトだって簡単に作れるようになります。 業者に頼めば数十万円はとびます。でも自分でやっちゃえばタダです。

こんなに簡単にできるのに、自分でやらないのはあまりにも勿体無い。 ということで、知識0・初心者の方でも自由自在にホームページやブログが作れるhtml・cssについて解説したいと思います。

html・css入門という事で、一から詳しく基礎の部分を説明していきますね。 調べないとわからないような用語は使いません。 実際に一緒にサイトを作りながら覚えていきましょう!

目次
そもそもhtmlとcssって何?
htmlの書き方のルールと構造

そもそもhtmlとcssって何?

htmlとcssって何?

htmlとcssの違いについての説明なので、知っているなら飛ばしてくださいね。

htmlとはwebページを作成するために開発された言語の事をいいます。 webページに表示する文字や画像に「ここは見出し」「ここは本文」「ここは画像」というように記号(タグ)を使って 位置を決めるようなモノだと思ってください。

「位置を決めるだけでホームページってできるの?」って思いますよね。 そこで登場するのがcssです。

cssは、文字を大きく見せたり、色を変えたり、見た目に関する設定を行うモノです。

htmlは位置を決めるもの、cssはデザインを決めるもの、とイメージして下さい。 ここでは「htmlとcssってこういうのなんだ」となんとなく解ってもらえれば嬉しいです。

ちなみにHTMLの「H」と「T」と「M」と「L」は頭文字をとった略語です。

  • HyperText
    ハイパーテキストとは、名前の通り通常のテキストにない機能を備えた「超」テキストという意味です。 インターネット上のリンクの文章の事をいいます。

  • Markup
    名前の通り、印を付ける事をいいます。 例えば、HTMLでは画像や文章をどのように表示させるか、タグ(文字列で作られた記号)を使って印を付けます。 これをマークアップするといいます。

  • Language
    プログラミング言語などの「言語」という意味です。

htmlを実際に書いてみよう!

htmlを書いてみる

取りあえず細かい設定は抜きにして、ブラウザ(画面)に文字を表示させてみましょう!

html(htmlのタグ)を実際に入力していくわけですが、その時に使うツール(道具)があります。 Windowsなら「メモ帳」、Macなら「テキストエディット」など色々ありますが、ここでは「TeraPad」(無料)を使いたいと思います。

ちなみに「メモ帳」や「テキストエディット」はあまりオススメできません。 「TeraPad」なら多機能で無料ですし、利便性も高いのでオススメです。 (ちなみにどれを使用してもhtmlを書く方法は変わりません)

ダウンロードはこちらからできます

Terapad-窓の杜ライブラリ html

インストール完了後、Terapadを開いてみましょう! 開いたら上の画像のように文字を入力してみます。

<!--

htmlとは下記の頭文字をとった略語
ht:HyperText ハイパーテキスト
m:Markup マークアップ
l:Language 言語

-->
htmlファイル説明

入力後、ファイル名を「test.html」として保存します。

拡張子(test.htmlなら.htmlの部分の事)は、「.txt」ではなく「.html」で保存します。 (terapadの場合:ファイル→名前を付けて保存→「test.html」と入力)

htmlを記述したファイルのことを「htmlドキュメント」「htmlファイル」と呼びます。

htmlファイルの拡張子は「.html」になります。

htmlブラウザ表示

terapadを一回閉じて保存したファイル(test.html)をダブルクリックします。 すると、ブラウザが起動して画像のように文字が表示されます。(webにアップしても同じように表示されます)

ただし、設定を何もしていないので文字化けする場合もあります。

これで一応ブラウザに文字は表示されましたね。 ですが、改行したのに横並びになってしまっていますね。 そこでhtmlタグの出番です!!

htmlタグを使う事で、指定した位置に正しく表示することができます。 ではやってみましょう!

htmlタグでマークアップしてみよう

マークアップしよう

htmlタグを使って文章を書いてみる前に覚えておいてほしい事があります。 それは、文章が始まる前には必ず「見出し」が必要ということ。

新聞や雑誌などを見ても、文章が始まる前には必ず見出しが付いています。 webページに文章を表示する時も、どういう内容なのか伝えるためにも見出しが必要です。 見出しを付ける事で、検索エンジンにも上位表示されやすくなります。

そして、見出しがあることで「何についてのページなのか」一目でわかるようになります。 そうすることで、訪問してくれたユーザーの利便性も上がって、見やすくて、使いやすいwebページになるのです。

見やすくて使いやすいページ

そしてあなたもご存知のように、文章には段落があります。 webページに何か文章を書くときも同じで、関連する文章を一つのブロックにして書きます。 つまり段落ごとに書いていきます。

こうする事で、文章の内容が検索エンジンにも正しく伝わります。 そうすると検索されやすいwebページになります。

そのためにhtmlタグを使って「ここは見出し」「ここは段落」というように文章の内容を示すのです。

見出しを示すタグ

<h1>ここに見出しを入力</h1>

段落を示すタグ

<p>ここに文章を入力</p>

豆知識
pタグは「paragraph」(パラグラフ)の頭文字です。

ちなみに<h1>や<p>のようにhtmlではタグだという事を示すために<>を使います。 <>を付けないとただの文字として扱われてしまうので必ず<>を付けましょう!

そしてhtmlでは、「ここから見出し」「ここまでが見出し」のように、どこから、どこまでがタグなのか示す必要があります。

見出しを示すタグ<h1>でいうと <h1>から見出しが始まって</h1>までがタグという意味。

つまりhtmlタグの終わりには必ず「/」を付けます。 これを付けないと、エラーを起こすので忘れないようにしましょう!

忘れないようにしましょうね

では実際に先ほどブラウザに表示させた文章をhtmlタグを使って書いてみます。

<h1>htmlとは下記の頭文字をとった略語</h1>
    <p>ht:HyperText ハイパーテキスト</p>
    <p>m:Markup マークアップ</p>
    <p>l:Language 言語</p>

こういうようにタグを記述することを「マークアップする」と言います。 では、どのように表示されるか見てみましょう!

html

今度はしっかりと改行もされて、見出しも文字が大きく表示されましたね。 では最後の仕上げとして、webページの骨格を組み立てましょう!(マークアップしましょう)

htmlドキュメント(webページ)は、下のような要素で構成されています。 (とりあえず、正しくwebページを表示するために必要な部品と考えて下さい)

  • doctype
    htmlであることをwebブラウザに教えてあげるためのタグ

  • html
    htmlの全体を囲むタグ

  • head
    ページのタイトルや文字の表現方法、webページ全体の情報を囲むタグ (この部分はブラウザ(画面)には表示されません)

  • meta charset=”utf-8″
    文字の表現方法を指定するタグ

  • body
    見出しや段落などwebページに表示する部分を囲むタグ (ブラウザに表示したい文字は、この中に書き込みます)

実際にマークアップしてみると、こんな感じです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
       <h1>htmlとは下記の頭文字をとった略語</h1>
           <p>ht:HyperText ハイパーテキスト</p>
           <p>m:Markup マークアップ</p>
           <p>l:Language 言語</p>
</body>
</html>

これがhtmlドキュメント(webページ)の基本形です。 ブラウザでは全体をマークアップしていない時と同じように表示されます。

かなりシンプルに組みましたが、このあと詳しく紹介するのでご安心ください。

文字化けするようであればterapadの文字コードを「UTF-8」に変更してから保存してみて下さい。

変更方法:ファイル→文字コード指定再読込(D)→UTF-8

ちなみにhtml・cssは、一部を除いて大文字と小文字を区別しません。 つまり記述する時は、特定の部分を除いて大文字でも小文字でも大丈夫という事です。

ですが、将来的に考えると仕様が変わる可能性もあります。 なので、一般的な小文字で統一しておいた方が無難です。 それに統一した方が見やすいですよ。

では、htmlについて詳しく説明するまえに、cssについて紹介したいと思います。

cssでページのデザインを整えよう!

デザイン

htmlでwebページの骨組みを作ったら、次はcssでwebページを装飾してあげます。 cssは基本的に、webページのデザインを設定するためのコードと考えて下さい。

cssの書き方は、「どのhtmlタグに」「何を」「どう見せる」という形で記述します。

例えば下記のような感じです。

対象のhtmlタグ{何を:どうみせるか;}

h1(対象のhtmlタグ)の色を(何を)赤色にしたい(どうみせるか) という時は、下のように記述します。

h1{color:red;}

これで<h1>~</h1>の中にある文字が赤色になります。

そしてcssには3種類の書く場所があります。

cssを記述する場所
htmlタグの中に書く(h1とかpなどの先ほど説明したタグです)
htmlファイル内に書く(htmlファイルとは、先ほど作成してもらったファイルの事です)
CSSファイルに書く(cssファイルって何?と思うかもしれませんが、後ほど紹介します)

どこが違うのかというと、cssコードの適用される優先順位が変わります

例えば、htmlタグの中にcssのコードを書くとします。 この場合、3つの中で一番優先されます。

次に、htmlファイル内に書いたコード、 最後に優先されるのがcssファイル内に書いたコード、 という感じに優先順位が変わります。

例えばhtmlファイル内に下記のように記述します。

h1{color:red;}

そして、cssファイルに下記のように記述するとします。

h1{color:black;}

この場合だと、htmlファイル内に記述したコードが優先されて、h1が赤色になるということです。

そしてこれ以外にも優先順位を決めるポイントがあります。 それは下に書いたコードの方が優先されるということ。

例えばcssを下のように記述したとします。(同じファイル内に)

h1{color:red;}

h1{color:black;}

この場合だと、下に記述したコードが優先されてh1が黒色になるという事です。

今は読み流す程度で大丈夫ですが、頭の片隅に覚えておくと後々役立ちます。

そしてcssは基本的に「cssファイル」に記述するようにしましょう! なぜここに記述するのかというと、自分にとって分かりやすくするためです。

htmlファイル内に記述してしまうと、複雑になってしまいます。 (複雑になると「どこに何があるのか」分かりづらくなって管理しづらくなります) そしてファイルの容量も増えてしまいます。 その結果、webページの表示速度が遅くなります。 そうすると検索エンジン上位に入ることが難しくなります。

なのでhtmlファイルをシンプルに軽く、分かりやすくするためにも、できる限りcssファイルに記述するようにしましょう!

ちなみにcssファイルに記述したcssは、ホームページ全体に適用されます。

htmlファイル内に記述したcssはそのページ内だけ、htmlタグ内であれば記述したタグだけに適用されます。

こういった意味でも管理がすごい楽になるので、ご参考までに。

ではcssファイルの作り方について紹介しますね。

cssファイルを作ろう

cssファイル

では実際にcssファイルを作りましょう!

Terapadを開いて「style.css」という名前のファイルを作りましょう!

作り方:ファイル→名前を付けて保存→「style.css」と入力(拡張子を「.css」にして下さいね)

そしてcssファイルを作成したら「test01」というフォルダを作ります。 作成したtest01の中に先ほど作ったcssファイルとさっきマークアップしたhtmlファイル「test.html」を入れます。

入れたらhtmlファイル「test.html」を開きましょう! そして下記の一文を書き込みます。

<link rel="stylesheet" href="style.css">

書き込む場所は<head>内になります。 下のコードを参考にして下さい。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>htmlとは下記の頭文字をとった略語&lt;/h1>
     <p>ht:HyperText ハイパーテキスト&lt;/p>
     <p>m:Markup マークアップ&lt;/p>
     <p>l:Language 言語&lt;/p>
</body>
</html>

このコードを記述することで、htmlファイルと同じフォルダー内にある「style.css」が読み込まれます。 そうすることで、cssファイルに記述したcssコードをhtmlファイルに反映させることができるのです。

では「test.html」を保存してcssファイルを再度開いて下さい。

h1{color:red;}

これを記述します。 そして保存。

では、CSSが反映されているか確認してみましょう!

css確認

画像のようにh1の色が赤になっていればOKです!!

簡単ではありますが、何となくCSSの仕組みを理解できたかと思います。 一応htmlファイルへのcss記述の方法とhtmlタグ内へのcss記述の方法も紹介しますね。

htmlファイル内へのcss記述の参考例

head内に下記を記述します。

<style type="text/css">
h1{color:red;}
</style>

下記を参考にして下さい。

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="style.css">
   <style type="text/css">
   h1{color:red;}
   </style>
</head>
<body>
   <h1>htmlとは下記の頭文字をとった略語</h1>
       <p>ht:HyperText ハイパーテキスト</p>
       <p>m:Markup マークアップ</p>
       <p>l:Language 言語</p>
</body>
</html>

htmlタグ内へのcss記述の方法

<h1 style="color:red;"></h1>

こんな感じでタグの中に直接書き込みます。 下が参考例です。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color:red;">htmlとは下記の頭文字をとった略語</h1>
         <p>ht:HyperText ハイパーテキスト</p>
         <p>m:Markup マークアップ</p>
         <p>l:Language 言語</p>
</body>
</html>

以上になります。 「仕組みさえわかればCSSも余裕!」って思いますよねw

では、css・html入門という事でさわりだけ紹介しましたが、html・CSSをちょっと掘り下げて紹介していきますね。

htmlの書き方のルールと構造

書き方

先ほど実践してもらったように「ここは見出し」「ここは段落」など、htmlタグをつける事で文章の構造がわかるようになりました。 これを「構造化」するといいます。

構造化する事で、見出しや段落は分かりやすく表示され、改行もされるようになりました。

そして、htmlタグの書き方にはルールがあります。 ルールといってもすごいシンプルで簡単なので、すぐ慣れます。 ココは肩の力を抜いて読んでください。

ちなみにhtmlタグの種類は数百個以上あります。 ですが頻繁に使うのは、ごくわずか。 タグを無理に覚える必要はありません。 仕組みだけわかっていれば十分です。

次は書き方を紹介

ここでは基本的な書き方を紹介しますね。 まずはタグの記述の仕方です。

<h1>ここに見出し</h1>

<h1>
ここに見出し
</h1>

タグを記述する際はどちらの書き方でも大丈夫です。(h1以外のタグでも同じ)

対象のテキスト(ここでは「ここに見出し」の部分)の前に付いているタグを「開始タグ」、後ろに付いているタグを「終了タグ」といいます。 タグは必ず対象テキストの前後に付けて下さい 付け忘れると、うまく表示されません。

そしてタグに挟まれている対象テキストの事を「要素内容」といいます。 (用語は覚える必要ありませんが、他のサイトを見た時に用語が盛りだくさんwwなんて事があるので一応書いときますね。)

<h1>~</h1>のように開始タグから終了タグまでの全体を「要素」と言います。 上記のように<h1>~<h1>で言えば「h1要素」といい、h1の事を「要素名」といいます。

<h1>

ここに見出し
</h1>

<h1>
 ここに見出し</h1>

上のようにhtmlファイルでは改行や半角スペースをしても、ブラウザに表示されたときに反映されることはありません 実際表示してみると、どちらも同じように表示されます。 (テキスト内に半角スペースを入れると、半角スペース一つ分だけ隙間ができます)

ちなみに「全角スペース」を開けたり、文字入力が「全角」の状態でタグを改行すると、ブラウザで表示された時に「謎の隙間(全角スペース)」ができてしまうので注意して下さい。

そしてhtmlファイルには、メモを書くことができます。 メモはブラウザ(画面)で表示されることはありません。

<!-- ココに好きな文字を入力 -->

こんな感じで、好きな所にメモすることができます。 下が参考例です。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"> <!-- ココに好きな文字を入力 -->
</head>
<body>
       <h1>htmlとは下記の頭文字をとった略語&lt;/h1> <!-- ココに好きな文字を入力 -->
          <p>ht:HyperText ハイパーテキスト&lt;/p> <!-- ココに好きな文字を入力 -->
          <p>m:Markup マークアップ&lt;/p>
          <p>l:Language 言語&lt;/p>
</body>
</html>

次が「属性」の説明です。

属性を覚えよう!

cssの属性についてなのですが、ここは理解しようとしないで下さい。 さらーっと読んで、「うん、わかんないなw」でいいんです。 後ほど、一緒にcssを使ってデザインしていきますので、そこでマスターできます。

とりあえず一目見ておくだけで、後でデザインする時に「そういえば、そんなこといってたなw」って感じで思い出すことができます。 かりに思い出せなくても、後々の理解度が全然変わります。 なのでここは考えずに、サラーっと読んでくださいね。 考えちゃうときっと疲れますのでw

では属性についての紹介です。

属性とは簡単にいうと個別にタグを指定したい時に使うモノとイメージして下さい。

<h1>htmlとは下記の頭文字をとった略語</h1>
<p>ht:HyperText ハイパーテキスト</p>
<p>m:Markup マークアップ</p>
<p>l:Language 言語</p>

例えばこういう場合に、pタグで囲んである「l:Language 言語」の部分だけ赤色にしたいとします。 ですがcssファイルに下記のように記述しても他のpタグ内の文章も赤色になってしまいます。

p{color:red;}

こういう時に属性を使います。

<!--htmlに下記のように記述します-->

<p id="example">l:Language 言語</p>
/* cssファイルには下記のように記述 */

p#example{color:red;}

このように記述すると、属性を指定したタグだけ色が変わります。 idの場合は「#=”セレクタ名(自分の好きな文字にしてok)”」を使って指定してあげます。
(詳しい使い方については後ほど解説します)

ちなみに<p id=”example”>の「id」の部分を属性名と言います。

「id=”example”」の事を属性
「”example”」の事を属性値といいます。

また属性には「id属性」と「クラス属性」の2種類あります。

id属性

<p id="example">l:Language 言語</p>

id属性のcss

p#example{color:red;} 

/* pタグの「id="example"」が付いているものに適用される */
#example{color:red;} 

/* 「id="example"」が付いているものすべてに適用される */

クラス属性

<p class="example">l:Language 言語</p>

クラス属性のcss

p.example{color:red;} 

/* pタグの「class="example"」が付いているものに適用される */
.example{color:red;}  

「class="example"」が付いているものすべてに適用される

「example」の部分(セレクタ名)は自分の好きな文字にしても大丈夫です。 ただしアルファベットから始めて下さい。 それと大文字と小文字の区別があるので注意!

詳しい使い方については、のちほど説明します

id属性とクラス属性の違い

再度、同じことを言いますが、理解しようとしないで下さいね。

「さっぱりわかんないww」でいいんですよ。 教科書読んだだけじゃスポーツが上手くならないのと同じで、 実際にcssを使ってデザインしながらでないと、中々理解はできません。

なので、全然わかんなくても気にしないで下さいね。 このあと一緒にデザインすることで、確実にマスターできます。

では、話を戻して2つの違いについてご紹介しますね。

2つの違いは、簡単にいうと使用回数制限があるか、ないかです。 idセレクタ(名前の部分)は、1つのページに1度しか利用できません。(webページ上で1回というわけではなく、1ページにつき1回という意味) 逆にclassセレクタは、何回でも使用できます。

何回でも使えるなら「id」って必要ないよね。と思うかもしれません。 ですが、しっかりと使い分けないとあとで面倒な事になってしまいます これについては、後ほど紹介します。(idやclassといった属性の詳しい使い方についても説明します)

実践的なhtml・cssの使い方を覚えよう

html・cssの基本はなんとなくわかったかと思います。 今まで説明したのがhtml入門の基礎なら、ここからがhtml・css入門の実践編という感じです。

ということで、ここからはhtml・css入門の実践編として、本格的なサイトを作ってみましょう! html・css入門の実践編として実際にサイトを作ってみる事で、もっとhtml・cssを理解できると思いますし、上達するのも早くなります。

ここでは、ホームページを作りながら、本格的なhtmlドキュメントの作り方、実践的なwebページの構造の作り方、cssの実用的な使い方などを説明してきますね。 ではやってみましょう!

html・cssを記述する前にレイアウトを考える

ブログやホームページを作る前にまずはレイアウトを決めましょう!

大体の完成イメージがあるのとないのとでは、作業効率が全然違います。 いきなりHTML・CSSを書くのではなく、簡単にでいいので完成イメージをノートなどに書いておきましょう。

下の画像がレイアウトの例になります。

できればパーツごとに、幅やid・クラス名などを記入しておくと後々楽です。 でもいきなりそこまでやるのは多分無理なので、最初はイメージだけで大丈夫です。

レイアウト

htmlドキュメントを作成しよう

htmlドキュメントを作ろう!

実践的なhtmlドキュメント(htmlファイル)を作りましょう。

まずTerapadを起動します。 新規のファイルを作成して下さい。(今までの説明で使ってきたファイルは使いません)

下のページを見てhtmlドキュメントを作成して下さい。
(文字数が多くなりすぎるのでページを分割させて頂きました。)

htmlドキュメントを作成したら、次はページの枠組みです。

webページの枠組みを作ろう(構造化)

枠組みを作ろう!

上の「htmlファイルの実践的な作り方を覚えよう!」で表示したいテキストを入力しましたね。 今度は「そのテキストが何のためのものなのか」ということをhtmlタグを使って構造化します。

ここからはいよいよ「div」などが登場します! 「ソースにあるdivって何だろう?」「ボックスって何?」「この枠はどうやって作るんだろう」 などなど、疑問に思う所は色々あると思います。 そういった点をふまえて紹介しますので、ここで持ってる疑問を全部解消しちゃいましょう!

では、下のページを見て先ほど作ったファイルを構造化させていきましょう!

構造化できたら次はcssでデザインを作っていきましょう。 cssに移る前によく使うHTMLタグをまとめておきます。

良く使うHTMLタグ一覧

使う事が多いhtmlタグ一覧です。 基本的にhtmlタグは覚える必要ないですが、 「最低限これだけは覚えておくと楽だよ」っていうのをまとめました。

目次
h1~h6(見出し)
p(段落)
div
a(リンク)
img(画像)
ul(リスト)
span
h1~h6(見出し)

見出しを設定するタグ

h1~h6まである。
h1が1番大きな大見出しで、数字が大きくなるにつれて小さな小見出しになっていく。

【中に入れられるタグ】
span、img、strong、em、a、など
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
表示例
(h1)見出し1
(h2)見出し2
(h3)見出し3
(h4)見出し4
(h5)見出し5
(h6)見出し6
p(段落)

pで囲まれた部分が一つの段落だということを示す。

pタグを使うと一行分だけ改行される。

【中に入れられるタグ】
span、img、strong、em、a、など
<p>この部分が段落</p>
a(リンク)

リンクする時に使うタグ

ブラウザにはaで囲んだ部分が表示される

【中に入れられるタグ】
spanなどのインライン要素
<a href="#">この部分が表示される</a>
<!--「#」の部分にリンクしたいURLを入力-->
img(画像)

画像を表示させる時に使うタグ

altに入力した文字(代替えテキストの部分)は、画像がブラウザに表示されなかった時にに代わりに表示される。

ここに入力する文字は、写真の内容を表すもの、文脈に沿ったものにする。
画像自体に意味がない場合(装飾のための画像など)は「alt=””」のように空欄にする。

「title」は画像のタイトルを入力する。

入力した文字は、画像の上にカーソルを載せると表示される。

<img src="#" width="100" height="100" alt="代替えテキスト" title="画像のタイトル">
<!--「#」の部分に画像のurlを入力 -->
ul(リスト)

順序のないリストを表示する時に使うタグ。

例えばナビゲーションを作る時などに使う。

またリストの横の「・」はデザインを変える事ができる。

【中に入れられるタグ】
[ulの中] li
[liの中] div、h1~h6、p、ul、li、ol、li、span、img、strong、em、a、など
<ul>
  <li>ここに入力</li>
  <li>ここに入力</li>
  <li>ここに入力</li>
</ul>
ul {list-style-type: circle; }
/* 白丸のデザイン */

ul {list-style-type: square; }
/* 黒い四角のデザイン */
表示例

通常

  • ここに入力
  • ここに入力
  • ここに入力

白丸デザイン

  • ここに入力
  • ここに入力
  • ここに入力

黒い四角のデザイン

  • ここに入力
  • ここに入力
  • ここに入力
span

span自体に意味はない。

spanで囲んだ部分を一つの塊として、cssで編集したいときなどに使う。

divとの違いはブロック要素かインライン要素かというとこ。 (長くなるので後ほど説明します)

<p>例えば、spanで囲った部分だけ<span>赤く</span>するなど</p>
p.span{color:red;}
表示例

例えば、spanで囲った部分だけ赤くするなど

CSSを使ってページ全体のデザインを設定しよう!

いよいよCSSを使った本格的なデザインの編集です。 ここからがweb制作で一番面白い所です!

CSSの入門として最初に説明したように、CSSファイルを作成して記述していくようにしましょう。

では先ほど作ったhtmlドキュメント(htmlファイル)のデザインを設定していきましょう!

ここではCSSの詳しい記述の仕方、ページの幅設定、ヘッダーやナビゲーションのデザインなど、実用的なCSSの使い方をご紹介します。 文字数が多くなりすぎるのでページを分割させていただきますが、基本的にはこのページの続きですのでご安心を。 それと作成してもらったhtmlドキュメントを使って紹介していきますね。

まずは下のページを見てみて下さい。

いかがでしたでしょうか?

今回はhtml・css入門という事で、初心者向けにhtml・cssの基本を紹介させていただきました。 (見るだけで自由自在とか言っておきながら、手を動かしてもらいましたがw) これであなたもhtml・cssを自由にいじれるようになったかと思います。

そして初心者向け・入門編といっても、ここさえわかっていればどんどん上達していきます。 なぜなら、もう自分でいじれるようになっているから。 自分でサイトを1本作ってみると驚くほど上達できます。 なので、どんどんブログやホームページを作ったり、カスタムしたりしましょうねw

それと、1ページにまとめたらすごく見づらくなったので、今度サイトのような形にしてまとめようと思います。

以上、初心者でもできるhtml・css入門講座でしたー。