どうもー！NISO desu!
いつの間にか、このプログラミング記事も１４回まで来ていますね。とても感動してimasu（うるうる）そして、今日はいよいよCSS編の最後に突入しました。
さて、設計図をみながら、サイトを作成するときに思った通りに表示されないことが多いでしょう。筆者も昔、デモサイトを作るときに手を焼きました。今日は当時に引っかかったところをシェアしようと思います。それではよろしくお願いします。
それでは注意点①！
設計図は三つ用意しておこう！
PC・スマホ・タブレットの設計図
画面サイズ（正確にいうと解像度ですね）は機種によって異なるので、設計図を一つだけ用意したら、写っているものが崩れる可能性が高いです。
次は注意点②！
リスポンシブ（Responsive）でサイトを作りましょう！
Responsiveは英語で反応するという意味を持つ単語です。CSSの世界では、Responsiveとは画面サイズに応じて、表示されるものが変わることです。そして、それを設定するための関数はこちらになります。
XXXのところに数字を入れ替え、カッコのところにコードを入れたら、表示されるものも変わってきますので、ぜひやってみてください。ご参考までによく設定されるものを載せます。
携帯の場合
@media only screen and (max-width: 480px) {}
タブレットの場合
@media only screen and (max-width: 1024px) {}
その③！
リスポンシブ単位で、四角を作るときは要注意！！
PXと違って、リスポンシブ用の単位があります。それは、比例によって変わるrem・em・%のことです。自分の画面に四角が写っても、他の画面に同じものが表示される保証はないです。なぜなら、これらの単位は解像度に応じて、表示される横縦が変わるからです。そんなときにこの二つ方法でやってみてください。
方法①：
小さい四角（例えばページのボタン）でしたら、pxで四角を作っても大丈夫だと思います。確かに横縦は画面に応じて、変わりませんが、そもそも変わる幅はそこまでないので、視覚的にはそんなに差がないです。
方法②：
こちらのコードでやってみてください。
.square {
width: 50%;
}
.square:after {
content: “”; display: block; padding-bottom: 100%;
}
ちなみに方法はいくつもありますので、もし興味のある方はネットで検索してみてください。
最後の④！
もし設計図にpxだけが記載されたら、どうすればいいですか？
実際比例がありますので、皆さんの参考にのせます。
1px=0.75pt=0.0625em=0.0625rem=6.25%
といって、pxはrem・em・%と違って固定単位なので、実際表示されるものが違う可能性が高いです。そんなときは色んな関数を試したほうがいいと思います！
どうでしょうか？
私はデモサイトを作るときにこちらの問題にあったんです。
でも一番大事なのは、スキル、方法ではなく、挫けない精神です。何度失敗しても、試し続けることです。なぜなら、失敗は成功の基ですから。それでは、またお会いしましょう！