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

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-5 …