html内にCSS・styleを直書きする方法と使い分け

↑結論コレです。

htmlタグの中にstyle属性を指定し、""の中にCSSを直書きします。以上。

　

コレだけだと寂しいのでもう少し詳しく説明します。

htmlタグにCSS・styleを直書きする方法

p{
    margin-top: 1em;
}

↑上記CSSをhtmlタグに直書きしたいときは↓下記のようにします。

<p style="margin-top: 1em;">テキスト</p>

このようにpに「margin-top: 1em」を指定したいときは、そのpタグに「style=""」を直書きし「""」のなかにCSSを書きます。

この場合この直書きしたhtmlタグにのみCSSが適用されます。

htmlファイル内にCSS・styleを直書きする方法

↓下記のようにhtml内に書きます。

<style>
p.example{
    color: red;
}
</style>
<p class="example">テキスト</p>

html内に<style></style>と書いてこの中にCSSを書きます。

<style>はhtml内のどこに書いてもOKです。
ただ、一般的にはhead内に書きます。それが難しい場合はなるべく上の方に書くことをオススメします。

この場合、このhtmlファイル内の該当するタグすべてにCSSが適用されます。

逆に言えば他のhtmlファイルには影響ありません。

複数の要素に直書きする方法

htmlファイル内にある複数の要素にCSSを指定させたいとき、それぞれのhtmlタグにstyle属性を指定して設定するのは非効率ですよね。

そんなときは上記で紹介したstyleタグを使いましょう。

例

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

<style>
.example2 li{
    border-bottom:1px solid #999;
    padding: 5px;
}
</style>

<ul class="example2">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

レスポンシブデザインで直書きする方法

ブラウザ幅によってデザインを変える「レスポンシブデザイン」も直書きが可能です。

styleタグで囲んだ後にCSSに書くように「@media(min-width:○○px)」と指定すればいいのです。

スマホとパソコンでCSSを切り替える直書き例

以下の例はブラウザの幅に応じて文字の色が変わります。ブラウザの幅を変えて確かめてみてください。

テキスト

<style>
@media(min-width:750px){
    p.example{
        color: red;
    }
}
</style>
<p class="example">テキスト</p>

レスポンシブデザインについては詳しくこちら↓

hoverを直書きする方法

hoverなどの疑似クラスはhtmlタグにstyle属性での直書きができません。

これもstyleタグを使いましょう。

例

<style>
.example3{
    display: inline-block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    transition: .3s;
}
.example3:hover{
    background: #0029d6;
    color: #FFF;
}
</style>

<div class="example3">マウスを乗せてね</div>

疑似クラスについてはこちら↓

CSSを外部ファイルに書く理由

CSSは一般的には外部ファイルに書き、htmlにリンクさせて使います。

なぜならhtmlのデザインは基本的に全ページ共通であり、外部CSS内の一か所を修正するだけで全ページ一気に修正することができるからです。つまり楽にするためにCSSを外部にするのです。

CSSの基本はこちら↓

htmlにCSSを直書きするのはこんなとき・メリット

一方でhtmlにCSSを直書きする方が楽な時もあります。

特定のhtmlタグ1箇所にしか適用しないとき

外部CSSを使う場合、htmlタグにclass名を書いて、外部CSSにそのclass名とCSSを書きます。外部CSSのメリットは複数のhtmlファイルや複数のhtmlタグへ一気に反映させることですが、反映箇所が1箇所にしかない場合、このメリットがなくかえってメンドウです。

こんなときはhtmlへCSSを直書きしてしまいましょう。

CSSを上書きしたいとき

htmlに直書きされたCSSは外部CSSで指定されたCSSより優先されます。
基本のCSSは外部CSSで指定しておき、このタグだけちょっと調節したいというときはhtmlに直書きしましょう。

そして直書きしたCSSをさらに上書きするには!importantを使います。

CSSの直書きがよくないとき・デメリット

下記の場合は直書きより外部CSSに書くことをオススメします。

CSSをたくさん指定するとき

ダメではないですが、htmlはできるだけ簡素であるほうがミスの減少につながります。

下記のように直書きされると修正が大変です。

<button style="background: #3c7cc6;display: block;width: 200px;text-align: center;font-size: 150%;color: #FFF;margin: 10px auto;text-decoration: none;transition: .3s;padding: 20px;border: none;border-bottom: 10px solid #FFF;border-top: 0px solid #FFF;">ボタン</button>

どうしても別ファイルCSSに書けないときはstyleタグを使った、htmlに直書きする方法を使いましょう。

<style>
.button{
    background: #3c7cc6;
    display: block;
    width: 200px;
    text-align: center;
    font-size: 150%;
    color: #FFF;
    margin: 10px auto;
    text-decoration: none;
    transition: .3s;
    padding: 20px;
    border-top: 0px solid #FFF;
}
</style>
<button class="button">ボタン</button>

チームで開発するとき

一般的にhtmlファイルにはhtmlだけ、CSSは外部CSSとされています。

これを自分ルールでhtmlに直書きしたり外部CSSに書いたりされるとチームの他の開発者が調整するとき、修正する箇所を見つけ出すのが大変になります。

ルールを統一しましょう。

まとめ

htmlタグにCSSを直書きする方法

タグに「style=""」を直書きし「""」のなかにCSSを書く

htmlファイル内にCSSを直書きする方法

htmlファイル内に<style></style>と書いてこの中にCSSを書く

レスポンシブやhoverの場合もこの方法

以上、html内にCSS・styleを直書きする方法と使い分けでした。