HTML文書にCSSを適用する メディアクエリ

Question

HTML文書にCSSを適用したいのですが
その中でメディアクエリの書き方を教えていただきたいです。

例えば下記のようなHTML

<style>
.text0101{text-align: center;display: block;}
.text010101{text-align: left; font-size: 15px;}

@media screen and (max-width: 768px)
.text010101{text-align: left; font-size: 10px;}

</style>

@media screen and (max-width: 768px)をCSSに記載する様に書けば
HTML文書にもメディアクエリは適用されますか？

されない意場合はどうすれば
HTML文書にメディアクエリを適用させるのか教えて頂きたいです。

Comments

[maisumakun]

「HTML文書にメディアクエリが適用される」とは、どのような状態になることを指していますか？それは「メディアクエリの適用されたCSSをHTML文書に適用する」こととは違うものを指すのでしょうか？

[rola.716]

説明が足りず申し訳ありません。「メディアクエリの適用されたCSSをHTML文書に適用する」ことではなく、
HTML文書のみでスタイルをいじるということです。

既存のHTML、CSSがあるなかで、
HTMLだけをいじって修正などする際に、メディアクエリは適用させるのでしょうか。

[maisumakun]

> HTML文書のみでスタイルをいじるということです。

それは、「HTMLの中に埋め込まれた<style>内のCSSを書く」ことで実現して問題ない、ということでしょうか？

[Lhankor_Mhy]

>HTML文書にもメディアクエリは適用されますか？

試してみた結果はどうでしたか？

[rola.716]

「HTMLの中に埋め込まれた<style>内のCSSを書く」
上記の通りです！

Answer 1

単純に、メディアクエリの書式が正しくないだけかと思います。

<style>
/* 中略 */

@media screen and (max-width: 768px){
  .text010101{text-align: left; font-size: 10px;}
}
</style>

メディアクエリには、適用範囲を指定するための中括弧が必要です。

Comments

[rola.716]

その通りでした。
ありがとうございます。解決いたしました。