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

sassについて

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

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …