【htmlコーディング】CSSとは？CSSを覚えてホームページをおしゃれにしよう！

htmlコーディング
2021.04.27

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

今回は、CSSとは何か？代表的なCSSをご紹介します。
CSSを覚えてホームページをおしゃれにしよう！

CSSとは？

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、頭文字をとって「シーエスエス」と呼びます。

HTMLと同様、こんな難しい名前を覚える必要はなく、ホームページをおしゃれにリッチにするものだと覚えればOKです。

CSSもファイルで、「◯◯◯.css」のような1つのファイルになります。

CSSファイル単体では意味がなく、HTMLファイルとリンクさせることでスタイルを効かせることができます。

CSSの中身

CSSの中身も文字でいっぱいです。
見ても最初はさっぱりなので、まずはどのようなことが起きるか実際に書いてみましょう。

CSSをリンクさせる

先ほどお伝えした通り、CSSファイル単体では意味がないので、HTMLファイルとリンクさせましょう。
まずは何でも良いのでテキストエディターを開き、以下コードをコピーして「index.html」とファイル名をつけて保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>○○○</title>
    <meta name="keywords" content="○○○,○○○,○○○">
    <meta name="description" content="○○○">
</head>
<body>
    <h1>
        <img src="https://www.good-f-design.com/wp-content/uploads/2021/04/logo.png" alt="初心者のためのWebデザイナー講座 good-f DESIGN">
    </h1>
    <p>
        初心者のためのWebデザイナー講座<br>
        未経験からWebデザイナーを目指そう!!
    </p>
    <ul>
        <li><a href="#">Webデザイン</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">htmlコーディング</a></li>
    </ul>
</body>
</html>

次に、7行目と8行目の間に、以下コードを追加して保存します。

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

このコードが「sytle.css」ファイルを読み込む記述になります。

CSSを書いてみよう！

HTMLとCSSがリンクできたら、実際にCSSファイルにスタイルを書いてみましょう。

index.htmlと同じようにテキストエディターで以下コードを書いて「style.css」とファイル名をつけて保存します。

ここで注意なのが、index.htmlとstyle.cssは同じフォルダの中に入れる必要があります。
必ず同じフォルダというわけではありません。今回の例の場合です。

p {
    color: #f00;
}

ブラウザで確認

index.htmlとstyle.cssが保存できたら、index.htmlをダブルクリックしてブラウザで確認してみましょう。

テキストが赤字になりましたでしょうか？

解説

今回の例ではpタグのテキストカラーを赤にしてみました。

index.htmlの中の「<p></p>」に対して、style.cssで「p { color: #f00; }」と記述し、テキストカラーを赤にしました。

このようにstyle.cssに記述することで、index.html、つまりページの目に見える表示をおしゃれにすることができます。

もうちょっとおしゃれにしてみる

赤字だけだとおしゃれじゃないので、もうちょっとおしゃれにしてみましょう。
以下コードをstyle.cssに書いてみます。
先ほど書いたコードは消して上書きしましょう。

html, body, h1 {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

h1 {
    text-align: center;
    background: #eee;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 30%);
}

p {
    font-weight: bold;
    margin: 50px 0;
    text-align: center;
}

ul {
    text-align: center;
}

li {
    list-style: none;
    display: inline-block;
    border: 1px solid #ccc;
    margin: 0 20px;
}

a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 20px;
}

a:hover {
    background: #eee;
}

保存したらブラウザで確認してみましょう。
ホームページっぽくなりましたでしょうか。

解説

先ほどpタグを赤字にしたように、全てのタグにスタイルを書きました。
1つのタグに対して複数のスタイルを記述することができます。

pタグの例だと、

p {
    font-weight: bold; /* テキストを太字にする */
    margin: 50px 0; /* 上下のマージン（スペース）を50pxあける */
    text-align: center; /* テキストをセンターにする */
}

のような感じです。

このようにCSSはホームページを作る上でとても重要になります。
HTMLのタグと、CSSのスタイルを覚えてしまえば、コーディングができるようになりますので、少しずつで良いので覚えていきましょう！

代表的なスタイル

頻繁に使う代表的なスタイルをご紹介したいと思います。

テキスト関連のスタイル

テキストのカラーやサイズを指定するスタイルです。

color: #000; /* テキストカラーを指定する */
font-size: 20px; /* テキストサイズを指定する */
font-weight: bold; /* テキストを太字にする */

レイアウト関連のスタイル

スペースを入れたり、ボーダーを入れたりするスタイルです。

background: #eee; /* 背景色を指定する */
margin: 0; /* マージン（外側のスペース）を指定する */
padding: 0; /* パディング（内側のスペース）を指定する */
border: 1px solid #ccc; /* ボーダーを指定する */
float: left; /* 要素を横並びに設置する */

もっと書こうと思いましたが、数が多くて書ききれないので諦めました。。
以下サイトにまとまっているのでご興味あればご覧ください。
MDN Web Docs – CSS リファレンス

最後に

CSSについてご紹介させていただきました。
CSSもたくさんあり覚えるのが大変かと思いますが、全てを覚える必要はありません。

「CSSでこんなことできないかな？」のような考え方で検索すれば、意外とやりたいスタイルが見つかります。

なのでまずは良く使うスタイルを覚えて、CSSに慣れることからはじめましょう！

今回は、

  • CSSとは？
  • CSSのリンク方法
  • CSSの書き方
  • 代表的なスタイル

についてお伝えしました。

最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。

コメント

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