Programming

【超初心者向け】HTML/CSS入門テキスト版【後半⑪〜⑳】

HTML_CSS入門 CSS編

 

YouTube動画で解説するHTML/CSS入門のテキスト版です(`・ω・´)!

まずは、HTML編からどうぞ!

HTML_CSS入門 HTML編
【超初心者向け】HTML/CSS入門テキスト版【前半①〜⑩】 YouTube動画で解説するHTML/CSS入門のテキスト版です(`・ω・´)! 【HTML/CSS入門①】HTMLと...

 

この記事は随時更新していきます!

 

【HTML/CSS入門⑪】CSSとは?CSSを使って装飾してみよう!

HTML_CSS入門⑪ CSSに入門しよう!

CSSについて知ったあと、実際に使ってみるところまで学習していきましょう。

 

▼YouTube動画はこちら

 

CSSとは?何の略称なの?

 

CSSは、Cascading Style Sheets(カスケーディング スタイル シート)の略です。

CSSを使うことで、HTMLで書いた部分に装飾できるようになります。

 

  • HTMLでWebサイトの構成を決めたあとに、
  • CSSで装飾してあげる

上記の手順で、Webサイトが作成できるんですね。

 

CSSを実際に書いてみる

 

それでは、実際にCSSで装飾してみましょう。

まずは以下のコードを、HTMLファイルへ、そのまま書き写してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2 style="color: red;">CSS入門</h2>
  <p style="font-size: 20px;">CSSは、文字に装飾するための言語です。</p>
</body>
</html>

 

これをブラウザで読み込ませると、以下のようになります。

CSS入門11

<h2>で書かれた部分は赤色になって、<p>で書かれた部分は文字が大きくなりました。

<p>タグは少し分かりづらいかもしれないので、CSSを使っていないものと比較してみます。

<p style="font-size: 20px;">CSSは、文字に装飾するための言語です。</p>
<p>CSSは、文字に装飾するための言語です。</p>
CSS入門11

こうやって見ると、CSSを使っている<p>は、文字が大きくなっていることが分かりますね。

 

こんな感じで、CSSを使ってあげると、今まで白黒で味気なかったのが、かなりWebサイトっぽくなってきます。

 

  CSSの注意点

CSSは、文法が非常に多いです。

これからゆっくり学習を進めていきますが、すべての文法を扱い切るのは、ちょっと難しいですね。

 

そのため、CSSを使って何か装飾したいときには、やりたいこと CSSで検索するのがオススメです。

違うデザインのボタンを作るには、どうしたら良いんだろう〜」といったときには、CSS ボタンで検索する感じですね。

 

【HTML/CSS入門⑫】CSSファイルを分割して、開発効率をあげよう!

HTML_CSS入門⑫ CSSファイルの分割

『HTML/CSS入門⑪』では、以下のように、HTMLファイルの中でCSSを書いていました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2 style="color: red;">CSS入門</h2>
  <p style="font-size: 20px;">CSSは、文字に装飾するための言語です。</p>
</body>
</html>

 

今回から、HTMLファイルに直書きするのではなく、別でCSSファイルを準備していきたいと思います。

最初は、ちょっと難しいかもしれないですが、、、馴れれば簡単です。

 

▼YouTube動画はこちら

 

HTMLファイルの変更

結論、HTMLファイルは、以下のように変更します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>CSS入門</h2>
  <p>CSSは、文字に装飾するための言語です。</p>
</body>

</html>

 

大きな変更点は、以下ですね。

<!-- 変更前 -->
<h2 style="color: red;">CSS入門</h2>
<p style="font-size: 20px;">CSSは、文字に装飾するための言語です。</p>

<!-- 変更後 -->
<h2>CSS入門</h2>
<p>CSSは、文字に装飾するための言語です。</p>

 

<h2>タグと<p>タグの後に書いてあったstyleを削除してあります。

 

それだけでなく、以下の一文も追加されています。

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

 

これがCSSを読み込むための方法で、意味合いとしては「linkを使って、style.cssというファイルを読み込みますよ」です。

要するに、style.cssというファイルを作っておき、そのファイルを読み込んでいることになります。

 

CSSファイルの変更

<p>タグと<h2>タグに書いていたstyleは、HTMLファイルで読み込んでおいたstyle.cssに書いていきます。

とはいえ、まだCSSファイルを作成していませんでした。

 

なので、まずは以下のように右クリックして「ファイルの作成」をしていきます。

CSS入門12

 

ファイル名は、先ほど指定しておいたstyle.cssですね。

CSS入門12

ファイルの作成ができたら、以下のコードを書いていきましょう。

h2{
  color: red;
}

p{
  font-size: 20px;
}

 

これは、HTMLファイルに直接書いていた部分を、CSSファイルで書き直しただけです。

上記のように、HTMLタグに直接スタイルを当てる(=CSSを使う)ときには、以下のように書きます。

h2{
  
}

p{
  
}

ul{
  
}

 

CSSを書いたあとは、ctrl + sまたはcommand + sでファイルを保存してあげて、もう一度ブラウザを読み込んであげましょう。

CSS入門11

 

これでHTMLファイルとCSSファイルの分割が完了しました。

基本的に、スタイルを当てていくときには、CSSファイルに書いていきます。

 

なので、HTMLファイルには、HTMLだけ書き込んで“サイトの構造”を見やすいようにしておきましょう。

 

【HTML/CSS入門⑬】まずはここから!CSSで文字を装飾しよう!

HTML_CSS入門⑬ 文字の装飾

CSSを使って、文字の装飾をしていきます。

 

▼YouTube動画はこちら

 

結論、文字の装飾をするためのCSSには、以下のようなものがあります。

  • font-size : 文字の大きさを変更する
  • font-family : 文字のフォントを変更する
  • font-weight : 文字の重さ(ボールド体)を変更する
  • line-height : 文字同士の高さにスペースを取る
  • text-align : 文字の位置を変更する

上記です。

 

これらを使ってあげることで、色々な文字の装飾ができるようになります。

実際にHTMLとCSSを準備して、確認してみましょう。

 

HTMLファイル

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>CSS入門</h2>
  <p>CSSは、文字に装飾するための言語です。
    CSSは、文字に装飾するための言語です。
    CSSは、文字に装飾するための言語です。
    CSSは、文字に装飾するための言語です。</p>
</body>

</html>

 

ここまで書いてあげると、以下のような画面が表示されます。

HTML CSS入門13

この文字列に対して、CSSを当てていく感じです。

 

CSSファイル

p {
  font-size: 30px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 600;
  line-height: 2em;
  text-align: center;
}

 

今回は、上記のCSSファイルを準備しました。

画面を更新すると、以下のような画面になります。

HTML CSS入門13

 

それぞれのCSSが持つ役割は、以下のとおりです。

  • font-size : 30px; : 文字の大きさを30pxに変更する
  • font-family : 'Lucida Sans', Geneva, Verdana, sans-serif; : 文字のフォントを指定したものに変更する
  • font-weight : 600 : 文字を太くする
  • line-height : 2em : 文字同士の高さで200%のスペースを空ける
  • text-align : center : 文字の位置を中央寄りにする

上記をすべて使うと、先ほどの画面のような文字が表示されます。

 

 

なお、line-heightで指定しているem(エム)は、1em=16pxです。

ゆえに、2emにしているということは、32pxのスペースを空けていることになります。

※さらにいうと、2em200%と書いても、同じ結果になります。これに関しては、好みの問題なので、お好きな方をどうぞ。

 

各要素の詳しい解説は、YouTubeにて解説しています。

 

【HTML/CSS入門⑭】CSSを使って色をつけよう!

HTML_CSS入門⑭ 色で装飾

Webサイトを作るのであれば、色をつけるのは必須です。

 

▼YouTube動画はこちら

 

CSSを使って色をつける方法は、以下の2つあります。

  • color : 文字の色を変更する
  • background-color : 背景色を変更する

上記です。

実際に、HTMLファイルとCSSファイルを使って確認してみましょう。

 

color(文字の色を変更する)

 

文字の色を変更したいとき、colorを使ってあげます。

 

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>CSS入門</h2>
  <p>CSSは、文字に装飾するための言語です。</p>
</body>
</html>

 

CSSファイル

p {
  color : red;
}

 

<p>タグに含まれる文字の色を赤に変更する」という意味です。これで画面を更新すると、以下のようになるはず。

HTML CSS入門14

 

また、色の名前ではなく、16進数で表現するのもOKです。

p {
  color: #ff0000;
}

 

 

これでも<p>タグに含まれている文字は、赤色になっていますね。

なお、今回の#ff0000みたく、連続して2つ同じ英数字が並んでいる場合は、#f00と省略して書けます。

p {
  color: #f00;
}

 

こうですね。16進数の色は、16進数 色で検索するとコードが簡単に分かるので便利です。

 

より直感的に書くのであれば、rgbを使うと便利ですね。

p {
  color: rgb(255, 0, 0);
}

 

これも同様に、<p>タグの文字が赤色になります。

 

色の指定方法をまとめておきましょう。

色の指定方法
  • 方法① : 英語で文字色を指定する
  • 方法② : 16進数で文字色を指定する
  • 方法③ : rgbで文字色を指定する

 

上記のとおりです。

僕は16進数が好みですが、お好きな方法で装飾してみてください。

 

background-color(背景色を変更する)

 

文字の背景色を変えたいときは、background-colorを使います。

 

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>CSS入門</h2>
  <p>CSSは、文字に装飾するための言語です。</p>
</body>
</html>

 

CSSファイル

p {
  background-color: seashell;
}

 

上記のような装飾をすると、以下の画像のように背景色を変更できます。

HTML CSS入門14

 

もちろん、16進数を使って色を指定することも可能です。

p {
  background-color: rgb(167, 214, 255);
}

 

良い感じの色ですね。

 

colorbackground-colorを併用することも可能です。

p {
  color: blue;
  background-color: rgb(167, 214, 255);
}
HTML CSS入門14

 

このように、色を変更することで、だいぶWebサイトらしさが出てきます。

色変更は、必須中の必須なので、ぜひおさえておきましょう。

 

【HTML/CSS入門⑮】背景画像を使いこなそう!

HTML_CSS入門⑮ 背景画像

 

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    <h2>CSS入門</h2>
    <p>CSSは、文字に装飾するための言語です。</p>
  </div>
</body>

</html>

 

div{
  background-image: url(images/bg-image1.jpg);
  height: 600px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  
}

 

【HTML/CSS入門⑯】余白を習得して見やすいサイトにしよう!

HTML_CSS入門⑯ 余白

余白を使いこなして、見た目の良いWebサイトを作っていきましょう。

 

▼YouTube動画はこちら

 

余白の取り方は、以下の2つあります。

  • padding : ブロック要素の”内側”に余白を取る
  • margin : ブロック要素の”外側”に余白を取る

 

padding(内側に余白を取る)

 

ブロック要素の”内側”に余白を取るには、paddingを使ってあげます。

 

HTMLファイル

今まで使っていた<h2>タグと<p>タグを、<div>タグで囲ってあげましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h2>CSS入門</h2>
    <p>CSSは、文字に装飾するための言語です。</p>
  </div>
</body>
</html>
CSS入門11

<div>タグは、意味を持たないブロック要素だったので、見た目は特に変化しません。

この<div>タグに対して、paddingを当てていきたいと思います。

 

CSSファイル

div {
  background-color: tomato;
  padding: 20px;
}

背景色をトマト色にして、padding20pxで取ってみると、以下のようになります。

HTMLCSS16

これだけだと、本当にpaddingが効いているのか分かりづらいので、paddingを当てる前の、元々の<div>を見てみましょう。

div {
  background-color: tomato;
  /* padding: 20px; */
}
HTMLCSS16

元々は、こんな感じになっています。この画像と比較すると、「paddingは内側に余白を取っている」ことが分かりますね。

※画像だと少し分かりにくいので、ぜひYouTube動画をご覧ください( ;  ; )

 

なお、padding: 20px;のように書くと、上下左右に20pxずつの余白を取っていることになります。

以下のように書くと、”上下”と”左右”を別々で書けます。

div {
  background-color: tomato;
  /* padding: 上下 左右; */
  padding: 20px 20px;
}

 

たとえば、padding: 0px 20px;でスタイルを当てると、以下のような結果になります。

HTMLCSS16

上下には余白がないけど、左には余白がありますね。

※本当は右にも余白があるけど、文字がないので分かりづらいです。

 

さらに、上下左右をバラバラにして書くと、以下のようになります。

div {
  background-color: tomato;
  /* padding: 上 右 下 左; */
  padding: 20px 20px 20px 20px;
}

 

これでも見た目は変わらず、padding: 20px;と同じ意味です。

順番が若干紛らわしいですが、これは時計回りですね。

 

なお、どこか一箇所だけ余白をつけたいときには、以下を使います。

  • padding-top: 20px; : 上に20px、内側の余白をあける
  • padding-right: 20px; : 右に20px、内側の余白をあける
  • padding-bottom: 20px; : 下に20px、内側の余白をあける
  • padding-left: 20px; : 左に20px、内側の余白をあける

 

margin(外側に余白をつける)

 

ブロック要素の”外側”に余白を取るには、marginを使ってあげます。

div{
  background-color: tomato;
  margin: 40px;
}

 

paddingのときは、<div>の内側に余白ができましたが、marginではブロックの外側に余白ができています。

 

要するに、marginの場合は、ブロックの大きさに変化がありません。単純にブロックの外側に余白を取るだけです。

 

なお、paddingのとき同様に、”上下”と”左右”を別々で書けます。

div{
  background-color: tomato;
  /* margin: 上下 左右; */
  margin: 0px 40px;
}

 

 

もちろん、どこか一箇所だけ余白をつけたいときには、以下のようになります。

  • margin-top: 40px; : 上に40px、外側の余白をあける
  • margin-right: 40px; : 右に40px、外側の余白をあける
  • margin-bottom: 40px; : 下に40px、外側の余白をあける
  • margin-left: 40px; : 左に40px、外側の余白をあける

 

【HTML/CSS入門⑰】idとclassを使って楽に装飾しよう!

HTML_CSS入門⑰ id class

 

 

【HTML/CSS入門⑱】開発前に!CSSのリセットを学ぼう!

 

 

【HTML/CSS入門⑲】HTML/CSS入門まとめ!簡単なWebサイトを作ろう!

 

 

【HTML/CSS入門⑳】HTML/CSS入門まとめ!簡単なWebサイトを作ろう②!