<!DOCTYPE html>
<html lang="ja">
<!-- Head tag -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="https://contents.ogatism.net/ogatism.png">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!--Description-->
<meta name="description" content="レスポンシブデザインというものでは、PCもスマホも同じデザインを用いて、cssで制御する。
だから書き方に注意しないと、一部だけPC表示のようになってしまうのです。
その最たるミスはcssのwidthをピクセルで書くこと。">
<!--Author-->
<meta name="author" content="Yuji Ogata">
<!--Open Graph Title-->
<meta property="og:title" content="cssにwidthを固定ピクセルで書かないように"/>
<!--Open Graph Site Name-->
<meta property="og:site_name" content="ogatism"/>
<!--Page Cover-->
<meta property="og:image" content=""/>
<!-- Title -->
<title>cssにwidthを固定ピクセルで書かないように - ogatism</title>
<style>
</style>
<!-- Custom CSS -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-43476132-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-43476132-1');
</script>
<meta name="generator" content="Hexo 5.4.1"><link rel="alternate" href="/feed.xml" title="ogatism" type="application/atom+xml">
</head>
<body>
<div class="container zinnia-page">
<header>
<div class="zinnia-logo text-center">
<h1><a href="index.html"><img src="https://contents.ogatism.net/ogatismlogoB1.png" alt="" width="800" height="320" class="blog-header"></a></h1>
</div>
<div class="zinnia-menu text-center">
<nav class="navbar">
<div class="navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/categories/fortune/">オガティの星占い</a></li>
<li><a href="/about/">オガティとは</a></li>
<li><a href="/post/swiss/swiss_index/">Swiss Ephemeris</a></li>
<li><a href="/biz/">依頼・問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="zinnia-main-content">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<article class="single-blog-post">
<div class="post-header text-center">
<div class="single-tag">
<a href="/categories/diary/">雑記</a>
</div>
<h2 class="post-title">
<a href="/post/css-width-pixel">cssにwidthを固定ピクセルで書かないように</a>
</h2>
</div>
<div class="post-thumb">
<a href="/post/css-width-pixel"> <img src="https://contents.ogatism.net/ogatismlogoC1.png" alt=""></a>
<div class="post-overlay-meta">
<ul class="post-meta pull-left">
<li class="date">2016/09/19</li>
</ul>
</div>
</div>
<div class="post-content">
レスポンシブデザインというものでは、PCもスマホも同じデザインを用いて、cssで制御する。
だから書き方に注意しないと、一部だけPC表示のようになってしまうのです。
その最たるミスはcssのwidthをピクセルで書くこと。
<span id="more"></span>
これ、100pxとか200pxとかならいいけど、320pxを超えてなおかつviewportのwidth=device-widthなんてやってしまうとちょい困ったことに。
というのもiPhone5とかの横サイズは320pxなので。
横スクロールバーが出てきてしまうのです。
だからメディアクエリなどでcssを切り替える際には、％で指定すること。
100%にしておけばどんなデバイスでも表示可能ですから。
他にも幾つか注意する点はあるけど、個人的に一番やらかしてしまうミスがこいつですからね。
ま、iPhone5もそろそろ使っているユーザーは減ってきているかもしれないけど。
SEってのもあるからまだ320pxという世界には気をつけなければいけないです。
もちろんスマホの場合device-widthでviewportを設定させればそれ以上のwidthでもいいのですが。
ここら辺はサイトデザイン次第でもあるので、デザイン側と調整しましょうね。
ちなみに100%にしていてもborderとかつけてるとはみ出す可能性があります。
そういう時はbox-sizingの設定をしましょ。
だからモバイルファースト、スマホデザインを先に作ったほうが色々と良いのですよねえ。
そもそもそんな凝ったデザインにしないことが大前提ですが。
</div>
<div class="single-post-meta ">
<div class="single-tag ">
</div>
</div>
</article>
</div>
</div>
</div>
<hr>
</div>
<footer class="zinnia-footer">
<div class="container">
<div class="footer-social">
<div class="footer-logo text-center">
オガティ（緒形雄二）
</div>
<div class="footer-social-link">
</div>
</div>
</div>
<div class="container footer-copyright-text text-center">
<p>
© 2012-2025 ogatism/Yuji Ogata<br>
© 2017 Zinnia - Designed & Developed by <a href="">ShapedTheme</a>
</p>
</div>
</footer>
<!-- After footer scripts -->
</body>
</html>