skillup

技術ブログ

デザイン

pcサイトのコーディングに関しての注意点。

投稿日:

PCサイトのコーディングをしていて気づいたことなど。

最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・

  • 幅が縮むということを常に意識する。
  • 縮めた時にページが崩れたり、横に突き出さないかを要チェック。
  • 上記対策などはsectionブロックごとにmin-widthなどで最小幅を設定するのがおそらく良さげ。
  • 幅が足りない時の調整としてflex-shirnkは結構使える(基本1で設定すると思いますが・・)
  • キャッチ画像をどのように表現するかはかなり大切。
  • JavaScriptのアニメーションはかなり使う機会が多いので習熟しておくと良い。
  • 基本maring autoでセンタリングしているケースが多いと思うが、position abosoluteなどを使っているときはそこそこ面倒臭いので要注意。

思いついたものをとりあえず。

随時更新予定。

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

スマホサイト対策全般

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

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …