WEBLIC LLC

ブログ

スマホサイトで便利!片方可変のボックスレイアウトの作りかた

Web制作

2016年10月31日

片方可変レイアウト

こんにちは。丹羽です。
スマホサイトでは画面の幅がデバイスによってバラバラです。
より少ないCSSコーディングで、片方のボックスが固定サイズ、もう片方は可変(リキッド)にしたいときが多々あります。
今までの作りではネガティブマージンを指定してなど、いろいろ方法がありましたが、
CSS3にあるcalc()ファンクションを使うと超便利!

CSSとHTMLのサンプルコードはこんな感じです。
コード

関連記事

Web制作

WordPressでWebPを導入してページスピードを向上させる方法

ページスピードインサイトのスコアがなかなか上がらず、悩んでいる方へ。表示速度が速くなることは、単にス...

2024年7月16日

Web制作

iPhoneでTwitterのウィジェットがはみ出る…

こんにちは、丹羽です。WEBLICでは様々なお客さんのサイト運用をお手伝いしています。先日弊社がお手...

2016年10月11日

Web制作

アイコンを軽量化して、Webサイトの表示速度を速くする

Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加すると...

2023年9月7日

Web制作

Sass mixinの引数に0を指定する方法

背景画像をカラムごとに違う画像を配置するため、mixinを使って設定しましたが、うまくいきませんでし...

2016年12月12日

Web制作

メイリオフォントはCSSでイタリックが効かない!

先日ある案件でデバイスフォントを斜体にする必要がありました。普段は何も気にせずCSSでイタリックを設...

2017年4月3日

  • カテゴリー

  • 本日、 1人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社