【HTML入門】styleタグやstyle属性を使って直接CSSを書き込もう!

みなさんこんにちは!

HTMLにCSSを直接かけたいとき、どのようにすれば良いか迷っていませんか?

  • styleタグを使ってHTMLに直接CSSを書きたい
  • styleタグとstyle属性の違いが分からない
  • よく見るdiv styleについて理解したい

という方から、

  • styleタグで直接書く方法だけでなくCSSを読み込みたいけど相対パスとかよく分からない

といった方に向けてこちらの記事で詳しく説明していくのでHTMLを学んでいる方は一緒に見ていきましょう!

styleタグとは

さて、それでは実際にstyleタグでHTMLファイルにCSSを書いて行くわけですが、その前にstyleタグってどんなもの?ということについて軽く見ておきましょう! 先程から挙げていますがstyleタグとはスタイルシートを記述するためのHTMLタグです。

headタグの中に入れて、適応するスタイルを書いていくのが基本ですが、HTMLとCSSを一つのファイルで管理できるので小規模の開発であれば見やすくて良いですね。

styleタグを実際に使ってみよう!

実際に見てみたほうが早いと思うので以下にコードを示します。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        body {
            background-color: #00ff00
        }

        .container {
            width: 90%;
            text-align: center;
        }

        .first-sentence {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="first-sentence">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

このように、<head></head>に囲まれた中に<style></style>を書くことで、きちんとスタイルがかかっています。しかしこの方法は、量が多くなればなるほど可読性が落ちて中規模以上の開発にはあまり向きません。style属性とは

次に、style属性についてみていきましょう。style属性とstyleタグが混ざっている方も多いですが、style属性は属性ですので他タグの属性として機能します。つまり、divタグにclass属性をつけるのと同じように使うということです。

style属性を実際に使ってみよう!

こちらも実際に見ていきましょう。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body style="background: #00ff00;">
    <div style="text-align: center;">
        <p style="font-weight: bold;">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

いかがでしょうか。同じ状態が再現できましたね。こちらもコードを見てもらうと分かるようstyleを属性として付与することでCSSを書くことができます。いちいちclassを付与する必要がないので楽ですね。

しかし、同じ要素には毎回styleを書かないといけませんし、コードの量が増えれば同じ変更を何度もしなければ行けなかったりと保守性はかなり悪いです。こちらも基本的には、小規模の開発や一部だけ修正するときなどは便利です。

よく見るdiv styleについてみてみよう

実例としては良くdivタグにstyle属性がついていることが多いですね。クラスを付与しなくて良いので、一つのdivだけスタイルをかけたいときなどに使われることが多いようですね。

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body style="background: #00ff00;">
    <div style="text-align: center;">
        <p style="font-weight: bold;">これはテストの文章です。</p>
    </div>
    <div>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

こんな感じで一つのdivにだけstyle属性をかけてやれば、

このようにスタイルの範囲を管理できます。

CSSを読み込んで、HTMLにスタイルをかけよう!

さて、今までstyle属性やstyleタグでCSSを書いてきましたが、やはりCSSファイルを別に作って読み込むというのが一般的です。先程も挙げたとおり保守性が悪いですからね。

そこで実際にどのように読み込むのかということも見ておきましょう。

samurai
├── index.html
└── style.css

まずはこのようなファイル構造でファイルを用意しました。中身を見ていきます。

index.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <p class="first-sentence">これはテストの文章です。</p>
        <p>今日はいい天気ですね。</p>
    </div>
</body>

</html>

style.css

body {
    background-color: #00ff00
}

.container {
    width: 90%;
    text-align: center;
}

.first-sentence {
    font-weight: bold;
}

画像のようにきちんとスタイルがかかっていることが確認できますね。CSSファイルを読み込むには別ファイルで.cssという拡張子のファイルを作り、HTMLファイルで<link rel="stylesheet" href="相対パス”>

というような感じで読み込むことができます。ファイルを分割することでデータが見やすくなるのでこのようにするのが一般的です。

相対パスとは

href=“”の中に相対パスを書くのは分かったけど相対パスの書き方が分からないという人もいると思います。相対パスとは呼び出すファイルから見て呼び出されるファイルがどこにあるかということを示すパスです。

予備知識としては、

  • 同階層が、”./“
  • 一つ後の階層が、”/“
  • 一つ前の階層が、”../“

になります。例えば

samurai
├── css
│   └── style.css
└── index.html

このような階層で、index.htmlからstyle.cssを呼び出す相対パスは

href="css/style.css"

こうですし、

samurai
├── css
│   └── style.css
└── src
    └── index.html

こうであれば、

href="../css/style.css"

こうなります。因みに、同階層を示す”./“は省略可能ですので覚えておくようにしましょう。

ウェブサイト制作スキルで自由に働けるようになるには

「ウェブサイト制作の仕事を個人で請け負えるようになり、いずれは独立して場所に縛られずに働けるようになりたい」そんな理想の生活をするには、HTMLやCSSだけでなくJavaScriptやWordPress、PHPなどの技術も学ぶと良いです。

お客様の要望に応えるためには幅広く技術がないと答えきれないんですよね。実際にクラウドワークスでも以下のように、仕事獲得のコツとして複数の技術を持っておくことを勧めています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

「そんなに色々学ぶのに時間がかかるじゃん」っていうのが本音だと思いますので、そんなあなたはプログラミングスクールでの学習がおすすめです。

侍エンジニア塾では、あなたの理想の働き方やプログラミングを学ぶ目的から逆算してあなた専用のオリジナルカリキュラムを作成し、そのカリキュラムをあなたに理想の生活になるべく似ているような講師からマンツーマンで教わることで、独学よりもはるかに早く着実にスキルを身につけることができます。

受講期間のなかで仕事を請け負い、講師と共に納品して個人で仕事を請け負う全行程を学びながら収入まで得た受講生もいらっしゃいます。

無料体験レッスンでは、あなたの理想の生活から学ぶべきスキルやその学習方法をお伝えしていますので、以下のボタンよりお気軽にお申し込みください。オンラインでも受講可能です。

無料体験レッスンを申し込む

まとめ

いかがでしたでしょうか。今日は、styleタグとstyle属性の違いから使い方、また実際の現場で使われる相対パスでCSSファイルを読み込む方法ということについて説明してきました。

HTMLにCSSをかけることは基本中の基本ですので必ずマスターしておきましょう! それでは!!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説