skillup

技術ブログ

デザイン

レスポンシブサイト作成に関して

投稿日:

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。

  • メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなるとbackground-sizecoverbackground-positioncenter center;の組み合わせが良いのでは。
  • メインキャッチのロゴなどは絶対値のtop,left50%+transition50%で要素分元に戻す。ただの文字などはtext-align:centerで
  • フォントは明朝ではなく、ゴシック系で。「ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’MS Pゴシック’,’MS PGothic’;」の組み合わせ
  • 比率の修正に関してはsassがあると非常に作業がしやすい。これをincludeで呼び出して、処理をする。768pxを境界にすると良い。
  • pcだったら横にしておいて、スマホだったら縦にする場合は、flexのspace-arond or display inline-block →display:block。flexの縦並びは多くの環境で崩れたので、対応していない端末が多いかも(IE11とiphone5)
  • 中央幅の作りはPC:固定幅(あるいは%+min-width)+margin-left(right) auto , スマホ用%幅+margin-left(right)auto。
  • 中央幅は必ず変数制御。それ以外の要素もなるべく変数でコントロールし、呼び出すようにする。
  • PCとスマホでどの要素を共通にするかしないかをコーディング前にしっかりとコントロールしておくこと。またメディアクエリはPC(default)ファースト+スマホのメディアクエリの方がしやすい。

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …