投稿日:

フレキスブルレイアウトのためのサイズ指定

フレキスブルレイアウトデザインで画像や要素の幅や高さ、フォントサイズなどを指定したいときの方法

まずJSでhtmlタグに常に横幅サイズと同じサイズのfont-sizeを指定

function resizeHandler() {
        $('html').css({ font-size:$('html').outerWidth()+'px);
};
$(window).bind('resize', resizeHandler);
resizeHandler();

で、幅1400px基準でフォントサイズ16px相当にしたい場合
font-size:calc(16 / 1400 * 1rem);

幅375px基準(iPhoneなど)でフォントサイズ16px相当にしたい場合
font-size:calc(16 / 375 * 1rem);

いままで100vwとか使ってたんだけど、Windowsの場合どうしてもスクロールバーの分も含めてのサイズだったので、これで解決して何より

この方法、フォントサイズに限らずwidthやheight、paddingなどにも使えますです

投稿日:

への字の矢印をCSSできれいに書く

SELECTとかスクロールボタンなどで矢印をよく使うのだけど、CSSできれいに書けたのでメモ

p::before, p::after {
    content:'';
    position:absolute; right:30px; top:50%;
    width:1px; height:13px;
    transform-origin:bottom;
    background-color:#fff;
}
p::before { transform:translateY(-50%) rotate(-45deg); }
p::after { transform:translateY(-50%) rotate(45deg); }

rightは矢印の頂点の位置、widthは棒の長さ、heightは棒の幅、backgound-colorは線の色。
上矢印にする場合はtransform-originをtopにする。

投稿日:

body幅の切り替え

色々やった結果、最終的に以下に落ち着く。

/*
 ① スマホ
*/
body { width:100%; }

/*
 ② タブレット
*/
@media only screen and (min-device-width:481px) {
    body { min-width:768px; }
}

/*
 ③ PC
*/
@media only screen and (min-device-width:769px) {
    body { min-width:1024px; }
}

タブレットは768px以上にして、あとは幅600pxとかのAndroidタブレットなんかはスケーラーにお任せな感じ。
結局の所800pxとか980pxとかに対応しても良いのだけど。幅広のデザインの場合かなり無理が来てしまうので、もうスクロールバーで良いんじゃね？っていう考え。
まぁもし対応しろって言われたら対応するって感じでいいかもしれないと思う今日このごろです。
PCのmin-widthが1024pxなのは、iPad PROに合わせてる感じ。逆に言えばこのサイズできちんと見えるレイアウトにしなければならない。
min-device-widthを使ってるので、PCは③一択。

投稿日:

横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする

格好つけてセンタリングでデザインしたものの、スマホで見るとはみ出して2行になってしまうのはよくあること。
なので、はみ出しちゃった場合は自動的に左寄せにしちゃうという苦肉の策。

p { text-align:center; }
p span { display:inline-block; text-align:left; }

<p>
  <span>横幅に余裕があるときはセンタリングをして、余裕がないときには左寄せにする</span>
</p>

p span の display:inline-block; が重要、というか必須。