HTML&CSS入門2〜HTML&CSSの基本的な書き方〜

 

 

こんにちは、すぐるです

 

 

入門1では、webの基礎知識とHTMLとCSSの概要を学びました。入門2ではHTMLとCSSの基本的な書き方を勉強します

 

 

ーーーーーーーーーーーーーーーーー

HTML&CSS入門2で学べること

 

♢HTMLファイルの基本構成がわかる

♢HTMLの基本的な書き方がわかる

♢CSSの基本的な書き方がわかる

ーーーーーーーーーーーーーーーーー

 

 

HTMLファイルの基本構成

 

 

htmlファイルは2つの大きなパートからできています。

 

次の画像をご覧ください

まず一番大切なことは、htmlはタグで書かれているということ。<html></html>のようなものをタグと呼びます。そして、タグは必ず開始タグと閉じタグで一つのセットになっています。ということをふまえて

 

上の画像を見てください。すべてのhtmlファイルはDOCTYPE宣言から始まりますDOCTYPE宣言とは、これからhtmlを書いていきますよという宣言のことです

 

DOCTYPE宣言をすることで、このファイルに書かれている文書はhtmlなんだとパソコンが理解することができます

 

次にhtmlを書くときは、すべてのタグを<html></html>タグの中に書いていきます。<html></html>タグは、この中に書いてあるものがhtmlですよという意味のタグになります

 

<html></html>タグ内の基本構成は、2つのパートから成り立っていますヘッドパートとボディパートです

 

ヘッドパートは<head></head>タグの中に書かれます

ボディパートは<body></body>タグの中に書かれます

 

<head>タグの特徴と役割

・<head>タグの中に書かれたことは、ブラウザに表示されない

・<head>タグの中には、webページのタイトルなどが書かれる

・<head>タグは、<head>タグの中に<link>タグや<meta>タグを書くことで、cssファイルを読み込んだり、外部ファイルと連動することができる

 

<body>タグの特徴と役割

・<body>タグの中に書かれたことは、すべてブラウザに表示される

・僕たちが見ているwebサイトの情報はすべて<body>タグの中に書かれている

 

このように、HTMLはタグによって書かれています。またHTMLはタグの中にタグを書いていくというような入れ子の構造になっています

 

以上の基礎知識をふまえて、HTMLの具体的な書き方を見ていきましょう

 

 

 

HTMLの書き方

 

 

htmlには、開始タグと閉じタグがあります。すべてのhtmlは開始タグで始まり、閉じタグで終わります。またhtmlタグのことを要素と呼び、タグで囲んだものを要素の中身と呼びます

 

たとえば、htmlには大見出しを意味する<h1></h1>タグがあります。この<h1></h1>タグのことを要素と呼び、<h1></h1>タグで囲んだ文字を、要素の中身と呼びます

 

たとえhtmlタグでなにも囲んでない場合も、<h1></h1>のセットが書かれていれば、それで一つの要素になります

 

htmlの書き方

 

 

注意してほしいことは、閉じタグには必ずスラッシュが入ることです。スラッシュを入れないと文字を定義できません

 

htmlの書き方が理解できたら、実際にhtmlを書いていきます。実際に手を動かすことで理解度がかなり深まると思います

 

では、テキストエディタとGoogle Choromeを開いて、ファイルの準備をしましょう

 

 

デスクトップにチュートリアルという名前のフォルダをつくる

 

次のようにデスクトップに、チュートリアルという名前でフォルダーを作ります

 

 

②今つくったフォルダの中にImageフォルダーをつくる

 

Imageフォルダーは後ほど使っていきます

 

 

ここまでできたら、次は入門1でダウンロードしたテキストエディタを開きます

 

Atomを起動してチュートリアルフォルダー内にhtmlファイルを作っていきます

 

③Atomを起動する

 

Atomを起動すると、下の画像のような画面が現れます

 

 

④新しいファイルを作成する

 

次の手順で新しいファイルを作成します

上の図のように、ファイル→新規ファイルから新しいファイルを作ります。OSがWindowsの場合、この部分が少し異なるかもしれません

 

⑤ファイルに次の記述を追加する

 

新規ファイルに次の記述を追加します

最初に出てきたWelcome、WelcomeGaide、ntitledの3つのファイルはすべて消して大丈夫です

 

⑥ファイルを.htmlの拡張子で保存する

 

ファイルに⑤のように記述ができたら、拡張子を.htmlにして保存します。ファイル名はindex.htmlにします

ファイル名をindex.htmlにしたら、保存場所を①でつくったチュートリアル に指定します

 

保存が完了したら、htmlファイルを確認して見ましょう。htmlタグの色が変わっていたら成功です

 

 

⑦チュートリアルフォルダの中を確認する

 

一応、しっかりとindex.htmlファイルが保存されているか確認します

しっかりとhtmlファイルが保存されています

 

⑧実際に何か書いてみる

 

実際にhtmlファイルに書き込んで、Google Chromeで表示させてみましょう

htmlファイルに次の記述を追加してください

記述が完了したらファイルを保存して、チュートリアルフォルダとGoogle Chromeを開きます

 

index.htmlファイルをGoogle Chromeの上にドラック&ドロップして、次のように表示されたら大成功です

おめでとうございます。はじめてのHellow Worldです。よく見たらHelloじゃなくて、Hellowになっていました。お恥ずかしい

 

ブラウザをよく見てみると、Hellow Worldは大きな太文字なっていますが、こんにちは私の名前はスグルですは普通の文字になっています

 

これはなぜかというとHellow Worldを囲った<h1></h1>タグは大見出しを表すタグだからです。一方、<p></p>タグはパラグラフを表すタグです

 

このようにhtmlはタグの種類によって、さまざまな役割があります。これから入門編を進めていただくことでいろんなタグを紹介していきます

 

 

たとえば、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h7>、<small></small>、<strong></strong>、<div></div>、<header></header>、 <footer></footer>タグのようなものがあります

 

それぞれどのようにGoogle Chromeに表示されるか試してみるのも面白いかもしれません

 

 

CSSの書き方

 

 

CSSの書き方は、まずタグを指定してどのタグの何をどのようにするかという書き方をします

 

例えば、<h1>タグの文字色を赤色にしたい場合は次のように書きます

 

まずは、タグ名を指定し半角中括弧でくくります。そしてその中に、color: red;と書きます。これで、<h1>タグの文字の色を赤色にしろという意味になります

 

これがcssの書き方の基本です

 

そして、css文書を構成するパーツにはそれぞれcssなりの呼び方があるので、紹介します

 

 

まずCSSでは、指定するタグのことをセレクタと呼びます。次に、どのタグの何をどうするかの何をの部分をプロパティと呼びます

 

プロパティには、文字の色を変えるcolor、文字の背景を変えるbackground、文字の大きさを変えるfont-sizeなどたくさんの種類があります

 

最後に、どのタグの何をどうするかのどうするかの部分を値と呼びます値には、色や文字の大きさを表す単位のピクセルを入れたりします

 

これからは、これらの用語を使って話をすすめていきます

 

 

たとえばプロパティは次のようなものがある

width・・・要素の横幅を指定する、値は300pxなど

height・・・要素の高さ指定する、値は50pxなど

line-height・・・行の高さを指定する、値は14pxなど

padding・・・余白の調整をする、値は30pxなど

font-weight・・・文字の太さを指定する、値は14pxなど

 

 

では実際にcssファイルを作り、cssファイルをhtmlファイルに読み込み、文字の色などを変えていきましょう

 

 

①CSSフォルダーを作る

 

チュートリアルフォルダ内に半角小文字でcssという名のフォルダーを作ります

 

②Atomエディタで新しいファイルを作成する

 

cssフォルダーを作ることができたら、Atomエディタを開いて、新しいファイルをhtmlファイルを作ったときと同じ手順で作ります

 

 

③新規ファイルに次の記述を追加する

 

新規ファイルの一番上に次の記述を追加してください

@charset “UTF-8”;  

これはDOCTYPE宣言と似たようなもので、cssファイルには必ず記述します

 

 

④ファイルをチュートリアルフォルダに保存する

 

記述が終わったら、style.cssという名前でチュートリアルフォルダにファイルを保存します

 

次のように、cssフォルダ内にstyle.cssファイルがあればOKです

 

保存が完了したらAtomに戻って、@charset “UTF-8”; の色が変わっていることを確認しましょう

大成功です

 

 

⑤CSSファイルをhtmlファイル内に読み込む

 

cssファイルがhtmlファイル内に読み込まれていないと、cssファイル内に書いたことがブラウザに反映されません

 

cssファイルを読み込むために、htmlファイルの<head></head>タグ内に次の記述を追加します

<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />

よければコピー&ペーストしてください

 

htmlの<link>タグを使うことで、外部ファイルと連動することができます。これでcssファイルの読み込みは成功です

 

⑥実際にCSSを記述してみる

 

Hello Worldの文字の色を変えて見ましょう。次の記述をcssファイルに追加してください

cssファイル

コロンやセミコロンが抜けないように注意して書きます

 

書き終わったら、cssファイルを保存してブラウザをリロードします。Hellow Worldの文字の色が変わっていたら大成功です

文字の色が変わっていない場合、スペルミスがあるかなどチェックして見てください

 

 

入門2はこれで終わりです。おつかれさまでした

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!