opensourcetech
https://blog.hatena.ne.jp/opensourcetech/
Opensourcetechブログ
https://www.opensourcetech.tokyo/
HTML
CSS
Media Query
メディアクエリー
LinuCエヴァンジェリストの鯨井貴博@opensourcetechです。 今回は、以下の記事で作成したHTML/CSSをMedia Queryを使って条件によって切り替えてみようとおもいます。 www.opensourcetech.tokyo ブラウザの幅を変更を切り替え条件として、 header部の背景色を変更するようにしてみます。 方法 その1 まずは、HTMLファイル内のlinkを使います。 ブラウザの幅が、0-480px < 480-960px < それ以上 と変化することで使用するCSSファイルが変更されます。 <!DOCTYPE html> <html> <head> <titl…
190
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.opensourcetech.tokyo%2Fentry%2F20200814%2F1597416291" title="Media QueryでHTMLに適用するCSSを切り替えてみる - Opensourcetechブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
https://cdn-ak.f.st-hatena.com/images/fotolife/o/opensourcetech/20200813/20200813111516.png
Hatena Blog
https://hatena.blog
2020-08-14 23:44:51
Media QueryでHTMLに適用するCSSを切り替えてみる
rich
https://www.opensourcetech.tokyo/entry/20200814/1597416291
1.0
100%