初心者向けCSSの基本と書き方そして練習の仕方

2023年9月17日
2023年9月18日
プログラミング
47View
0件

プログラミング

この記事で解決する悩み

CSSとはナニ？
CSSの基本的な書き方
CSSの文法
CSSの練習の仕方

わんポイント

このような悩みを解決します。

この記事を書いた人

プロフィール

HTMLとCSS　聞いたことはあるけど関係性や使い方がイマイチの人。

CSSを理解するのは意外と簡単。

どこの　何を　どうする。

これをCSSコードに置き換えれば理解ができます。

CSSってなに？

CSSとは、ウェブページのデザイン・レイアウトなど、WEBの見え方を変えるために開発されたプログラミング言語のひとつです.

CSS・・・『Cascading Style Sheets』カスケイディング・スタイル・シートって読みます。

CSSが無いとどうなる？

『CSSのあるWEBページ』

　普段目にするWEBページはCSSコードで見え方が調整されています。

『CSSのないWEBページ』

　　CSSが無いとレイアウトが崩れて見にくいWEBページになります

CSSでできること

CSSでできることを簡単に説明します。

例えば、Pタグで囲まれた文字を好きな色に文字を変えたいとき。

<p>CSSサンプル</p>

ブラウザでの表示

CSSサンプル

CSSコードで文字の色を赤に変えて見ましょう。

<p>CSSサンプル</p>

p {
    color: red;
}

ブラウザでの表示

CSSサンプル

CSSコードをさらに追加して、文字の大きさを変えてみます。

<p>CSSコード</p>

p {
    color: red;
    font-size: 18px;
}

ブラウザでの表示

CSSサンプル

CSSコードを書くことで、単調な文字に装飾を施すことができます。

CSSを見てみる

今、WEBブラウザーで見ているコンテンツに使われているCSSコードを見ることができます。

ブラウザによってショートカットキーは違いますが、代表的なブラウザでの操作を紹介します。

GoogleChromeの場合

Windos・・・画面上で『F12』

Mac・・・・画面上で『Command + Option + I』

EDGEの場合

Windos・・・画面上で『F12』

safariの場合

Mac・・・・画面上で『Command + Option + I』

CSS、書き方の3つの方法

CSSファイルをHTMLファイルと別に作る

HTMLtoCSS

HTMLファイルの中にstyleタグを使って書く

HTMLincss

HTMLタグの中にスタイルを書く

HTMLinstyle

CSSの基本的な書き方

CSSの書き方には、3パターンの書き方があることを説明しました。

試しにHTMLの styleタグの中にCSSを書いて見ましょう。

HTMLファイルのstyleにCSSコードを書いてみる

テキストエディタを起動する

ここではVisualStudio Codeを使用して説明します。

『file』→『New Text File』の順でクリックします。

『select a language』クリックします。

HTMLをクリックします。

何もない画面になります。

HTMLコードを入力する

VisualStudioCodeなら、ベースとなるコードが簡単に入力できます。

何もないエディタの画面で半角の『！』（びっくりマーク）を入力して『TAB』キーを押します。

エディタ内に土台となるHTMLのコードが自動で作成されます。

エメット

表示されたコードの＜body>タグの次の行からHTMLコードを入力するのですが

面倒な方のために、下のコードをコピーして使用してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSコードを入力してみる</title>
</head>
<body>
    <div id="head_div">
        <h1>CSSコードを入力してみる</h1>
        <p>Pタグで囲まれた段落です</p>
    </div>
    <div class="main_div">
        <h2>h2見出し</h2>
        <p>h2見出しの段落です</p>
    </div>
</body>
</html>

入力したコードを保存します。

保存のショートカットキー『CTRL』＋『ｓ』キーを押すと保存する画面が表示されるので

適当なファイル名をつけて保存します。

保存した場所は忘れないでください。

ここでは、デスクトップに保存します。

作成したHTMLファイルをブラウザにドラッグします。

ブラウザに入力したHTMLコードの結果が表示されます。

CSSコードを書いてみる

試しにCSSを書いて、表示されている内容を変えて見ましょう。

<head>と</head>タグの間に
<style> </style>タグを記入します。

<style>
    h1 {
　　    color: red;
    }
</style>

このCSSコードの意味は
h1タグの文字の色を赤色に変更
します。

VisualStudioCodeで色の指定をすると、色のアイコンが表示されます。

保存してからのブラウザで再表示

Visual Studio Codeで『CTRL』＋『ｓ』キーを、Macでは『command』＋『s』キーを押します。

ブラウザで再読み込みをします。

Windows：F5キー
Mac 『command』＋『R』キー

<h1>タグで囲まれた文字が赤色に変わってます。

CSSの文法

CSSの基本文法

CSSには

セレクタ
プロパティ
値

の3部構成になっています。

セレクタ・・・どこを操作するかを指定
プロパティ・・セレクタで指定したところの何を変えるのかを指定
値・・・・・・どのように変えるのかを指定

セレクタ

セレクタで、どの箇所のデザインを変更するか指定します。
ここに、タグ名、クラス名、id名を指定します。

プロパティ

プロパティは、セレクタで指定されて箇所の何を変更するかを指定します。

色を変えるのか、文字の大きさを変えるのか　などを指定できます。

値

どのように、見え方を変えるのかを指定します。

例では、h1の文字を赤色に変更する書き方になります。

プロパティと値は『{』で囲む

セレクタの次に　波括弧で
プロパティ　と
値　を　囲みます。

プロパティと値はコロンで繋ぐ

プロパティと値は常に一緒に記入します。

プロパティだけだは機能しません。
値だけでも機能しません。

プロパティを記入したら値を『：』コロンでつなぎます。

複数のプロパティを指定する

プロパティは複数指定することができます。

複数指定するときは
『；』セミコロンで指定します。

CSSコードの練習

HTMLやCSSを気軽に練習できたならどんなに楽しいでしょう。

そお思っている方には『CodePen』がおすすめ

codepenとは

codepenとはWEB開発に必要な、HTML,CSS,JavaScriptの3つのコードを実行結果を見ながら練習もできる

WEBサービスです。

codepenに登録する

codepenを利用にあたり、事前に登録する必要があります。

下記のURLにアクセスして登録を済ませましょう。

有料プランがありますが、もちろん無料プランでOKです。

Googleアカウント、Githubアカウント、facebookアカウントを利用することもできます。

無事登録されると画面が表示されるので『Pen』をクリックします。

codepen

HTML、CSS、Js入力画面が表示

HTML練習

codepenに入力してみる

HTMLにコードを入力すると
下の枠に結果が表示されます。

CSSコード入力欄にHTMLを就職するコードを入力します。

CSSコードの結果が反映されます。

まとめ

今回は、HTMLを装飾するCSSコードの基本を説明しました。

クリックして読みたい項目まで移動できます！

最新情報をチェックしよう！

フォローする