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

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

tableでのヘッダー固定に関して

超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 https://github.com/umanari145/css 注意したいポイントとして、 tableをいうことを頭から …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …