CSSの書き方を覚えてオシャレなWebサイトを作るための入門

プログラミング

おはこんにちばん

どうも、まこってぃです

 

htmlの書き方が分からない方は是非こちらの記事をお読み下さい

CSS

ファイル作成方法

ではまず自分の好きな場所に好きな名前でフォルダを作成してください

私は今回、デスクトップに「sample」と言う名前でフォルダを作成します

f:id:makoxti:20210312231059p:plain

では次に作成したフォルダの直下にhtmlファイルを作成してください

ファイル名は何でも大丈夫です

f:id:makoxti:20210312231216p:plain

次に、htmlファイルがある階層に「css」という名前でフォルダを作成してください

f:id:makoxti:20210312231410p:plain

そしたら、cssフォルダの中に好きな名前でcssファイルを作成してください

拡張子が「.css」であれば大丈夫です

f:id:makoxti:20210312231536p:plain

これでcssファイルの作成は完了です

 

では次にhtmlファイルからcssを読み込んであげましょう

cssの読み込みは<head></head>のタグの中に書きます

 

では○○の部分は自分が作成したファイル名に置き換えてこのように記載してください

<link rel=”stylesheet” href=”css/○○.css”>

 

html全体だとこの様になります

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
</head>
<body>
</body>
</html>

 

はい、これでcssファイルを読み込む準備が完了しました。

では最後にhref=””に書いた内容を簡単に説明します

まず読み込むファイルはすべてhtmlファイルがある場所から考えます

 

css」はフォルダ名です

この部分ですね

href=”cssで、フォルダ名が終わったので「/」で区切ります

「css/」となります

読み込みたいファイルはcssフォルダのすぐ配下にあるので、「css/」の後は対象のファイル名をフルネームで指定すればOKです

background-colorプロパティ

その前に先に解説しておきたい事が1つあります

それは何かというと、cssはhtmlファイルにも書くことができます

 

しかし、僕的にはおすすめしません

なぜかというと、保守性(メンテナンス)が悪くなるからです

保守性とは何かというと、開発が終わった後も機能追加やバグ対応で他の誰かがソースコードを見ることがあります

その時、読みづらいコードだったら修正に余計時間がかかってしまいます

要は

  • 誰が見ても読みやすいコード
  • 修正のしやすさが保守性

だといえます

 

なので、cssを書くときはちゃんとcssファイルに書きましょう

 

ちなみに、cssはカラーコードを使って色の指定をするので使いたい色のカラーコードを知りたいときはGoogleで「css カラーコード」と調べればすぐに出てきます

参考までに載せておきますね

 

では本題に入ります

background-colorは何をするためのプロパティかと言いますと背景に色をつけることができるプロパティになります

 

早速使っていきましょう

ではまず前回作成した任意のhtmlファイルを開いてください

 

bodyタグ内に下記のコードを追加してください

<div class=”backColor”></div>

 

次にcssファイルの編集です

background-color以外のプロパティについては今後のブログで解説するので気にしないでください

 

ではcssファイルに下記のソースを貼り付けてください

.backColor {
    background-color: #0000FF;
    height: 100px;
    width: 100px;
}

 

ファイル全体のコードはこうなります

◆html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="backColor"></div>
</head>
<body>
</body>
</html>

 

◆css

.backColor {
    background-color: #0000FF;
    height: 100px;
    width: 100px;
}

 

ではこちらをブラウザで表示させてみましょう

◆表示結果

f:id:makoxti:20210314224444p:plain

青い四角が表示されました

htmlにはそれっぽい記述をしてないのに、なんで??って感じですよね

 

では解説していきます

まず、htmlで重要なのは

<div class=”backColor”></div>

上記の中の「class=”backColor”」

になります

 

cssはhtmlの中の指定したidもしくはclassに対して修飾をします

基本的にはclassですね

 

なので、今回は背景色を指定するdivタグに対してclassでbackColorを指定し、cssファイルでbackColorのクラスに対して「青」の色をつける指定を行いました

なので、divで領域を取った箇所が青色で塗りつぶされているのです

今回はクラスの名前をbackColorとしましたが、class名は任意で大丈夫です

 

cssファイルでクラスを指定して修飾を行う場合は、構文はこうなります

.クラス名 {
    プロパティ: ○○;
}

 

ちなみに、色をつけた箇所の中に文字を表示させることも可能です

試しにhtmlファイルのdivの箇所をこの様に書き換えてブラウザで表示させてみましょう

  <div class="backColor">
    <p>divタグのなかです</p>
  </div>

 

◆表示結果

f:id:makoxti:20210314225527p:plain

ちゃんと文字が表示されました

heightプロパティ

heightプロパティは何の役割をするのか 、簡単です。

高さを指定するプロパティです

 

どのような時に使うかと言いますと、主にdivタグとあわせて使用します

divタグは領域を取りますが、横幅と高さは指定してあげないと領域を取る意味がありません

 

htmlで画面を作るときはdivで横幅と高さを指定して領域を取り各コンテンツを作成していきます

イメージしやすいもので言うとパズルみたいなものですね

それでは構文から見ていきましょう

height: ○○;

○○には数字が入り、その後に単位が入ります

では実際に試してきましょう

皆さんは自分の好きな数字を入力してもらって大丈夫です

cssファイルにこの様に記載してください

height: 100px;

 

ではこれをブラウザで表示させてみましょう

◆表示結果

f:id:makoxti:20210315184949p:plain

高さがちゃんと指定したpx通りにとれています

これじゃあちゃんととれてるかわからないよって方はheightの記述を削除してみましょう

 

cssを背景色の指定だけにします

background-color: #0000FF;

 

これを表示させてみると・・・

f:id:makoxti:20210315185142p:plain

先ほどと変わりましたね

文字の高さ分しか高さがなくなりました

最後にプログラム全体のソースを貼っておきますね

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="backColor">
    <p>divタグのなかです</p>
  </div>
</head>
<body>
</body>
</html>

 

.backColor {
    background-color: #0000FF;
    height: 150px;
}

widthプロパティ

widthプロパティは何の役割をするのか 、簡単です

横幅を指定するプロパティです

どのような時に使うかと言いますと、主にdivタグとあわせて使用します

 

divタグは領域を取りますが、横幅と高さは指定してあげないと領域を取る意味がありません

htmlで画面を作るときはdivで横幅と高さを指定して領域を取り各コンテンツを作成していきます

イメージしやすいもので言うとパズルみたいなものですね

それでは構文から見ていきましょう

width: ○○px;

 

○○には数字が入り、その後に単位が入ります

では実際に試してきましょう

皆さんは自分の好きな数字を入力してもらって大丈夫です

cssファイルにこの様に記載してください

width: 150px;

 

ではこれをブラウザで表示させてみましょう

◆表示結果

f:id:makoxti:20210315195817p:plain

前回学習したheightプロパティと組み合わせるとこのように高さと横幅を指定して領域を取ることができました

最後にプログラム全体のソースを貼っておきます

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="backColor">
    <p>divタグのなかです</p>
  </div>
</head>
<body>
</body>
</html>

 

.backColor {
    background-color: #0000FF;
    height: 150px;
    width: 150px;
}

text-alignプロパティ

text-alignプロパティは何の役割をするのかというと文字を左寄せ・中央寄せ・右寄せをするプロパティです

 

どのような時に使うかと言いますと、主にdivタグとあわせて使用します

構文はこのようになります

text-align: ○○;

 

○○の部分には下記を当てはめます

  • 左寄せの場合:left
  • 中央寄せの場合:center
  • 右寄せの場合:right

 

今回は中央寄せの実装をしていきたいと思います

cssはこのようになります

    text-align: center;

 

では実際にブラウザで表示して確認してみましょう

◆表示結果

f:id:makoxti:20210317162224p:plain

ちゃんと文字が中央に表示されていますね

 

最後にソースコードを載せておきます

  • html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="test">
    <p class="test2">divタグのなかです</p>
  </div>
</head>
<body>
</body>
</html>

 

  • css
.test {
    background-color: #0000FF;
    height: 150px;
    width: 500px;
    text-align: center;
}

vertical-alignプロパティ

vertical-alignプロパティは何の役割をするのかというとdivタグの中でインライン要素を上揃え・中央揃え・下揃えをするプロパティです

 

構文はこのようになります

vertical-align: ○○;

 

○○の箇所には下記を当てはめます

top:上揃え

middle:中央揃え

bottom:下揃え

 

今回は中央揃えを試していきます

ではさっそくプログラムからです

  • html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="test">
    <span class="test2">spanタグ</span>
  </div>
</head>
<body>
</body>
</html>
  • css
.test {
    background-color: #0000FF;
    height: 150px;
    width: 500px;
    text-align: center;
    vertical-align: middle;
}
.test2 {
    vertical-align: middle;
}

 

上記のソースをブラウザで表示します

◆表示結果

f:id:makoxti:20210317194716p:plain

ちゃんとvertical-alignを書いたpタグの文字が中央揃えされています

paddingプロパティ

paddingプロパティは何の役割をするのかというと要素の中で余白を作りたいに使用するプロパティです

 

構文はこのようになります

padding: ○○□□;

 

○○の部分にはが入ります

□□の部分には単位が入ります

 

ではさっそく試してみましょう

今回は30pxを指定します

◆表示結果

f:id:makoxti:20210319222159p:plain

分かりづらいですよね

これでちゃんと上下左右に30pxの余白がとれています

 

Windowsの方ならF12を押すと開発者ツールというものが見れます

詳しい説明は省きますが、そのツールでちゃんとcssが効いている事が確認できます

f:id:makoxti:20210319222359p:plain

はい、paddingの箇所がちゃんと上下左右30pxとれています

marginプロパティ

marginプロパティは何の役割をするのかというと要素の外で余白を作りたいに使用するプロパティです

 

paddingと似ていますが、 異なるのは要素の内側なのか外側なのかということになります

構文はこのようになります

margin: ○○;

padingと同じように○○には値と単位が入ります

では今回はdivを2つ使って実際に試していきましょう

◆html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="test">
  </div>
  <div class="test">
  </div>
</head>
<body>
</body>
</html>

 

◆css

.test {
    background-color: #0000FF;
    height: 150px;
    width: 500px;
    margin: 20px;
}

 

では上記のコードをブラウザで表示させてみましょう

◆表示結果

f:id:makoxti:20210321111104p:plain

ちゃんと上下左右に20px分の余白がとれています

 

ではちゃんとmarginで余白がとれているのか、marginの箇所をコメントアウトして表示を確認してみましょう

margin箇所をコメントアウトします

/* margin: 20px; */

これでmarginのcssは効かなくなります

 

◆表示結果

f:id:makoxti:20210321111252p:plain

2つのdivが合体して1つの四角になってしまっています

なので、先ほどのコードでmarginが効いていたのがわかります

font-weightプロパティ

font-weightプロパティは何の役割をするのかというと文字を強調したいに使用するプロパティです

 

htmlのブログでbタグとstrongタグを紹介したのですが、効果は同じです

それをhtmlとして書くか、cssとして書くのかの違いです

 

決まった文字を強調したいのであればbタグやstrongタグでもいいと思いますが 、他にも同じcssを適用する箇所があるのであれば、間違いなくcssで書くことをお勧めします

それはなぜか、メンテナンス性がぐっと上がるからです

 

例えば、文字のサイズを大きくしてmarginやpaddingをつけて文字を強調するような箇所が同じページ内で1個以上あるのであればcssで書いた方がhtmlではclassを指定してあげるだけになります

 

そしてclassを指定した箇所を変更したいとなれば、cssのclassを変更してあげれば、自動的に変更が適用されます

ではまず構文から見ていきましょう

font-weight: ○○;

 

○○の箇所には100刻みの

100~900までの数字または

bolodを指定してあげます

 

今回は800とbolodを試してみます

ではまずソースからいきます

◆html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
  <div class="test">
  </div>
  <div class="test">
  </div>
  <div>
    <p class="test2">boldを使っています</p>
    <p class="test3">fffff</p>
  </div>
</head>
<body>
</body>
</html>

 

◆css

.test {
    background-color: #0000FF;
    height: 150px;
    width: 500px;
}
.test2 {
    font-weight: bold;
}
.test3 {
    font-weight: 800;
}

 

ではこちらをブラウザで表示してみましょう

◆表示結果

f:id:makoxti:20210323212352p:plain

 

大体同じくらいですね

今までの経験上、基本的にはboldを使うのが普通なのかなといった感じです

 

逆に、数字を指定しているソースは見たことがありません

もしかしたらWebデザイナーの方達は数字を使うのかもしれませんが、基本的にはboldを使えばいいと思います

line-heightプロパティ

line-heightプロパティは何の役割をするのかというと行間を調節したいに使用するプロパティです

 

基本的に文章を書くときはpタグを使って書いていきますが、pタグの縦幅よりもっと幅をあけて見せたいという時に使用するタグになります

 

では構文から見ていきましょう

line-height: ○;

○の部分には数字が入ります

もちろん単位を指定することも可能ではありますがちょっと面倒くさいです

 

例えば%を指定する場合親要素に対しての割合になるので使う場所によっては同じ値を指定しても、幅が変わってしまいます

そんな時は単位なしがおすすめです今回は単位なしで試していこうと思います

 

ではまず「1」を指定して見てみます

f:id:makoxti:20210324225823p:plain

 

普通にpタグを使って書いているのとほとんど変わりませんね

では次は「3」で試してみましょう

f:id:makoxti:20210324225928p:plain

かなり幅が取られますね

では「2」くらいがちょうどよさそうなので、試してみましょう

f:id:makoxti:20210324230037p:plain

個人的にはいい感じかなと思います

background-imageプロパティ

background-imageプロパティは何の役割をするのかというと背景に画像を設定したい時に使用するプロパティです

 

それではまず、背景に設定する画像を保存します

保存先は、htmlファイルがあるフォルダにimgというフォルダを作って、その中に保存してください

imgとはイメージの略です

画像は基本的にこのフォルダ名の中に格納します

こんな感じです

f:id:makoxti:20210325191657p:plain

私は今回「sample.jpg」と保存しました

では次に構文を見ていきましょう

background-image: url(“画像のパス”);

 

他のプロパティと比べると少しだけ難しくなりましたが、大丈夫です

()内に画像のパスを指定してあげるだけです

 

今回は汎用的に使える相対パスで指定をします

ではhtmlを書いていきます

◆html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/sample.css">
  <meta charset="UTF-8">
  <title>css勉強</title>
</head>
<body>
  <div class="test"></div>
</body>
</html>

 

◆css

.test {
    width: 300px;
    height: 300px;
    background-image: url("../img/sample.jpg");
}

 

ここで1つ注意してほしいことがあります

画像のパス指定ですがcssファイルが格納されている場所からのパスを指定するようにしてください

htmlファイルからではないので注意してください

では上記のソースをブラウザで確認してみましょう

◆表示結果

f:id:makoxti:20210325194002p:plain

ブラウザでちゃんと表示されました

ちなみに、私が選択した画像が黒なのでやっていないのですが画像の上に文字を書いて表示させることもできます

 

〇〇の部分に何か文章を書いて表示してみればわかると思います

<div class=”test”>〇〇</div>

ここまで読んでくださった方、お疲れさまでした!

沢山のプロパティを紹介してきましたが、これが全てのプロパティではありません。

あくまでよく使うプロパティのみを紹介しました

 

今後本気でWebデザイナーやプログラマー、システムエンジニアのようなIT業界に入りたいのであれば、しっかり専門のプロに学ぶべきだと思います。

そうしないと、もし入社できても仕事についていけず辛い思いをするのはあなたです。

現役システムエンジニア7年目の私から見たおすすめのプログラミングスクールを紹介しています。

サポートがしっかりしているスクールがいい、できるだけ安いスクールがいいといった方向けのスクールもあります。

相談やカウンセリングは無料なので、本気でプログラミングを学びたいのならすぐに行動しましょう

おすすめのプログラミングスクールへ

子供向けのスクールも紹介しています

子供向けのプログラミングスクールへ

コメント

タイトルとURLをコピーしました