WEBLIC LLC

ブログ

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

Web制作

2016年10月31日

片方可変レイアウト

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

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

関連記事

Web制作

低予算でのWordPress運用ガイド!子テーマの重要性を解説

ホームページの制作に予算制限がある中で、自社のスタッフがWordPressを使ってサイトを構築するこ...

2024年7月30日

Web制作

VirtualBoxでGuest Addsinionsをインストールしても画面サイズが変わらない場合の対処法

弊社の制作環境はMacで、制作したサイトのIEチェックはVMwareもしくはVirtualBoxにイ...

2017年3月8日

Web制作

WordPressでショートコードを使って外部PHPファイルを読み込む方法

WordPressでサイトを構築している方には馴染みのあるショートコード。例えばお問い合わせのプラグ...

2024年7月12日

Web制作

Google Chrome Ver56でSSL証明書情報を確認する方法

最近何かと話題のSSL(https)ですが、Google Chromeをアップデートしたところ、SS...

2017年2月3日

Web制作

Dreamweaver CC 2017で自動作成されるcssファイルを作らない方法

エディタをDreamweaver CC 2017に乗り換えて少し気になったことがあります。それはSa...

2017年3月23日

  • カテゴリー

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

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社